Добавляем кнопки в wysiwyg редактор wordpress
TinyMCE WordPress добавление кнопок. Как я уже сказал во вступительном тексте, редактор по умолчанию содержит только необходимые элементы. Вы можете добавить функциональные возможности за счет добавления новых кнопок. Представляю ниже код добавления кнопки в редактор:
|
1 2 3 4 5 |
function add_mce_buttons($buttons){ array_push($buttons, "hr"); return $buttons; } add_filter("mce_buttons", "add_mce_buttons"); |
Вот ТУТ полный перечень всех кнопок. Добавьте код в вашу тему в файл function.php. Кнопка также может быть добавлен на 2-й или 3-й строке в следующим образом:
|
1 2 |
add_filter ( "mce_buttons_2" , "add_mce_buttons" ); add_filter ( "mce_buttons_3" , "add_mce_buttons" ); |
Создание пользовательских кнопок в редакторе TinyMCE:
Если вы используете shoortcode или классы для текста, изображения, кнопки, которые также могут быть созданы.
Здесь я собираюсь создать кнопку в третьем ряду, кнопка будет работать только в том случаи если пользователь имеет права на редактирование постов или страниц.
Добавить ниже код в function.php:
|
1 2 3 4 5 6 7 8 |
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:
|
1 2 3 4 |
function add_plugin($plugin_array) { $plugin_array['blist'] = get_bloginfo('template_url').'/scripts/customcodes.js'; return $plugin_array; } |
Выполните задачу, добавив следующий код в файл с именем customcodes.js . Сохраните его по определенному выше путеи.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(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); })(); |
Скрываем ненужные кнопки при помощи параметров редактора TinyMCE
Если вы хотите удалить нежелательные кнопки в редакторе, то просто укажите следующий код:
|
1 2 3 4 5 |
function disable_mce_buttons( $opt ) { $opt['theme_advanced_disable'] = 'bold,italic'; return $opt; } add_filter('tiny_mce_before_init', 'disable_mce_buttons'); |
Вы также можете задать специальный параметр и показывать только те элементы, которые вы хотите:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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.
