Create custom plugin

You can create your own plugin for Jodit. For example we will create plugin - statistic. It will show words count and chars count in status bar.

Basic code for creating your own plugin:

Jodit.plugins.add('pluginName', function (editor) {
    editor.events.on('afterInit', function () {
        // here you can insert your code
    });
};
Copy

More examples

You can use all events in your plugins.

Create jodit.stat.js

Jodit.plugins.add('stat', function (editor) {
	var statusbar = document.createElement('div');
	statusbar.style.backgroundColor = '#f8f8f8';
	statusbar.style.color = red;
	statusbar.style.fontSize = '11px';
	statusbar.style.padding = '1px 4px';

	function calcStat() {
		var text = Jodit.modules.Helpers.trim(editor.editor.innerText),
			wordCount = text.split(/[\s\n\r\t]+/).filter(function (value) {
				return value;
			}).length,
			charCount = text.replace(/[\s\n\r\t]+/, '').length;

		statusbar.innerText = 'Words: ' + wordCount + ' Chars: ' + charCount;
	}

	editor.events
		.on('change afterInit', editor.async.debounce(calcStat, 100))
		.on('afterInit', function () {
			editor.container.appendChild(statusbar);
		});
});
Copy

Include Jodit

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

Create input element

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

Init Jodit

const editor = Jodit.make('#editor');
Copy

Result