В этой статье рассмотрим небольшой пример создания своей кнопки для текстового редактора движка 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 файла нашего плагина, указав в качестве индекса массива «$plugin_array['msn__mce_plugins']» его название.
Вторым хуком, добавляем нашу кнопку в редактор:
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, можно разрабатывать многооконные приложения с богатым функционалом.