Hierarchy

Properties

args?: any[]
childExec?: ((view: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, current: Nullable<Node>, options: {
    button: IToolbarButton;
    control: IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>;
    originalEvent: Event;
    parentControl: IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>;
}) => any)

Type declaration

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

Type declaration

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: IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, current: Nullable<Node>, options: {
    button: IToolbarButton;
    control: IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>;
    originalEvent: Event;
}) => any)

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

Type declaration

Type declaration

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

Type declaration

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

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

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

Type declaration

text?: string

Buttons hint

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

Type declaration

Jodit PRO

If you like Jodit - try Jodit PRO