Использование редактора TinyMCE в WordPress [Guide]
Хотя они могут не знать его имени, каждый, кто использует WordPress, знаком с редактором TinyMCE. Это редактор, который вы используете, когда создаете или редактируете свой контент – тот, который имеет кнопки для создания полужирного текста, заголовков, выравнивания текста и т. Д. Это то, что мы рассмотрим в этом посте, и я покажу вам, как вы можете добавить функциональность и как вы можете использовать ее в своих плагинах.
Редактор построен на независимой от платформы системе Javascript, которая называется TinyMCE который используется в ряде проектов в Интернете. У него отличный API, к которому WordPress позволяет подключаться, чтобы создавать свои собственные кнопки и добавлять его в другие места в WordPress.
Читайте также: Как настроить стили редактора WordPress
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Добавление доступных кнопок
WordPress использует некоторые опции, доступные в TinyMCE, чтобы отключить определенные кнопки – такие как верхний индекс, нижний индекс и горизонтальные правила – для очистки интерфейса. Их можно добавить обратно без лишней суеты.
Первый шаг – создать плагин. Посмотрите на Кодекс WordPress о том, как это сделать. В двух словах, вы можете создать папку с именем «my-mce-plugin» в папке wp-content / plugins. Создайте файл с тем же именем и расширением PHP: my-mce-plugin.php.
Внутри этого файла вставьте следующее:
PHP / ** * Имя плагина: Мой плагин TinyMCE * Описание: плагин для добавления пользовательских функций в плагин WordPress TinyMCE. * /После этого вы сможете выбрать этот плагин в WordPress и активировать его. Весь код отныне можно вставить в этот файл.Итак, вернемся к включению некоторых встроенных, но скрытых кнопок. Вот код, который позволяет нам включить 3 кнопки, которые я упомянул:add_filter ('mce_buttons_2', 'my_tinymce_buttons'); function my_tinymce_buttons ($ buttons) { $ кнопки[] = 'верхний индекс'; $ кнопки[] = «индекс»; $ кнопки[] = час; кнопки возврата $; }
Чтобы узнать, какие кнопки можно добавить и как они называются, взгляните на список в Документация 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 для реализации нашей функциональности. Вот что я использовал, чтобы получить
andtags 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);
Это эквивалентно написанию следующего кода, что приведет к простой текстовой области:Вывод
Редактор TinyMCE - это удобный способ предоставления пользователям большей гибкости при вводе контента. Это позволяет тем, кто не хочет форматировать свой контент, просто набрать его и покончить с этим, а тем, кто хочет возиться с ним, тратить столько времени, сколько им нужно, чтобы получить его правильно.
Создание новых кнопок и функциональных возможностей может быть выполнено очень модульным способом, и мы только что поцарапали поверхность возможностей. Если вам известен особенно хороший плагин TinyMCE или сценарий использования, который вам очень помог, сообщите нам об этом в комментариях ниже!
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)