IControlTypeContent

types.IControlTypeContent

Hierarchy

text

Optional text: string

Inherited from

IControlTypeStrong.text

Defined in

src/types/toolbar.d.ts#32


textTemplate

Optional textTemplate: (jodit: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, value: string) => string

Type declaration

(jodit, value): string

Parameters
Name Type
jodit IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
value string
Returns

string

Inherited from

IControlTypeStrong.textTemplate

Defined in

src/types/toolbar.d.ts#33


mode

Optional mode: Modes

Inherited from

IControlTypeStrong.mode

Defined in

src/types/toolbar.d.ts#35


hotkeys

Optional hotkeys: string | string[]

Inherited from

IControlTypeStrong.hotkeys

Defined in

src/types/toolbar.d.ts#36


data

Optional data: IDictionary

Inherited from

IControlTypeStrong.data

Defined in

src/types/toolbar.d.ts#37


isInput

Optional isInput: boolean

Inherited from

IControlTypeStrong.isInput

Defined in

src/types/toolbar.d.ts#39


component

Optional component: "button" | "select"

Inherited from

IControlTypeStrong.component

Defined in

src/types/toolbar.d.ts#41


isActive

Optional isActive: (editor: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, button: IToolbarButton) => 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

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

Parameters
Name Type
editor IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
button IToolbarButton
Returns

boolean

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;
             }
         }
    }
})

Inherited from

IControlTypeStrong.isActive

Defined in

src/types/toolbar.d.ts#67


update

Optional update: (editor: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, button: IToolbarButton) => void

Type declaration

(editor, button): void

Parameters
Name Type
editor IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
button IToolbarButton
Returns

void

Inherited from

IControlTypeStrong.update

Defined in

src/types/toolbar.d.ts#69


isChildActive

Optional isChildActive: (editor: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, button: IToolbarButton) => boolean

Type declaration

(editor, button): boolean

Parameters
Name Type
editor IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
button IToolbarButton
Returns

boolean

Inherited from

IControlTypeStrong.isChildActive

Defined in

src/types/toolbar.d.ts#71


isDisabled

Optional isDisabled: (editor: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, button: IToolbarButton) => 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

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

Parameters
Name Type
editor IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
button IToolbarButton
Returns

boolean

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;
             }
         }
    }
})

Inherited from

IControlTypeStrong.isDisabled

Defined in

src/types/toolbar.d.ts#99


isChildDisabled

Optional isChildDisabled: (editor: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, button: IToolbarButton) => boolean

Type declaration

(editor, button): boolean

Parameters
Name Type
editor IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
button IToolbarButton
Returns

boolean

Inherited from

IControlTypeStrong.isChildDisabled

Defined in

src/types/toolbar.d.ts#101


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

Inherited from

IControlTypeStrong.command

Defined in

src/types/toolbar.d.ts#141


tagRegExp

Optional tagRegExp: RegExp

Inherited from

IControlTypeStrong.tagRegExp

Defined in

src/types/toolbar.d.ts#142


tags

Optional tags: HTMLTagNames[]

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

Inherited from

IControlTypeStrong.tags

Defined in

src/types/toolbar.d.ts#147


css

Optional css: IDictionary<string | string[]>

Inherited from

IControlTypeStrong.css

Defined in

src/types/toolbar.d.ts#149


icon

Optional icon: string

String name for existing icons.

Example

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

Inherited from

IControlTypeStrong.icon

Defined in

src/types/toolbar.d.ts#167


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

Inherited from

IControlTypeStrong.iconURL

Defined in

src/types/toolbar.d.ts#173


tooltip

Optional tooltip: string | (editor: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, control: IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>, button?: IToolbarButton) => string

Buttons hint

Inherited from

IControlTypeStrong.tooltip

Defined in

src/types/toolbar.d.ts#178


exec

Optional exec: (view: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, current: Nullable<Node>, options: { control: IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton> ; originalEvent: Event ; button: IToolbarButton }) => any

This function will be executed when the button is pressed.

Type declaration

(view, current, options): any

This function will be executed when the button is pressed.

Parameters
Name Type
view IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
current Nullable<Node>
options Object
options.control IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>
options.originalEvent Event
options.button IToolbarButton
Returns

any

Inherited from

IControlTypeStrong.exec

Defined in

src/types/toolbar.d.ts#185


childExec

Optional childExec: (view: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, current: Nullable<Node>, options: { parentControl: IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton> ; control: IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton> ; 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

Allows you to set a separate handler for list items

Parameters
Name Type
view IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
current Nullable<Node>
options Object
options.parentControl IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>
options.control IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>
options.originalEvent Event
options.button IToolbarButton
Returns

any

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');
        }
      }
    }
  ]
})

Inherited from

IControlTypeStrong.childExec

Defined in

src/types/toolbar.d.ts#220


args

Optional args: any[]

Inherited from

IControlTypeStrong.args

Defined in

src/types/toolbar.d.ts#231


template

Optional template: (jodit: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, key: string, value: string) => string

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

Type declaration

(jodit, key, value): string

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

Parameters
Name Type
jodit IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
key string
value string
Returns

string

Inherited from

IControlTypeStrong.template

Defined in

src/types/toolbar.d.ts#236


childTemplate

Optional childTemplate: (jodit: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, key: string, value: string, button: IToolbarButton) => string

Type declaration

(jodit, key, value, button): string

Parameters
Name Type
jodit IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
key string
value string
button IToolbarButton
Returns

string

Inherited from

IControlTypeStrong.childTemplate

Defined in

src/types/toolbar.d.ts#238


Optional popup: (jodit: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, current: Nullable<Node>, close: () => void, button: IToolbarButton) => 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

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

Parameters
Name Type
jodit IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
current Nullable<Node>
close () => void
button IToolbarButton
Returns

string | false | HTMLElement | IUIElement

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;
         }
     }
   ]
});

Inherited from

IControlTypeStrong.popup

Defined in

src/types/toolbar.d.ts#271


defaultValue

Optional defaultValue: string | string[]

Inherited from

IControlTypeStrong.defaultValue

Defined in

src/types/toolbar.d.ts#278


value

Optional value: (jodit: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, button: IToolbarButton) => undefined | string

Type declaration

(jodit, button): undefined | string

Parameters
Name Type
jodit IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
button IToolbarButton
Returns

undefined | string

Inherited from

IControlTypeStrong.value

Defined in

src/types/toolbar.d.ts#280


mods

Optional mods: IDictionary<ModType>

Inherited from

IControlTypeStrong.mods

Defined in

src/types/toolbar.d.ts#281


name

name: string

Inherited from

IControlTypeStrong.name

Defined in

src/types/toolbar.d.ts#290


list

Optional list: 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>';
       }
 });

Inherited from

IControlTypeStrong.list

Defined in

src/types/toolbar.d.ts#291


getContent

getContent: (editor: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, button: IToolbarButton) => string | HTMLElement

Type declaration

(editor, button): string | HTMLElement

Parameters
Name Type
editor IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>
button IToolbarButton
Returns

string | HTMLElement

Overrides

IControlTypeStrong.getContent

Defined in

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