WordPress — Как добавить кнопки в текстовый редактор TinyMCE

Логотип Wordpress

В текстовый редактор TinyMCE, который применяется в WordPress можно легко добавить новые кнопки в течение 5 минут.

На этом примере я покажу, как добавить кнопку, которая будет вызывать тег <pre> и цитату <blockquote> с произвольным классом warning.

Скопируйте следующий код в файл functions.php вашей темы:

// Кнопки в визуальный редактор
function new_button()
{
if ( current_user_can('edit_posts') && current_user_can('edit_pages') )
{
add_filter('mce_external_plugins', 'new_plugin');
add_filter('mce_buttons_3', 'new_register_button');
}
}

add_action('init', 'new_button');

function new_plugin($plugin_array){
$plugin_array['new'] = get_bloginfo('template_url').'/js/newbuttons.js';
return $plugin_array;
}
function new_register_button($buttons){
array_push($buttons, "pre");
array_push($buttons, "warning");

return $buttons;
}

В текстовый редактор, решил не добавлять <blockquote class=warning>, только тег <pre>.

// Кнопки в текстовый редактор
if( !function_exists('_add_my_quicktags') ){
function _add_my_quicktags()
{ ?>
<script type="text/javascript">
QTags.addButton( 'pre', 'pre', '<pre>', '</pre>', '', 'Добавление кода', 4 );
</script>
<?php }
add_action('admin_print_footer_scripts', '_add_my_quicktags');
}

Создайте файл newbuttons.js и поместите его в папку /js/ вашей темы.

Один из вариантов расположения: example.com/wp-content/themes/twentynineteen/js/newbuttons.js

Собственно, в нем описывается функционал добавляемых кнопок.

  • title – название кнопки
  • icon – иконки (я использовал стандартные от WordPress)
  • image: url + 'img/figureimg.png' (если требуется изображение)
  • onclick – действие.
(function() {
tinymce.create('tinymce.plugins.new', {
init : function(ed, url) {
ed.addButton('pre', {
title : 'pre',
icon : 'wp_code',
onclick : function() {
ed.selection.setContent('<pre>' + ed.selection.getContent() + '</pre>');
}
});

ed.addButton('warning', {
title : 'warning',
icon : 'blockquote',
onclick : function() {
ed.selection.setContent('<blockquote class="warning">' + ed.selection.getContent() + '</blockquote>');
}
});

},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('new', tinymce.plugins.new);
})();
(У этой записи еще нет рейтинга. Поставьте первую оценку)