Для удобства администрирования решил добавить в редактор  текста в админке несколько полезных кнопок:

  • Первые три кнопки будут вставлять определённую картинку
  • Четверта кнопка будет вставлять shortcod (О шорткодах в ВордПрессе:  тынц)

Начинаем.

Писать отдельный плагин я не стал, поэтому кнопки будут  добавлены только для той темы, которую используем.

В файле functions.php этой темы пишем:

[cce lang=»php»] include «plugins/tinymcebutton.php»
[/cce]

Создаём папку plugins в папке темы, а в ней  файл tinymcebutton.php , его и пишем:

[cce lang=»php»]

<?php

add_action(‘init’, ‘add_custom_buttons’); //—ловим событие инициализации WordPress
add_filter( ‘tiny_mce_version’, ‘my_refresh_mce’); //—событие когда TinyMCE запрашивает версию, не обязательно

function add_custom_buttons() { //— сwordpress инициализировался
if ( ! current_user_can(‘edit_posts’) && ! current_user_can(‘edit_pages’) )
return;
if ( get_user_option(‘rich_editing’) == ‘true’) {
add_filter(‘mce_external_plugins’, ‘add_custom_buttons_tinymce_plugin’); //— добавляем фильтр запроса дополнительных кнопок от TinyMce
add_filter(‘mce_buttons’, ‘register_custom_buttons’); //— добавляем фильтр запроса дополнительных плагинов от TinyMCE
}
}

function register_custom_buttons($buttons) { //— регистрируем кнопки
array_push($buttons, «|», «cupgold»);
array_push($buttons, «|», «cupsilver»);
array_push($buttons, «|», «cupbronze»);
array_push($buttons, «|», «addcolumn»);
return $buttons;
}

function add_custom_buttons_tinymce_plugin($plugin_array) { //— регистрируем наш плагин
$plugin_array[‘custombuttons’] = get_bloginfo(‘template_url’).’/plugins/tinymce_plugin.js’;
return $plugin_array;
}

function my_refresh_mce($ver) { //— ну и для прикола обновляем версию TinyMCE

$ver += 3;
return $ver;
}

?>

[/cce]

Теперь пора написать сам обработчик плагина и кнопок.

Создаём в папке plugins файл  tinymce_plugin.js его и пишем:

[cce lang=»javascript»]

(function() {
tinymce.create(‘tinymce.plugins.CustomButtons’, {
init : function(ed, url) {
ed.addButton(‘cupgold’, { //— названия кнопок соответственно как мы их регистрировали
title : ‘Золотой кубок’, //— заголовок кнопки
image : url+’/cupgold.png’, //—иконка кнопки, иконка должна лежать рядом с tinymce_plugin.js и размером 20х20
onclick : function() {
imgurl=url+»/../images/CupGold_ico.png»;
ed.execCommand(‘mceInsertContent’, false, ‘<img src=»‘+imgurl+'» alt=»Золотой кубок» title=»Золотой кубок» />’); //—  отдаём команду TinyMCE
}
});
ed.addButton(‘cupsilver’, {
title : ‘Серебряный кубок’, //— заголовок кнопки
image : url+’/cupsilver.png’, //—иконка кнопки, иконка должна лежать рядом с tinymce_plugin.js и размером 20х20
onclick : function() {
imgurl=url+»/../images/CupSilver_ico.png»;
ed.execCommand(‘mceInsertContent’, false, ‘<img src=»‘+imgurl+'» alt=»Серебряный кубок» title=»Серебряный кубок» />’);
}
});
ed.addButton(‘cupbronze’, {
title : ‘Бронзовый кубок’, //— заголовок кнопки
image : url+’/cupbronze.png’, //—иконка кнопки, иконка должна лежать рядом с tinymce_plugin.js и размером 20х20
onclick : function() {
imgurl=url+»/../images/CupBronze_ico.png»;
ed.execCommand(‘mceInsertContent’, false, ‘<img src=»‘+imgurl+'» alt=»Бронзовый кубок» title=»Бронзовый кубок» />’);
}
});
ed.addButton(‘addcolumn’, {
title : ‘Добавить колонку’, //— заголовок кнопки
image : url+’/cupbronze.png’, //—иконка кнопки, иконка должна лежать рядом с tinymce_plugin.js и размером 20х20
onclick : function() {
ed.execCommand(‘mceInsertContent’, false, ‘[addcolumn]’);
}
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : «Custom buttons»,
author : ‘PavelK’,
authorurl : ‘http://pavelk.ru/’,
infourl : ‘http://pavelk.ru/’,
version : «1.1»
};
}
});

tinymce.PluginManager.add(‘custombuttons’, tinymce.plugins.CustomButtons); //— custombuttons — как мы назвали плагин когда его регистрировали

})();
[/cce]

Ну и можно добавить обработчик [shortcode] в каком угодно файле. Вот как он  может выглядеть, для примера:

[cce lang=»php»] // [addcolumn] function sc_addcolumn_func() {
return «ТУТ ДОБАВЛЯЕМ КОЛОНКУ»;
}
add_shortcode( ‘addcolumn’, ‘sc_addcolumn_func’ );  //— addcolumn — наш шорт код.
[/cce]

Ну на этом пожалуй всё.

[tip]UPDT1:

Когда  добавляем фильтр регистрации кнопок (add_filter(‘mce_buttons …)  если заменить mce_buttons  на  mce_buttons_3, тогда кнопки появяться в самой нижней строке редактора.[/tip]

[tip]UPDT2:

Так же есть полезный фильтр, срабатывает при инициализации TinyMCE, например, можно изменить valid_elements:

[cce lang=»php»] add_filter(‘tiny_mce_before_init’, ‘tmve_mce_valid_elements’);
function tmve_mce_valid_elements( $init ) {
//—делаем своё тёмное дело…
return $init;
}
[/cce] [/tip] [tip]UPDT3:

Обрамление шорткодом выделенного текста:

[cce lang=»javascript»] onclick: function() {
ed.focus();
ed.selection.setContent(‘[shortcode]’ + ed.selection.getContent() + ‘[/shortcode]’);
}[/cce] [/tip]

 

 

6 комментариев

Евгений 15 апреля 2014 - 16:08

Есть проблема. Кнопки отображаются только для админа. Для юзера они не видны. Из за чего это может быть и как принудительно их отображать для всех ролей?

Reply
Pavelk 9 мая 2014 - 23:57

Дело в ролях пользователя. 

Можно или их изменить через соответствующий плагин или в функции add_cusom_buttons убрать уловия или отредактировать под свои нужды.

Reply
Pavelk 31 марта 2013 - 19:19

Например, так: 

[cc lang=»javascript»]
onclick: function() {
ed.focus();
ed.selection.setContent(‘[shortcode]’ + ed.selection.getContent() + ‘[/shortcode]’);
}
[/cc]

Reply
Марина 17 марта 2013 - 20:35

Хорошая статья! Работает.
Если можно добавьте пожалуйста вариант при выделении текста нажать на кнопку и вставка шорткода с двух сторон [шорткод] и [/шорткод]
Заранее спасибо!

Reply
Pavelk 14 марта 2013 - 21:23

Пардон, поправил статью.

Какие ошибки?

Reply
Иван 14 марта 2013 - 1:46

&amp;&amp; Что это за символы в первом коде?
У меня при вставке include «plugins/tinymcebutton.php»куда не вставлю выдает ошибку?! Что делать, хочу сделать для вставки шорткода и не как в начале даже застрял.

Reply

Leave a Comment

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