Optional argsOptional childOptional 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 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
copyformat 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 button: IToolbarButtonOptional isOptional button: IToolbarButtonOptional isOptional button: IToolbarButtonOptional isYou can use it function for control - disable/enable button
copyformat 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 button: IToolbarButtonOptional 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.e.fire('errorMessage', '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 updateIf you like Jodit - try Jodit PRO
Allows you to set a separate handler for list items
Example