Type Parameters

Hierarchy

Properties

args? childExec? childTemplate? command? css? data? defaultValue? exec? getContent? hotkeys? icon? iconURL? isActive? isChildActive? isChildDisabled? isDisabled? isInput? list? mode? mods? name? popup? tagRegExp? tags? template? text? tooltip? update?

Properties

Optional args

args?: any[]

Optional childExec

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

Optional childTemplate

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

Type declaration

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

    • Parameters

      Returns string

Optional command

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

Optional css

css?: IDictionary<string | string[], string>

Optional data

data?: IDictionary<any, string>

Optional defaultValue

defaultValue?: string | string[]

Optional exec

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

Type declaration

Optional getContent

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

Type declaration

Optional hotkeys

hotkeys?: string | string[]

Optional icon

icon?: string

String name for existing icons.

Example

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

Optional iconURL

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

Optional isActive

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

Optional isChildActive

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

Type declaration

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

    • Parameters

      Returns boolean

Optional isChildDisabled

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

Type declaration

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

    • Parameters

      Returns boolean

Optional isDisabled

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

Optional isInput

isInput?: boolean

Optional list

list?: string[] | IDictionary<string | number, string> | number[] | 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>';
       }
 });

Optional mode

mode?: Modes

Optional mods

mods?: IDictionary<ModType, string>

Optional name

name?: string

Optional popup

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

Optional tagRegExp

tagRegExp?: RegExp

Optional tags

tags?: (keyof HTMLElementTagNameMap)[]

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

Optional template

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

Optional text

text?: string

Optional tooltip

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

Buttons hint

Optional update

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