Optional argsOptional childJodit.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');
}
}
}
]
})
Optional childOptional commandThe command executes when the button is pressed. Allowed all
https://developer.mozilla.org/ru/docs/Web/API/Document/execCommand#commands and several specific [[IJodit.execCommand]]
Optional cssOptional dataOptional defaultOptional execThis function will be executed when the button is pressed.
Optional getOptional hotkeysOptional iconString name for existing icons.
var editor = Jodit.make('.editor', {
buttons: [
{
icon: 'source',
exec: function (editor) {
editor.toggleMode();
}
}
]
})
Optional iconURLUse 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 isYou can use it function for control - active/not active button
Optional button: IToolbarButtoncopyformat plugin
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;
}
}
}
})
Optional isOptional button: IToolbarButtonOptional isOptional button: IToolbarButtonOptional isYou can use it function for control - disable/enable button
Optional button: IToolbarButtoncopyformat plugin
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;
}
}
}
})
Optional isOptional listDrop-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
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>';
}
});
Optional modeOptional modsOptional popupAfter click on the button it will show popup element which consist value that this function returned
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;
}
}
]
});
Optional tagOptional tagsTag list: when cursor inward tag from this list, button will be highlighted
Optional templateThe method which will be called for each element of button.list
Optional textOptional tooltipButtons hint
Optional button: IToolbarButtonOptional updateIf you like Jodit - try Jodit PRO
Allows you to set a separate handler for list items