IControlType

types.IControlType

Type parametersType parameters

HierarchyHierarchy

• IControlType

  ↳ IControlTypeStrong

namename

Optional name: string

Defined inDefined in

src/types/toolbar.d.ts#31

texttext

Optional text: string

Defined inDefined in

src/types/toolbar.d.ts#32

textTemplatetextTemplate

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

Type declarationType declaration

(jodit, value): string

ParametersParameters

ReturnsReturns

string

Defined inDefined in

src/types/toolbar.d.ts#33

modemode

Optional mode: Modes

Defined inDefined in

src/types/toolbar.d.ts#35

hotkeyshotkeys

Optional hotkeys: string | string[]

Defined inDefined in

src/types/toolbar.d.ts#36

datadata

Optional data: IDictionary

Defined inDefined in

src/types/toolbar.d.ts#37

isInputisInput

Optional isInput: boolean

Defined inDefined in

src/types/toolbar.d.ts#39

componentcomponent

Optional component: "button" | "select"

Defined inDefined in

src/types/toolbar.d.ts#41

isVisibleisVisible

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

Type declarationType declaration

(editor, control): boolean

ParametersParameters

ReturnsReturns

boolean

Defined inDefined in

src/types/toolbar.d.ts#43

isActiveisActive

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 declarationType declaration

(editor, button): boolean

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

ParametersParameters

ReturnsReturns

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

Defined inDefined in

src/types/toolbar.d.ts#69

updateupdate

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

Type declarationType declaration

(editor, button): void

ParametersParameters

ReturnsReturns

void

Defined inDefined in

src/types/toolbar.d.ts#71

isChildActiveisChildActive

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

Type declarationType declaration

(editor, button): boolean

ParametersParameters

ReturnsReturns

boolean

Defined inDefined in

src/types/toolbar.d.ts#73

getContentgetContent

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

Type declarationType declaration

(editor, button): string | HTMLElement

ParametersParameters

ReturnsReturns

string | HTMLElement

Defined inDefined in

src/types/toolbar.d.ts#75

isDisabledisDisabled

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 declarationType declaration

(editor, button): boolean

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

ParametersParameters

ReturnsReturns

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

Defined inDefined in

src/types/toolbar.d.ts#101

isChildDisabledisChildDisabled

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

Type declarationType declaration

(editor, button): boolean

ParametersParameters

ReturnsReturns

boolean

Defined inDefined in

src/types/toolbar.d.ts#103

listlist

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 inDefined in

src/types/toolbar.d.ts#136

commandcommand

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 inDefined in

src/types/toolbar.d.ts#143

tagRegExptagRegExp

Optional tagRegExp: RegExp

Defined inDefined in

src/types/toolbar.d.ts#144

tagstags

Optional tags: HTMLTagNames[]

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

Defined inDefined in

src/types/toolbar.d.ts#149

csscss

Optional css: IDictionary<string | string[]>

Defined inDefined in

src/types/toolbar.d.ts#151

iconicon

Optional icon: string

String name for existing icons.

Example

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

Defined inDefined in

src/types/toolbar.d.ts#169

iconURLiconURL

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 inDefined in

src/types/toolbar.d.ts#175

tooltiptooltip

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

Buttons hint

Defined inDefined in

src/types/toolbar.d.ts#180

execexec

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 declarationType declaration

(view, current, options): any

This function will be executed when the button is pressed.

ParametersParameters

ReturnsReturns

any

Defined inDefined in

src/types/toolbar.d.ts#187

childExecchildExec

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 declarationType declaration

(view, current, options): any

Allows you to set a separate handler for list items

ParametersParameters

ReturnsReturns

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

Defined inDefined in

src/types/toolbar.d.ts#222

argsargs

Optional args: any[]

Defined inDefined in

src/types/toolbar.d.ts#233

templatetemplate

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

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

Type declarationType declaration

(jodit, key, value): string

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

ParametersParameters

ReturnsReturns

string

Defined inDefined in

src/types/toolbar.d.ts#238

childTemplatechildTemplate

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

Type declarationType declaration

(jodit, key, value, button): string

ParametersParameters

ReturnsReturns

string

Defined inDefined in

src/types/toolbar.d.ts#240

popuppopup

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 declarationType 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

ParametersParameters

ReturnsReturns

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

Defined inDefined in

src/types/toolbar.d.ts#273

defaultValuedefaultValue

Optional defaultValue: string | string[]

Defined inDefined in

src/types/toolbar.d.ts#280

valuevalue

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

Type declarationType declaration

(jodit, button): undefined | string

ParametersParameters

ReturnsReturns

undefined | string

Defined inDefined in

src/types/toolbar.d.ts#282

modsmods

Optional mods: IDictionary<ModType>

Defined inDefined in

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