Custom button

There are two methods to create buttons.

• You can extend options.controls and then add a button using its string name.
• Alternatively, you can add buttons as an IControlType object.

Include Jodit

<link rel="stylesheet" href="build/jodit.min.css" />
<script src="build/jodit.min.js"></script>
Copy

Create input element

<textarea id="editor">Some text</textarea>
Copy

Extend controls store

Jodit.defaultOptions.controls.info = {
	iconURL: './build/images/icons/269-info.png',
	popup: function (editor) {
		var text = Jodit.modules.Helpers.trim(editor.editor.innerText);
		var wordCount = text.split(/[\s\n\r\t]+/).filter(function (value) {
			return value;
		}).length;
		var charCount = text.replace(/[\s\n\r\t]+/, '').length;

		return (
			'<div style="padding: 10px;">' +
			'Words: ' +
			wordCount +
			'<br>' +
			'Chars: ' +
			charCount +
			'<br>' +
			'</div>'
		);
	}
};
Copy

And use this button by name or create another button like ControlType

const editor = Jodit.make('#editor', {
	buttons: [
		'image',
		{
			iconURL: './images/copy.png',
			exec: function (editor) {
				if (editor.selection.isCollapsed()) {
					editor.execCommand('selectall');
				}
				editor.execCommand('copy');
				Jodit.Alert('Text in your clipboard');
			}
		}
	],
	extraButtons: ['info']
});
Copy

Result