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

Введение

Визуальный редактор TinyMCE позволяет наполнять сайт создавая записи и страницы. Помимо редактирования текста TinyMCE также позволяет добавлять таблицы, списки, изображение и т.п. К сожалению, стандартный TinyMCE все же сильно ограничен в возможностях форматирования данных. Решить эту проблему можно установив плагин TinyMCE Advanced, расширяющий функционал редактора. Однако иногда возникают ситуации когда необходимо специфическое форматирование, которого хотелось бы добиться с помощью одной кнопки на панели редактора, не форматируя текст вручную через HTML.

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

Самым простым способом добавить свои стили форматирования в TinyMCE это создание списка форматов. Каждый элемент из списка будет зависеть от стилей, которые прописаны в специальном CSS-файле editor-style.css.

Создадим файл editor-style.css в корне темы и наполним его стилями, которые будут отображаться в окне редактора при форматировании.

Не забудьте указать эти же стили и в файле style.css, иначе на сайте они не отобразятся.

Далее в файле functions.php определим элементы, из которых будет состоять список форматов.

Теперь зайдите в редактор TinyMCE и вы увидите кнопку выпадающего списка - "Форматы", в котором будут определенные ранее стили форматирования.

Форматы в TinyMCE
Форматы на панели инструментов TinyMCE

Если вы используете плагин TinyMCE Advanced, то по умолчанию в форматах будут отображаться его элементы. Чтобы вернуть свои форматы вам нужно отметить галочку в поле "Создание меню классов CSS" в настройках плагина.

Создание собственных кнопок в TinyMCE

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

Для начала создадим в корне темы файл /js/tinymce-buttons.js, в котором будем описывать необходимый функционал кнопок.

Для примера, в файле опишем функционал кнопок для добавления ссылки на github и обертку из тега <figure> для изображений.

Теперь оповестим TinyMCE о наличии дополнительных кнопок. Зарегистрируйте все кнопки в конце файла functions.php.

Теперь обновите страницу (Ctrl+F5) с редактором и вы увидите новые кнопки на панели инструментов.

Собственные кнопки на панели инструментов редактора TinyMCE
Кастомные кнопки на панели инструментов TinyMCE