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
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
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