Свои кнопки в редактор TinyMCE Wordpress

Главная » Создание блога » Настройка Wordpress » Добавляем свои кнопки в редактор TinyMCE WordPress

Добавляем свои кнопки в редактор TinyMCE WordPress

2013-09-16 автор: Виталий Кириллов

Все привет! Сегодня на seo-mayak.com очень интересный урок на тему, как добавить свои кнопки в редактор TinyMCE WordPress.

По умолчанию редактор TinyMCE имеет ограниченный функционал, который можно и нужно расширить для облегчения собственного труда.

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

Для расширения функционала TinyMCE я пробовал использовать различные плагины, коих предостаточно, но быстро от них отказался, так как они создавали не хилую нагрузку на сервер.

knopki v tinymce

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

Безусловно стоит научиться добавлять свои кнопки в редактор WordPress, этим вы значительно упростите себе жизнь!

Конечно функции у кнопок могут быть разные, но я продемонстрирую их создание и применение на примере shortcode (коротких кодов), о которых я писал тут.

Вы когда-нибудь создавали плагины самостоятельно? Я думаю, что нет. Тогда самое время написать плагин собственными руками. Поехали!

Регистрация плагина в WordPress

Итак, поставим перед собой такую задачу, добавить кнопку в 3 ряд. Т.е. мы будем создавать еще один ряд кнопок, для удобства их использования.

Шаг№1. С помощью редактора Notepad++ (о функциях редактора читайте здесь) открываем для редактирования файл functions.php и в самый конец перед знаком «?>» вставляем следующее:

function mayak_button()
 {
 if ( current_user_can('edit_posts') && current_user_can('edit_pages') )
 {
 add_filter('mce_external_plugins', 'mayak_plugin');
 add_filter('mce_buttons_3', 'mayak_register_button');
 }
}

add_action('init', 'mayak_button');

Немного поясню, в строчке:

add_filter('mce_buttons_3', 'mayak_register_button');

Мы указали номер ряда кнопок в редакторе:

mce_buttons_3

Если поменять цифру 3 на 2, то создаваемые кнопки будут располагаться на втором ряду. Надеюсь понятно.

Мы, немного опережая события, зарегистрировали плагин, который еще пока не создали. Так давайте его уже создадим.

Создания плагина для добавления кнопок в редактор WordPress

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

Шаг №2. В редакторе Notepad++ создаем новый файл, который назовем «newbuttons.js». Расширение «.js» файлу ставить обязательно потому, что плагин написан на языке JavaScript.

В созданный файл вставляем следующий код:

(function() {
 tinymce.create('tinymce.plugins.mayak', {
 init : function(ed, url) {
 ed.addButton('yellow', {
 title : 'Желтый фон',
 image : url+'/images/Название изображения.png',
 onclick : function() {
 ed.selection.setContent('[yellow]' + ed.selection.getContent() + '[/yellow]');
 }
 });
 },
 createControl : function(n, cm) {
 return null;
 },
 });
 tinymce.PluginManager.add('mayak', tinymce.plugins.mayak);
})();

Теперь давайте разберемся, что тут надо переделать под себя.

В четвертой строке функции:

ed.addButton('yellow', {

В одинарных кавычках (‘yellow’) мы пишем название кнопки, чтобы не путаться, указываем короткий код, за вывод которого будет отвечать данная кнопка.

В пятой строке, опять же в одинарных кавычках, пишем title для кнопки. В данном случаи при наведении курсора на кнопку в редакторе всплывет подсказка — «Желтый фон».

В шестой строке нам надо будет указать путь до изображения кнопки, которое надо будет создать в фотошопе, но об этом чуть позже.

И наконец в восьмой строке в квадратных скобках еще раз пишем короткий код. Т.е. данная кнопка будет обрамлять выделенный участок текста в теги:

[yellow]Выделенный участок текста[/yellow]

Сохраняем файл в кодировке:

zapret po ip4

Больше в функции ничего настраивать не надо.

Шаг №3. С помощью FTP клиента Filezilla закидываем его в папку «js», которая находится в папке с Вашей темой. Если такой папки нет, то надо ее создать.

Итак, плагин мы написали, теперь его надо подключить к файлу funtions.php. Чуть ниже кода, который мы вставили на первом шаге, вставляем следующее:

function mayak_plugin($plugin_array){
 $plugin_array['mayak'] = get_bloginfo('template_url').'/js/newbuttons.js';
 return $plugin_array;
}

Шаг №4. Далее нам надо зарегистрировать в редакторе TinyMCE нашу новую кнопку. В файл functions.php вставляем такую функцию:

function mayak_register_button($buttons){
 array_push($buttons, "yellow");
 return $buttons;}

Во-второй строке функции в двойных кавычках пишем название кнопки, которое мы прописали в плагине на 2 шаге.

Шаг №5. В фотошопе создаем изображение кнопки размером 20х20 пикселей в формате «.png» с любой картинкой или буквой, это неважно. У меня получилось вот такое изображение:

Шаг №6. В папке «js» создаем новую папку и называем ее «images» и закидываем в нее созданное изображение.

Шаг №8. В файле newbuttons.js в шестой строке прописываем название изображения.

В итоге получаем вот такой результат:

knopki tinymce1

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

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

Ну хорошо, а если потребуется добавить несколько кнопок, то как тогда быть, неужели придется писать еще один плагин?

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

Как добавить в редактор несколько кнопок

Итак, чтобы добавить в редактор вторую и последующие кнопки, надо в файле newbuttons.js после 10 строки, где находятся знаки «});» вставить такой код:

ed.addButton('privet', {
 title : 'Приветствие',
 image : url+'/images/privet.png',
 onclick : function() {
 ed.selection.setContent('[privet]' );
}
 });

На этом примере я хочу показать использование одинарного тега, который выводит приветствие читателей. Вы наверное заметили разницу, если нет, форма комментариев вам в помощь.

Целиком функция должна выглядеть следующим образом:

function() {
 tinymce.create('tinymce.plugins.mayak', {
 init : function(ed, url) {
 ed.addButton('yellow', {
 title : 'Желтый фон',
 image : url+'/images/Название изображения.png',
 onclick : function() {
 ed.selection.setContent('[yellow]' + ed.selection.getContent() + '[/yellow]');
 }
 });
 ed.addButton('privet', {
 title : 'Приветствие',
 image : url+'/images/Название изображения.png',
 onclick : function() {
 ed.selection.setContent('[privet]');
 }
 });
 },
 createControl : function(n, cm) {
 return null;
 },
 });
 tinymce.PluginManager.add('mayak', tinymce.plugins.mayak);
})();

Затем в файле functions.php регистрируем новую кнопку. В уже имеющуюся функцию просто добавляем еще одно название:

array_push($buttons, "privet");

Целиком функция должно выглядеть так:

function mayak_register_button($buttons){
 array_push($buttons, "yellow");
 array_push($buttons, "privet");
 return $buttons;}

Конечно надо создать еще одно изображение кнопки и закинуть его на сервер по вышеописанной инструкции. Вот она, наша вторая кнопочка:

knopki tinymce2

Все последующие кнопки вставляются по аналогичному сценарию.

В самом начале статьи я обещал Вам показать как включаются «спящие» функции редактора TinyMCE. Сказано -сделано!

Как включить дополнительные кнопки в редакторе TinyMCE WordPress

Как я уже говорил эти дополнительные функции уже прописаны в редакторе, только они не активированы.

Чтобы их активировать в файл functions.php надо вставить следующий код:


function add_more_buttons($buttons) {
 $buttons[] = 'fontselect'; // разные шрифты
 $buttons[] = 'fontsizeselect'; // размеры шрифтов
 $buttons[] = 'styleselect'; // стили
 $buttons[] = 'backcolor'; // цвет фона
 $buttons[] = 'sup'; // верхний индекс
 $buttons[] = 'sub'; // нижний индекс
 $buttons[] = 'anchor'; // якорь
 $buttons[] = 'hr'; // разделительная черта
 return $buttons; }
add_filter("mce_buttons_4", "add_more_buttons");

Вот что в итоге должно получиться:

knopki tinymce3

Возможно этот урок не из самых простых, но зато результат Вас порадует. Мы, без использования «тяжелых» плагинов, добавили свои кнопки в стандартный редактор WordPress, тем самым значительно расширив его функционал.

На сегодня у меня все. Как Вам статья?

С уважением, Виталий Кириллов

Статьи по теме:

Кнопка в редактор TinyMCE для ajax-ссылки
Добавление кнопок в html редактор WordPress