IControlType

types.IControlType

Type parameters

Name Type
T extends IViewBased = IJodit | IViewBased | IFileBrowser
B extends IToolbarButton = IToolbarButton

Hierarchy

name

Optional name: string

Defined in

src/types/toolbar.d.ts#31


text

Optional text: string

Defined in

src/types/toolbar.d.ts#32


textTemplate

Optional textTemplate: (jodit: T, value: string) => string

Type declaration

(jodit, value): string

Parameters
Name Type
jodit T
value string
Returns

string

Defined in

src/types/toolbar.d.ts#33


mode

Optional mode: Modes

Defined in

src/types/toolbar.d.ts#35


hotkeys

Optional hotkeys: string | string[]

Defined in

src/types/toolbar.d.ts#36


data

Optional data: IDictionary

Defined in

src/types/toolbar.d.ts#37


isInput

Optional isInput: boolean

Defined in

src/types/toolbar.d.ts#39


component

Optional component: "button" | "select"

Defined in

src/types/toolbar.d.ts#41


isVisible

Optional isVisible: (editor: T, control: IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>) => boolean

Type declaration

(editor, control): boolean

Parameters
Name Type
editor T
control IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>
Returns

boolean

Defined in

src/types/toolbar.d.ts#43


isActive

Optional isActive: (editor: T, button: B) => boolean

You can use it function for control - active/not active button

See

copyformat plugin

Example

var editor = Jodit.make('.selectorclass', {
    buttons: {
         checkbox: {
             data: {
                 active: false,
             },
             iconURL: 'checkbox.png',
             exec: function (a, b, btn) {
                 btn.data.active = !btn.data.active;
             },
             isActive: function (editor, btn) {
                 return !!btn.data.active;
             }
         }
    }
})

Type declaration

(editor, button): boolean

Parameters
Name Type
editor T
button B
Returns

boolean

Defined in

src/types/toolbar.d.ts#69


update

Optional update: (editor: T, button: B) => void

Type declaration

(editor, button): void

Parameters
Name Type
editor T
button B
Returns

void

Defined in

src/types/toolbar.d.ts#71


isChildActive

Optional isChildActive: (editor: T, button: B) => boolean

Type declaration

(editor, button): boolean

Parameters
Name Type
editor T
button B
Returns

boolean

Defined in

src/types/toolbar.d.ts#73


getContent

Optional getContent: (editor: T, button: B) => string | HTMLElement

Type declaration

(editor, button): string | HTMLElement

Parameters
Name Type
editor T
button B
Returns

string | HTMLElement

Defined in

src/types/toolbar.d.ts#75


isDisabled

Optional isDisabled: (editor: T, button: B) => boolean

You can use it function for control - disable/enable button

See

copyformat plugin

Example

var editor = Jodit.make('.selectorclass', {
    buttons: {
         checkbox: {
             data: {
                 enable: false,
             },
             iconURL: 'checkbox.png',
             exec: function (a, b, btn) {
                 btn.data.active = !btn.data.active;
             },
             isDisabled: function (editor, btn) {
                 return !!btn.data.enable;
             }
         }
    }
})

Type declaration

(editor, button): boolean

Parameters
Name Type
editor T
button B
Returns

boolean

Defined in

src/types/toolbar.d.ts#101


isChildDisabled

Optional isChildDisabled: (editor: T, button: B) => boolean

Type declaration

(editor, button): boolean

Parameters
Name Type
editor T
button B
Returns

boolean

Defined in

src/types/toolbar.d.ts#103


list

Optional list: string[] | number[] | IDictionary<string | number>

Drop-down list. A hash or array. You must specify the command which will be submitted for the hash key
(or array value) (see .IJodit.execCommand or define 'exec' function. See example

Example

Jodit.make('#editor2', {
    buttons: Jodit.defaultOptions.buttons.concat([{
       name: 'listsss',
       iconURL: 'stuf/dummy.png',
       list: {
           h1: 'insert Header 1',
           h2: 'insert Header 2',
           clear: 'Empty editor',
       },
       exec: (editor, current, control) => {
            var key = control.args[0],
               value = control.args[1];

            if (key === 'clear') {
                this.setEditorValue('');
                return;
            }
            this.s.insertNode(this.c.element(key, ''));
            this.message.info('Was inserted ' + value);
       },
       template: function (key, value) {
           return '<div>' + value + '</div>';
       }
 });
Defined in

src/types/toolbar.d.ts#136


command

Optional command: string

The command executes when the button is pressed. Allowed all

See

https://developer.mozilla.org/ru/docs/Web/API/Document/execCommand#commands
and several specific IJodit.execCommand

Defined in

src/types/toolbar.d.ts#143


tagRegExp

Optional tagRegExp: RegExp

Defined in

src/types/toolbar.d.ts#144


tags

Optional tags: HTMLTagNames[]

Tag list: when cursor inward tag from this list, button will be highlighted

Defined in

src/types/toolbar.d.ts#149


css

Optional css: IDictionary<string | string[]>

Defined in

src/types/toolbar.d.ts#151


icon

Optional icon: string

String name for existing icons.

Example

var editor = Jodit.make('.editor', {
 buttons: [
     {
         icon: 'source',
         exec: function (editor) {
             editor.toggleMode();
         }
     }
 ]
})
Defined in

src/types/toolbar.d.ts#169


iconURL

Optional iconURL: string

Use this property if you want set background image for the button. This icon can be 16 * 16 px in SVG or
another image formats

Defined in

src/types/toolbar.d.ts#175


tooltip

Optional tooltip: string | (editor: T, control: IControlType<T, B>, button?: B) => string

Buttons hint

Defined in

src/types/toolbar.d.ts#180


exec

Optional exec: (view: T, current: Nullable<Node>, options: { control: IControlType<T, B> ; originalEvent: Event ; button: IToolbarButton }) => any

This function will be executed when the button is pressed.

Type declaration

(view, current, options): any

Parameters
Name Type
view T
current Nullable<Node>
options Object
options.control IControlType<T, B>
options.originalEvent Event
options.button IToolbarButton
Returns

any

Defined in

src/types/toolbar.d.ts#187


childExec

Optional childExec: (view: T, current: Nullable<Node>, options: { parentControl: IControlType<T, B> ; control: IControlType<T, B> ; originalEvent: Event ; button: IToolbarButton }) => any

Allows you to set a separate handler for list items

Example

Jodit.make('.editor', {
  buttons: [
    {
      name: 'add-date',
      iconURL: 'stuf/dummy.png',
      list: {
        options: 'Open options',
      },
      exec(editor, current, control) {
        editor.s.insertHTML(new Date().toString());
      },
      childExec(editor, current, control) {
        if (control.args[0] === 'options') {
          editor.alert('Options');
        }
      }
    }
  ]
})

Type declaration

(view, current, options): any

Parameters
Name Type
view T
current Nullable<Node>
options Object
options.parentControl IControlType<T, B>
options.control IControlType<T, B>
options.originalEvent Event
options.button IToolbarButton
Returns

any

Defined in

src/types/toolbar.d.ts#222


args

Optional args: any[]

Defined in

src/types/toolbar.d.ts#233


template

Optional template: (jodit: T, key: string, value: string) => string

The method which will be called for each element of button.list

Type declaration

(jodit, key, value): string

Parameters
Name Type
jodit T
key string
value string
Returns

string

Defined in

src/types/toolbar.d.ts#238


childTemplate

Optional childTemplate: (jodit: T, key: string, value: string, button: IToolbarButton) => string

Type declaration

(jodit, key, value, button): string

Parameters
Name Type
jodit T
key string
value string
button IToolbarButton
Returns

string

Defined in

src/types/toolbar.d.ts#240


Optional popup: (jodit: T, current: Nullable<Node>, close: () => void, button: B) => string | false | HTMLElement | IUIElement

After click on the button it will show popup element which consist value that this function returned

Example

var editor = Jodit.make('.editor', {
   buttons: [
     {
         icon: "insertCode",
         popup: function (editor) {
             var div = document.createElement('div'), button = dccument.createElement('button');
             div.innerHTML = 'Hi! Click button and enter your code';
             button.innerHTML = 'Click me';

             div.appendChild(button);

             button.addEventListener('click', function (e) {
                 editor.s.insertHTML(prompt("Enter your code"));
                 return false;
             });
             return div;
         }
     }
   ]
});

Type declaration

(jodit, current, close, button): string | false | HTMLElement | IUIElement

Parameters
Name Type
jodit T
current Nullable<Node>
close () => void
button B
Returns

string | false | HTMLElement | IUIElement

Defined in

src/types/toolbar.d.ts#273


defaultValue

Optional defaultValue: string | string[]

Defined in

src/types/toolbar.d.ts#280


value

Optional value: (jodit: T, button: B) => undefined | string

Type declaration

(jodit, button): undefined | string

Parameters
Name Type
jodit T
button B
Returns

undefined | string

Defined in

src/types/toolbar.d.ts#282


mods

Optional mods: IDictionary<ModType>

Defined in

jodit/src/types/toolbar.d.ts:283