Як додати свою кнопку в редактор TinyMCE

Пропоную трохи розвинути цю тему, трохи доопрацювавши наш код створення кнопки для текстового редактора WordPress. Це не якісь суперзміни, але мені цей код став у пригоді під час реалізації одного проєкту. Сподіваюся, що й вам він буде корисним, адже інформації про візівіг TinyMCE українською чи російською мовами не так уже й багато. А тема доволі цікава.

Сьогодні ми замість вставки текстової інформації в позицію курсора будемо «обгортати» виділений текст у заданий тег. Таким тегом буде тег <span> із заздалегідь заданим класом important. Приблизно це виглядатиме так:

Текст до спану <span class=«important»>текст всередині спану</span> текст після спану.

Нічого особливого. Але, наприклад, для плагіна SyntaxHighlighter такої кнопки справді не вистачає. Хоча там, швидше за все, потрібно реалізувати спливаюче вікно з можливістю вставити код і вибрати мову підсвітки (php, js, html тощо). До речі! У майбутньому цим можна буде зайнятись — заодно поглибити знання API TinyMCE.

Пропоную не дублювати код створення хуків для підключення файлу плагіна і кнопки редактора, оскільки його можна знайти в попередній статті. А зараз розглянемо JavaScript-код нашого розширення для TinyMCE:

(function(){
	tinymce.PluginManager.add('mxs__mce_plugin', function( editor, url ) {
		editor.addButton('mxs__mce_button', {
			text: 'виділить',
			image: false,
			onclick: function() {
				editor.selection.setContent('<span class="important">' + editor.selection.getContent() + '</span>');
			}
		});
	});
})();

Що тут змінилося? Ми змінили текст кнопки на «виділення» і замінили код обробника події onclick:

editor.selection.setContent('<span class="important">' + editor.selection.getContent() + '</span>');

У ньому ми використовуємо два методи редактора:

• editor.selection.getContent() — отримати вміст виділеного тексту
• editor.selection.setContent() — вставити текст у позицію курсора

Тобто ми просто перезаписуємо виділений текст, обгортаючи його в потрібний нам тег.