How to add custom button to Jodit toolbar

In the simplest case, you can add a button right when you initialize the editor.:

const editor = Jodit.make('#editor', {
	buttons: [
		...Jodit.defaultOptions.buttons,
		{
			name: 'insertDate',
			tooltip: 'Insert current Date',
			exec: (editor) => {
				editor.s.insertHTML(new Date().toDateString());
			}
		}
	]
});
Copy

Also, the button can be described in the dictionary Jodit.defaultOptions.controls.

Jodit.defaultOptions.controls.selectAll = {
	tooltip: 'Select all content',
	command: 'selectall'
};

const editor = Jodit.make('#editor', {
	buttons: [...Jodit.defaultOptions.buttons, 'selectAll']
});
Copy

The Button interface is quite extensive, and we will not describe it here.

In this tutorial, we will only describe a few examples for different types of buttons.

Drop-down list

Jodit.defaultOptions.controls.wrapInTag = {
	tooltip: 'Wrap selection in tag',
	list: ['h1', 'h2', 'h3'],

	childTemplate: (editor, key, value) =>
		`<span class="${key}">${editor.i18n(value)}</span>`,

	isChildActive: (editor, control) => {
		const current = editor.s.current();

		if (current) {
			const currentBox = Dom.closest(
				current,
				(node) => Dom.isTag(node, control.list), // check if parent node is one of list
				editor.editor
			);

			return Boolean(
				currentBox &&
					currentBox !== editor.editor &&
					control.args !== undefined &&
					currentBox.nodeName.toLowerCase() === control.args[0]
			);
		}

		return false;
	},

	exec(editor, _, { control }) {
		let value = control.args && control.args[0]; // h1, h2 ...

		editor.s.applyStyle(undefined, {
			element: value
		});

		editor.setEditorValue(); // Synchronizing the state of the WYSIWYG editor and the source textarea

		return false;
	}
};
Copy

The list of items can also be a dictionary

Jodit.defaultOptions.controls.wrapInTag = {
	// ...
	list: {
		h1: 'Heading 1',
		h2: 'Heading 2',
		h3: 'Heading 3'
	}
	// ...
};
Copy

Button with a drop-down popup

Often you need not a list, but a full-fledged popup, which will contain your interface or form.

Jodit.defaultOptions.controls.addWord = {
	tooltip: 'Enter text and insert',
	icon: 'pencil',
	popup: (editor, current, self, close) => {
		const form = editor.create.fromHTML(
			`<form>
  	    <input type="text"/>
  	    <button type="submit">Insert</button>
  	  </form>`
		);

		editor.e.on(form, 'submit', (e) => {
			e.preventDefault();
			editor.s.insertHTML(form.querySelector('input').value);
			close();
		});

		return form;
	}
};
Copy

The popup method must return an HTMLElement or string.