Текстовый редактор WordPress: как добавить пользовательский функционал?

Текстовый редактор WordPress: как добавить пользовательский функционал?

От автора: текстовый редактор является ключевым элементом WordPress. С его помощью в визуальном текстовом редакторе (WYSIWYG) можно создавать и управлять как текстом, так и изображениями и видеоматериалами.

В визуальном редакторе есть текстовый режим, с помощью которого можно вставлять или редактировать HTML код. Визуальный редактор в WordPress работает на WYSIWYG редакторе TinyMCE, он хорошо справляется, как и с отображением самого контента, так и с отображением кнопок своего интерфейса, как на картинке ниже:

Спасибо TinyMCE API и WordPress за то, что мы можем добавить свой собственный функционал во встроенный визуальный редактор. На самом деле мы научимся создавать и регистрировать собственные TinyMCE плагины, которые для работы с текстом будут использовать отдельный CSS класс.

Создание плагина TinyMCE

Создайте папку wp-content/plugins/tinymce-custom-class на сайте. Здесь будут храниться файлы нашего плагина. В этой папке создайте файл tinymce-custom-class.php и добавьте в него следующий код:

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

Метаданные в комментариях нужны для WordPress. В конструкторе мы будем регистрировать действия и фильтры.

WordPress TinyMCE фильтры

В TinyMCE есть два ключевых фильтра, с помощью которых можно зарегистрировать элемент в панели инструментов визуального редактора:

mce_external_plugins: используется для загрузки внешних плагинов TinyMCE mce_buttons: используется для добавления или удаления кнопок на панели инструментов TinyMCE

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

Теперь сделаем еще пару проверок, добавим функцию setup_tinymce_plugin:

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

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

Если мы прошли все проверки, то будут зарегистрированы два фильтра mce_external_plugins и mce_buttons. Первый предназначен для регистрации в TinyMCE файлов JS, которые будут взаимодействовать с визуальным редактором. Давайте вызовем этот фильтр внутри нашего класса:

Мы зарегистрировали файл JavaScript в массиве $plugin_array, в котором содержатся все JavaScript плагины для TinyMCE. Второй фильтр предназначен для регистрации кнопок. Точно так же добавим вызов фильтра:

Мы зарегистрировали программное имя для нашей кнопки (custom_class).

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

Создаем плагин JavaScript

При вызове фильтра mce_external_plugins мы ссылаемся на JS файл. Т.е. необходимо создать этот самый файл и написать его код. В коде будет указано, как отображать нашу кастомную кнопку, и что делать по клику на нее. В папке плагина создайте новый файл tinymce-custom-class.js со следующим кодом:

Данная функция выполняет следующие действия:

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

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

В конце с помощью функции addCommand наша команда регистрируется. При нажатии на кнопку будет всплывать модальное окно.

В папку плагина нужно добавить иконку кнопки icon.png:

Сохраните код и активируйте плагин в панели плагинов в WordPress. Затем создайте или отредактируйте существующие пост или страницу, и вы заметите вашу новую кнопку:

По клику на нее всплывет сообщение «Button clicked!»:

Задаем команду для запуска

Заменим alert на prompt, спросим у администратора, какой CSS класс необходимо добавить к выбранному тексту:

Этот код выполняет пару вполне понятных проверок: на выделенный текст, на то, ввел ли пользователь имя класса, и не отменил ли он свое действие.

Если проверки пройдены, запускается функция execCommand, которая оборачивает выделенный текст в тег span с введенным именем класса.

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

Заключение

Мы создали плагин для WordPress, который добавляет кнопки в визуальный редактор TinyMCE. В ходе создания мы ознакомились с фильтрами, которые используются для интеграции TinyMCE, а также написали JS код, который, собственно, и добавляет кнопку и выполняет все действия по клику на нее.

Загрузить все исходники можно на GitHub или по прямой ссылке.

Автор: Tim Carr

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Миша

    Это только в визуальный редактор вставляется кнопка? А в режиме html ее не будет видно?

  2. Vasilisk

    Интересно, но придётся повозиться

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree