Задавайте вопросы по курсам WordPress

Добавляем кнопки в wysiwyg редактор wordpress

TinyMCE WordPress добавление кнопок. Как я уже сказал во вступительном тексте, редактор по умолчанию содержит только необходимые элементы. Вы можете добавить функциональные возможности за счет добавления новых кнопок. Представляю ниже код добавления кнопки в редактор:

function add_mce_buttons($buttons){
  array_push($buttons, "hr");
  return $buttons;
}
add_filter("mce_buttons", "add_mce_buttons");

Вот ТУТ полный перечень всех кнопок. Добавьте код в вашу тему в файл function.php. Кнопка также может быть добавлен на 2-й или 3-й строке в следующим образом:

add_filter ( "mce_buttons_2" ,  "add_mce_buttons" ); 
add_filter ( "mce_buttons_3" ,  "add_mce_buttons" );

Создание пользовательских кнопок в редакторе TinyMCE:

Если вы используете shoortcode или классы для текста, изображения, кнопки, которые также могут быть созданы.

Здесь я собираюсь создать кнопку в третьем ряду, кнопка будет работать только в том случаи если пользователь имеет права на редактирование постов или страниц.

Добавить ниже код в function.php:

add_action('init', 'custom_mce_button');
function custom_mce_button() {
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_buttons_3', 'add_button');
     add_filter('mce_external_plugins', 'add_plugin');
   }
}

Создадим еще кнопочку которая берет выделенный текст в шорткод:

Функция добавления кнопки:

function add_button($buttons){ array_push($buttons,"blcss");return $buttons;}

Добавляем еще код который будет обращаться к редактору TinyMCE и WordPress:

function add_plugin($plugin_array) {
   $plugin_array['blist'] = get_bloginfo('template_url').'/scripts/customcodes.js';
   return $plugin_array;
}

Этот код просто указывает путь для конкретного файла JavaScript, customcodes.js, который сохраняется в папку scripts, в папке вашей темы. Вы можете жестко закодировать путь, но с использованием get_bloginfo метода у вас получится более гибкий код для переноса на другие сайты.
Выполните задачу, добавив следующий код в файл с именем customcodes.js . Сохраните его по определенному выше путеи.

(function(){
tinymce.PluginManager.requireLangPack('blist');
tinymce.create('tinymce.plugins.blist', {
init : function(ed, url){
ed.addCommand('cmd_css', function(){
ilc_sel_content = tinyMCE.activeEditor.selection.getContent();
tinyMCE.activeEditor.selection.setContent('' + ilc_sel_content + ''); // замените на квадратные скобки
});
ed.addButton('blcss', {
title: 'CSS Wrap',
image: 'https://plugins.jasonbahl.com/wp-content/plugins/j2_anything_slider/js/menu_icon.png',
cmd: 'cmd_css'
});
},
createControl : function(n, cm){
return null;
},
});
tinymce.PluginManager.add('blist', tinymce.plugins.blist);
})();

Иконка «CSS.png» должна быть 20px Х 20px.

Скрываем ненужные кнопки при помощи параметров редактора TinyMCE

Если вы хотите удалить нежелательные кнопки в редакторе, то просто укажите следующий код:

function disable_mce_buttons( $opt ) {
	$opt['theme_advanced_disable'] = 'bold,italic';
	return $opt;
}
add_filter('tiny_mce_before_init', 'disable_mce_buttons');

Вы также можете задать специальный параметр и показывать только те элементы, которые вы хотите:

function custom_options( $opt ) {
	//format drop down list
	$opt['theme_advanced_blockformats'] = 'p,pre,code,h3,h4';
	//font list
	$opt['theme_advanced_fonts'] = 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace';
	//font size
	$opt['theme_advanced_font_sizes'] = '10px,12px,14px,16px,24px';
	//default foreground color
	$opt['theme_advanced_default_foreground_color'] = '#000000';
	//default background color
	$opt['theme_advanced_default_background_color'] = '#FFFFFF';
	return $opt;
}
add_filter('tiny_mce_before_init', 'custom_options);

Также работать с кнопками редактора TinyMCE можно в файле wp-includes/js/quicktags.js но я бы не советовал, при обновлении движка ваши настройки просто слетят.


Статья была взята и переведена с сайта: sumtips.com

 

Благодарности и поправки можете отправлять в комментарии.
Постараюсь быстро ответить всем.
Этот код сам использую, так что добавление кнопок в редактор TinyMCE в WordPress должно работать идеально.

Постараюсь в ближайшее время выложить еще статью как добавлять кнопки в режиме редактирования кода в WordPress.

Николаенко Максим

Директор веб-студии ProGrafika. Занимаюсь разработкой, дизайном и продвижением веб-сайтов. Всегда рад новым читателям блога и хорошим клиентам.


Вам может также понравиться...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal