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

У цій статті розглянемо невеликий приклад створення власної кнопки для текстового редактора WordPress.

Якщо ви не знали, то як редактор WP використовує безкоштовний web-редактор TinyMCE. Це безкоштовний скрипт, і судячи з того, що він використовується в цій CMS (раніше також використовувався в Joomla, як зараз — не знаю), він має певні переваги над іншими редакторами.

У якості прикладу ми створимо кнопку, при натисканні на яку в текст редактора буде вставлятися код символу наголосу.

Щоб створити власну кнопку, нам знадобиться файл functions.php нашої теми. Хоча для цього ми можемо створити окремий плагін, але, оскільки коду небагато, обійдемося файлом функцій.

Відкриваємо файл і додаємо наступний код:

add_filter('mce_external_plugins', function($plugin_array){
	
	$plugin_array['mxs__mce_plugin'] = get_template_directory_uri().'/javascript/mxs__mce_plugin.js';
	
	return $plugin_array;
});

Використовуючи фільтр mce_external_plugins, ми додаємо до масиву зовнішніх плагінів URL до нашого JS-файлу, вказавши його назву як ключ у масиві $plugin_array.

Другим хуком додаємо кнопку до редактора:

add_filter('mce_buttons', function($buttons){
	$buttons[] = 'mxs__mce_button';

	return $buttons;
});

І найважливіше — код самого плагіна (файл mxs__mce_plugin.js):

(function(){
	tinymce.PluginManager.add('mxs__mce_plugin', function( editor, url ) {
		editor.addButton('mxs__mce_button', {
			text: 'ударение',
			image: false,
			onclick: function() {
				editor.insertContent('́');
			}
		});
	});
})();

Вище наведено простий приклад можливостей редактора TinyMCE. При натисканні на кнопку з написом «ударение» (у нашому випадку — просто текст), буде викликано подію onclick, після чого в позицію курсора вставиться код символу наголосу «́».

Як бачите, все досить просто. І маючи гарні знання API TinyMCE, можна розробляти багатовіконні застосунки з широким функціоналом.