Использование редактора TinyMCE в WordPress [Руководство]

Хотя они могут не знать его имени, каждый, кто использует WordPress, знаком с Редактор TinyMCE. Это редактор, который вы используете, когда создаете или редактируете свой контент - тот, что содержит кнопки для создания полужирного текста, заголовков, выравнивания текста и т. Д. Это то, что мы рассмотрим в этом посте, и я собираюсь показать вам, как вы можете добавить функциональность а также как вы можете использовать его в своих плагинах.

Редактор построен на независимой от платформы системе Javascript под названием TinyMCE, которая используется в ряде проектов в Интернете. У него отличный API, к которому WordPress позволяет подключаться, чтобы создавать свои собственные кнопки и добавлять его в другие места в WordPress..

Добавление доступных кнопок

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

Первый шаг - создать плагин. Посмотрите на кодекс WordPress о том, как это сделать. В двух словах, вы можете обойтись созданием папки my-mce-plugin в папке wp-content / plugins. Создайте файл с тем же именем и расширением PHP: мой-MCE-plugin.php.

Внутри этого файла вставьте следующее:

  
После этого вы сможете выбрать этот плагин в WordPress и активировать его. Весь код отныне можно вставить в этот файл.
 
Итак, вернемся к включение некоторых встроенных, но скрытых кнопок. Вот код, который позволяет нам включить 3 кнопки, которые я упомянул:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); function my_tinymce_buttons ($ buttons) $ buttons [] = 'верхний индекс'; $ buttons [] = 'индекс "; $ buttons [] = час; кнопки возврата $;  
 
 
 
Чтобы узнать, какие кнопки можно добавить и как они называются, взгляните на список элементов управления в документации TinyMCE..
 
Создание наших собственных кнопок
 
Как насчет создания наших собственных кнопок с нуля? Многие веб-сайты используют Prism для выделения кода, который использует очень семантический подход к разметке сегментов кода. Вы должны обернуть свой код в  а также 
 теги, что-то вроде этого:
 
$ variable = 'value'
 
Давайте создадим кнопку, которая сделает это для нас!
 
Это трехступенчатый процесс. Вам нужно будет добавить кнопку, загрузить файл javascript и фактически записать содержимое файла Javascript. Давайте начнем!
 
Добавление кнопки и загрузка файла Javascript довольно просты, вот код, который я использовал для этого:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); function pre_code_add_button ($ buttons) $ buttons [] = 'pre_code_button'; кнопки возврата $;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); function pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/Tinymce-plugin.js'; return $ plugin_array;  
 
Когда я вижу учебники об этом, я часто вижу 2 проблемы.
 
Они забывают упомянуть, что имя кнопки, добавленное в функцию pre_code_add_button (), должно совпадать с ключом для переменной $ plugin_array в функции pre_code_add_javascript (). Нам также нужно будет использовать ту же строку в нашем Javascript позже.
 
Некоторые уроки также используйте дополнительный крюк admin_head, чтобы обернуть все. Хотя это будет работать, это не требуется, и поскольку Кодекс не использует его, его, вероятно, следует избегать.
 
Следующим шагом является написание некоторого Javascript для реализации нашей функциональности. Вот что я использовал, чтобы получить 
 а также  выводить теги сразу.
 
 (function () tinymce.PluginManager.add ('pre_code_button', function (editor, url) editor.addButton ('pre_code_button', text: 'Prism', значок: false, onclick: function () var selected = = tinyMCE.activeEditor.selection.getContent (); var content = '
'+ выбранный +'
«; editor.insertContent (content + "\ n"); ); ); ) (); 
 
Большая часть этого продиктована тем, как плагин TinyMCE должен быть закодирован, вы можете найти некоторую информацию об этом в документации TinyMCE. Пока все, что вам нужно знать, это то, что название вашей кнопки (Pre_code_button) следует использовать в строках 2 и 3. Значение «текст» в строке 4 будет отображаться, если вы не используете значок (мы рассмотрим добавление иконок в ближайшее время).
 
Метод onclick определяет, что делает эта кнопка при нажатии. Я хочу использовать его, чтобы обернуть выделенный текст в структуру HTML, обсужденную ранее.
 
Выделенный текст может быть захвачен с помощью tinyMCE.activeEditor.selection.getContent (). Затем я обертываю элементы вокруг него и вставляю его, заменяя выделенный контент новым элементом. Я также добавил новую строку, чтобы я мог легко начать писать после элемента кода.
 
Если вы хотите использовать значок, я предлагаю выбрать один из набора Dashicons, который поставляется с WordPress. Справочник разработчика содержит отличный инструмент для поиска значков и их CSS / HTML / Glyph. Найдите символ кода и запишите Юникод под ним: f475.
 
Нам нужно будет прикрепить таблицу стилей к нашему плагину, а затем добавить простой стиль для отображения нашего значка. Для начала давайте добавим наш стиль в WordPress:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); function pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Вернитесь к Javascript и рядом со значком в функции addButton замените “ложный” с классом вы хотели бы, чтобы ваша кнопка была - я использовал pre_code_button.
 
Теперь создайте файл style.css в каталоге плагинов и добавьте следующий CSS:
 
 i.mce-i-pre_code_button: before font-family: dashicons; содержание: "\ f475";  
 
 
 
Обратите внимание, что кнопка получит mce-i- [ваш класс здесь] класс, который вы можете использовать для нацеливания и добавления стилей. Укажите шрифт в виде дашиконов, а содержимое - в значении Юникод из предыдущего.
 
Использование TinyMCE в другом месте
 
Плагины часто создают текстовые области для ввода более длинного текста, не было бы здорово, если бы мы могли использовать TinyMCE там же? Конечно, мы можем, и это довольно легко. Функция wp_editor () позволяет нам выводить ее в любом месте администратора, вот как это выглядит:
 
wp_editor ($ initial_content, $ element_id, $ settings);
 
Первый параметр устанавливает начальный контент для коробки. Это может быть использовано, например, для загрузки опции из базы данных. Второй параметр устанавливает идентификатор элемента HTML. Третий параметр - это массив настроек. Чтобы узнать о точных настройках, которые вы можете использовать, взгляните на документацию wp-редактора..
 
Наиболее важным параметром является textarea_name. Это заполняет атрибут name элемента textarea, позволяя вам легко сохранять данные. Вот как выглядит мой редактор при использовании на странице настроек:
 
$ settings = array ('textarea_name' => 'customer_bio');
 
wp_editor (get_option ('customer_bio'), 'customer_bio', $ settings);
 
Это эквивалентно написанию следующего кода, что приведет к простой текстовой области:
 
<?php get_option( 'buyer_bio' ) ?>
 
Заключение
 
Редактор TinyMCE - это удобный способ предоставления пользователям большей гибкости при вводе контента. Это позволяет тем, кто не хочет форматировать свой контент, просто напечатать его и покончить с этим, а тем, кто хочет возиться с ним, тратить столько времени, сколько им нужно, чтобы получить его правильно..
 
Создание новых кнопок и функциональных возможностей может быть выполнено очень модульным способом, и мы только что поцарапали поверхность возможностей. Если вам известен особенно хороший плагин TinyMCE или сценарий использования, который вам очень помог, сообщите нам об этом в комментариях ниже.!