Tab widget

const editor = Jodit.make('#editor');
const tabs = Jodit.modules.TabsWidget(editor, [
  { name: 'Images', content: '<div>Images</div>' },
  {
    name: 'Title 2',
    content: editor.c.fromHTML('<div>Some content</div>')
  },
  {
    name: 'Color Picker',
    content: ColorPickerWidget(
      editor,
      function (color) {
        box.style.color = color;
      },
      box.style.color
    )
  }
]);

Interfaces

TabsWidget

TabsWidget(jodit, tabs, state?): HTMLDivElement

Build tabs system

Parameters

Name Type Description
jodit IViewBased<IViewOptions> -
tabs TabOption[] PlainObject where 'key' will be tab's Title and value is tab's content
state? Object You can use for this param any HTML element for remembering active tab
state.activeTab string -

Returns

HTMLDivElement

Example

const editor = Jodit.make('#editor');
const tabs = Jodit.modules.TabsWidget(editor, [
 { name: 'Images', content: '<div>Images</div>' },
 {
   name: 'Title 2',
   content: editor.c.fromHTML('<div>Some content</div>')
 },
 {
   name: 'Color Picker',
   content: ColorPickerWidget(
     editor,
     function (color) {
       box.style.color = color;
     },
     box.style.color
   )
 }
]);

Defined in

jodit/src/modules/widget/tabs/tabs.ts:56

Previous
File Selector widgets
Next
Classes