Type Parameters

Hierarchy

Properties

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

Type declaration

    • (view: T, current: Nullable<Node>, options: {
          button: IToolbarButton;
          control: IControlType<T, B>;
          originalEvent: Event;
          parentControl: IControlType<T, B>;
      }): 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');
      }
      }
      }
      ]
      })

      Parameters

      Returns any

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

Type declaration

    • (jodit: T, key: string, value: string, button: IToolbarButton): string
    • Parameters

      Returns string

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

css?: IDictionary<string | string[], string>
data?: IDictionary<any, string>
defaultValue?: string | string[]
exec?: ((view: T, current: Nullable<Node>, options: {
    button: IToolbarButton;
    control: IControlType<T, B>;
    originalEvent: Event;
}) => any)

Type declaration

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

Type declaration

hotkeys?: string | string[]
icon?: string

String name for existing icons.

Example

var editor = Jodit.make('.editor', {
buttons: [
{
icon: 'source',
exec: function (editor) {
editor.toggleMode();
}
}
]
})
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

isActive?: ((editor: T, control: IControlType<T, B>, button?: B) => boolean)

Type declaration

    • (editor: T, control: IControlType<T, B>, 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;
      }
      }
      }
      })

      Parameters

      Returns boolean

isChildActive?: ((editor: T, control: IControlType<T, B>, button?: B) => boolean)

Type declaration

    • (editor: T, control: IControlType<T, B>, button?: B): boolean
    • Parameters

      Returns boolean

isChildDisabled?: ((editor: T, control: IControlType<T, B>, button?: B) => boolean)

Type declaration

    • (editor: T, control: IControlType<T, B>, button?: B): boolean
    • Parameters

      Returns boolean

isDisabled?: ((editor: T, control: IControlType<T, B>, button?: B) => boolean)

Type declaration

    • (editor: T, control: IControlType<T, B>, 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;
      }
      }
      }
      })

      Parameters

      Returns boolean

isInput?: boolean
list?: string[] | number[] | IDictionary<string | number, string> | IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>[] | IControlListItem[]

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.e.fire('errorMessage', 'Was inserted ' + value);
},
template: function (key, value) {
return '<div>' + value + '</div>';
}
});
mode?: Modes
mods?: IDictionary<ModType, string>
name?: string
popup?: ((jodit: T, current: Nullable<Node>, control: IControlType<T, B>, close: (() => void), button: B) => string | false | HTMLElement | IUIElement)

Type declaration

    • (jodit: T, current: Nullable<Node>, control: IControlType<T, B>, 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;
      }
      }
      ]
      });

      Parameters

      Returns string | false | HTMLElement | IUIElement

tagRegExp?: RegExp
tags?: (keyof HTMLElementTagNameMap)[]

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

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

Type declaration

    • (jodit: T, key: string, value: string): string
    • The method which will be called for each element of button.list

      Parameters

      • jodit: T
      • key: string
      • value: string

      Returns string

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

Buttons hint

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

Type declaration

    • (button: B, editor: T): void
    • Parameters

      • button: B
      • editor: T

      Returns void

Jodit PRO

If you like Jodit - try Jodit PRO