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

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

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

Читайте также: Как настроить стили редактора WordPress

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

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

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

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

Чтобы узнать, какие кнопки можно добавить и как они называются, взгляните на список в Документация TinyMCE для элементов управления,

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

Как насчет создания наших собственных кнопок с нуля? Многие сайты используют призма для выделения кода, который использует очень семантический подход к разметке сегментов кода. Вы должны обернуть свой код в а также

 tags, something like this:
$variable = 'value'
Давайте создадим кнопку, которая сделает это за нас!
Это трехступенчатый процесс. Вам нужно будет добавить кнопку, загрузить файл javascript и фактически записать содержимое файла Javascript. Давайте начнем!
Добавление кнопки и загрузка файла Javascript довольно просты, вот код, который я использовал для этого:
add_filter ('mce_buttons', 'pre_code_add_button');

function pre_code_add_button ($ 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 для реализации нашей функциональности. Вот что я использовал, чтобы получить
 and  tags output all at once.

(function() {
    tinymce.PluginManager.add('pre_code_button', function( editor, url ) {
        editor.addButton( 'pre_code_button', {
            text: 'Prism',
            icon: false,
            onclick: function() {
            var selected = tinyMCE.activeEditor.selection.getContent();
            var content = '
' + selected + '
«;

editor.insertContent (content + " n");

}

});

});

}) ();
Большая часть этого продиктована тем, как плагин TinyMCE должен быть закодирован, вы можете найти некоторую информацию об этом в Документация TinyMCE, Пока все, что вам нужно знать, это то, что имя вашей кнопки (pre_code_button) должно использоваться в строках 2 и 3. Значение «text» в строке 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, замените «false» на класс, который вы хотели бы иметь в своей кнопке - я использовал pre_code_button.
Теперь создайте файл style.css в каталоге плагинов и добавьте следующий CSS:
i.mce-i-pre_code_button: before {

семейство шрифтов: dashicons;

содержание: " f475";

}
  
  
Обратите внимание, что кнопка получит mce-i-[your class here] класс, который вы можете использовать для нацеливания и добавления стилей. Укажите шрифт в виде дашиконов, а содержимое - с использованием значения Юникода из предыдущего.
Использование 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 или сценарий использования, который вам очень помог, сообщите нам об этом в комментариях ниже!
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)