WordPress TinyMCE. Как добавить свою кнопку в редактор WordPress.

4
867

WordPress версии 3.9 устанавливается с последней версией редактора TinyMCE 4.0 . Это обновление принесло большие изменения в API редактора TinyMCE и благодаря этому появилось много интересных возможностей, которыми мы сейчас научимся пользоваться.

TinyMCE в WordPress

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

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

Гайд лист

  1. Создадим первую кнопку в TinyMCE
  2. Создание кнопки с текстом
  3. Создание кнопки с стандартной иконкой
  4. Создаем кнопку с собственной иконкой из Dashicons
  5. Кнопка с вашей собственной картинкой или иконкой
  6. Кнопка с подменю
  7. Создадим несколько уровней подменю в кнопке
  8. Вызов диалогового окна при нажатии на кнопку
  9. Расширенные возможности диалогового окна

Создание кнопок в редакторе TinyMCE WordPress. Часть 1.

Создадим первую кнопку в TinyMCE

Начнем с основ, первым делом для того, чтобы делать изменения в административной панели WordPress, необходимо проверить пользовательские права, для этого мы запустим хук (hook) в admin_head часть. Открываем файл functions.php вашей темы и пишем:

А вот сама функция ex_add_my_first_button(), которую мы инициализируем через вышеприведенный хук:

Как вы могли заметить, данная функция выполняет несколько важных операций. Во-первых, она проверяет права доступа, во-вторых, она проверяет пользовательские настройки и тип поста. Если все условия соблюдены, тогда срабатывают два фильтра: ex_add_tinymce_plugin и ex_register_my_first_button.

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

Не забудьте создать файл в директории с вашей темой, я назвал его btn.js:

Второй фильтр используется для добавления кнопок в редакторе, в данном случае мы добавили одну кнопку:

Создание кнопки с текстом

Теперь мы можем написать код, который добавить саму кнопку в редактор WordPress, следующий код мы помещаем в файл btn.js (который мы указали в функции ex_add_tinymce_plugin). При нажатии на данную кнопку в редактор добавиться текст «Hello World!»:


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

Как добавить свою кнопку в WordPress редакторе

Создание кнопки с стандартной иконкой

Давайте попробуем изменить внешний вид нашей кнопки и привести её в соответствие с внешним видом других кнопок редактора TinyMCE. Для этого мы воспользуемся стандартным набором шрифтовых WordPress иконок — Dashicons.

Просто измените код в файле btn.js следующим образом:

Было произведено два изменения:

  1. Свойство отображение текста теперь стало атрибутом title (который создает подсказку при наведении на кнопку).
  2. Мы установили иконку из стандартного набора, видимо, чтобы использовать свою собственную иконку требуется вмешательство через CSS.


В результате данных изменений результат выглядит так:

Создание кнопки с иконкой в редакторе вордпресс

Создаем кнопку с собственной иконкой из Dashicons

Предположим, что мы не довольны стандартным набором иконок и хотим собственную из наборы Dashicons, например кнопку с значком логотипа WordPress’а.

К счастью, решение довольно просто — нам нужно прикрепить дополнительный код CSS, который имеет следующую структуру.

Создайте в директории с вашей темой файл btn.css и добавьте в него этот код:

Теперь подключим данный файл через файл functions.php:

Приведенный выше код позволит нам использовать любой класс из dashicons- *. Кому любопытно — мы должны были указать класс mce-i-icon, потому что название класса автоматически добавляется к названию класса. Теперь мы должны изменить код JavaScript следующим образом:

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

Создание кнопки с иконкой в редакторе вордпресс

Список классов иконок Dashicons доступна на этой странице — всё, что вам нужно сделать, это нажать на выбранной иконке и вы увидите название класса данной иконки.

Кнопка с вашей собственной картинкой или иконкой

Возможно Dashicons не отвечает всем требованиям и нам необходимо использовать свою собственную картинку или иконку в редакторе WordPress. Для этого нужно создать такую картинку и описать её в файле CSS, который мы подключили ранее. Я буду использовать иконку социальной сети вконтакте, которая имеет размер 40×40 пикселей (разместите вашу иконку или картинку в директории с вашей темой):

Немного изменим наш Javascript код:


Мы получили своё, теперь наша иконка выглядит так, как нам и нужно:

Своя кнопка в редакторе WordPress

Добавим подменю к кнопке

В настоящий момент наша кнопка выглядит замечательно, но её не хватает должного функционала. К счастью, мы можем легко добавить нужный функционал, достаточно немного изменить наш javascript код:

Заметьте, мы изменили тип кнопки на menubutton, благодаря этому, мы можем использовать дополнительные свойства и создавать подменю. Элементы подменю имеют два основных значения — text и value. Я думаю вы догадались, что за что отвечает.

Посмотрим, на результат:

Подменю на кнопке в редакторе WordPress

Создадим несколько уровней подменю в кнопке

Для создания несколько уровней подменю нужно немного расширить существующее меню, укажем несколько элементов:

Кнопка выглядит намного лучше:

Подменю на кнопке в редакторе WordPress

Добавим всплывающее окно (модальное окно) при нажатии

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

Для реализации нам необходимо просто добавить нужный onclick обработчик:

Так выглядит весь мой код:

Теперь, при нажатии всплывает диалоговое окно, где мы можем ввести заголовок:

Кнопка с всплывающим окном в Tinymce WordPress

Расширим возможности диалогового окна

Сделаем что-то поинтереснее, например:

Кнопка с всплывающим окном в Tinymce WordPress

Для этого, воспользуйтесь следующим кодом:

Заключение

Это была первая статья, где мы познакомились с основными возможностями WordPress редактора TinyMCE. Теперь вы можете создавать свои собственные кнопки и добавлять им необходимый функционал, а также задавать кнопкам нужный внешний вид с помощью иконок, картинок или просто текстовых элементов. Возможности данного редактора не ограничены и они могут быть расширены под любые нужды. Часто при создании плагинов для WordPress необходимо добавить взаимодействие с редактором, например, при создании слайдера и галереи изображений.

Следующая статья раскроет перед Вами еще больше возможностей редактора TinyMCE и его API. Если у Вас возникли какие-либо вопросы или возникли проблемы, вы можете задать свой вопрос в комментариях или в группе вконтакте. Спасибо за внимание, рад был помочь!

4 КОММЕНТАРИИ

  1. Отличный пост, спасибо. но вот не хватает обработки выделенного текста. без модального окна.
    Как сделать что бы html-тегами (напр divом) можно было выделенный текст?

    И, кстати, в модальном окне мне кажется надо писать угловые скобки, а не их html-сущности. Иначе они не будут работать как html, а будут просто отражаться. Или это для этого и есть?

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя