Более глубокое изучение текстового редактора WordPress

Статья целиком посвящена нативному редактору WordPress. Сперва мы рассмотрим Quicktags JS API, фильтр quicktags_settings и возможность wp_editor().

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

Более глубокое изучение текстового редактора WordPress

Текстовый редактор WordPress

На панели инструментов текстового режима редактора есть набор кнопок(квиктегов), которые могут быстро добавлять большое число тегов в HTML-структуру.

По умолчанию, в WordPress доступны следующие квиктеги:

  • a;
  • strong;
  • code;
  • del;
  • em;
  • ol;
  • ul;
  • li;
  • img;
  • blockquote;
  • ins;
  • fullscreen;
  • lookup;
Более глубокое изучение текстового редактора WordPress

Кнопки, используемые по умолчанию в текстовом редакторе WordPress

Quicktags API – это JavaScript API, который предлагает простой метод добавления кнопок.

Способ QTags.addButton добавляет кнопку в панель инструментов. Он определяется следующим образом:

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance);

Этот способ принимает следующие настройки:

  • id(string)(обязательный) — уникальный HTML-идентификатор для кнопки;
  • display(string)(обязательный) — значение атрибута value;
  • arg1(string)(обязательный) — открывающий тег или название callback-функции, которая запускается при нажатии на кнопку;
  • arg2(string)(необязательный) закрывающий тег;
  • access_key(string)(необязательный) — клавиатурный квиктег кнопки;
  • title(string)(необязательный) — заголовок кнопки;
  • priority(int)(необязательный) — номер, который указывает порядок кнопок на панели инструментов;
  • instance(string)(необязательный) ограничивает кнопку конкретными квиктегами.

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

<pre><code class="language-php"></code></pre><pre><code class="language-css"></code></pre><pre><code class="language-html"></code></pre>

Для этого задания надо добавить следующий код в главный файл плагина:

function my_quicktags() {if( wp_script_is( 'quicktags')) {?><script>QTags.addButton( 'eg_php', 'PHP', '<pre><code class="language-php">', '</code></pre>', 'p', 'PHP Code', 100);QTags.addButton( 'eg_css', 'CSS', '<pre><code class="language-css">', '</code></pre>', 'q', 'CSS Code', 100);QTags.addButton( 'eg_html', 'HTML', '<pre><code class="language-html">', '</code></pre>', 'r', 'HTML Code', 100);</script><?php}}add_action( 'admin_print_footer_scripts', 'my_quicktags');

admin_print_footer_scripts — это хук-событие может отображать любой текст в футере панели администрирования. Callback-функция проверяет, используется ли скрипт квиктега, а далее отображает JS-код.

Скрипт добавляет ещё три кнопки экземпляру Quicktags в панели администрирования:

Более глубокое изучение текстового редактора WordPress

Но при помощи Quicktags API можно сделать намного больше. Например, можно без труда передать способу QTags.addButton callback-функцию, которая запускается, когда посетитель нажимает на соответствующую кнопку. Рассмотрим следующий программный код:

function custom_quicktags() {if( wp_script_is( 'quicktags')) {?><script>QTags.addButton( 'eg_callback', 'CSS div', css_callback);function css_callback(){var css_class = prompt( 'Class name:', '' );if ( css_class && css_class !== '' ) {QTags.insertContent('<div class="' + css_class +'"></div>');}}</script><?php}}add_action( 'admin_print_footer_scripts', 'custom_quicktags' );

css_callback – это JavaScript-функция, которая запускается, когда посетитель нажимает кнопку. В нашем примере она запрашивает имя класса для div .

Способ QTags.insertContent выведет указанную строку в текстовое поле ввода редактора.

Более глубокое изучение текстового редактора WordPress

Мы добавляли квиктеги в редактор WordPress при помощи события admin_print_footer_scripts.

Базовые параметра квиктегов

Quicktags API предлагает функция добавлять новые кнопки на панель инструментов текстового редактора. Средства WordPress может убирать кнопки при помощи фильтра quicktags_settings.

function my_quicktags( $qtInit, $editor_id = 'content' ) {$qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';return $qtInit;}add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );

Callback-функция принимает два аргумента:

  • $qtInit – массив параметров.
  • $editor_id –уникальный идентификатор редактора.

В нашем примере $ editor_id по умолчанию имеет в себя значение ‘content’. Он будет идентификатором поля ввода textarea при редактировании публикаций.

Обратите внимание о, что имена тегов в списке квиктегов разделяются запятыми, а не пробелами.

Эта функцию может быть использована для удаления всех кнопок с панели инструментов:

function my_quicktags( $qtInit, $editor_id = 'content' ) {$qtInit['buttons'] = ',';return $qtInit;}add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );

Мы назначили запятую в виде значения для элемента ‘buttons’ массива $qtInit . Пустая строка не будет работать, и параметра по умолчанию не будут переопределены.

Параметр редактора WordPress на главной странице

Функцию wp_editor может отобразить редактор в любом месте веб-сайта. Она определяется в файле wp-includes/general-template.php следующим образом:

wp_editor( $content, $editor_id, $settings = array() );
  • $content (string) (обязательный) заранее установленный текст в поле ввода формы;
  • $editor_id (string) (обязательный) идентификатор для полей ввода textarea и TinyMCE (может содержать только строчные буквы и подчеркивания);
  • $settings (array) (необязательный) массив аргументов.

Массив аргументов может установить несколько настроек конфигурации редактора. Полный список аргументов в кодексе WordPress.

К примеру, можно отобразить редактор в шаблоне страницы. Рассмотрим следующий пример:

$content = '';$editor_id = 'mycustomeditor';$settings = array( 'wpautop' => false, 'media_buttons' => false, 'quicktags' => array('buttons' => 'strong,em,del,ul,ol,li,block,close'),);wp_editor( $content, $editor_id, $settings );

Приведенный выше код отображает пустой редактор с идентификатором ‘ myeditor ’ с указанными кнопками на панель инструментов.

  • Аргумент wpautop имеет в себя значение false, так что элементы p будут использоваться для установки абзацев;
  • Аргумент media_buttons имеет в себя значение false, так что посетитель не сможет загружать мультимедийные файлы;
  • Массив quicktags определяет кнопки для выведения на панели инструментов текстового редактора.

Основное различие между функцией wp_editor() и фильтром quicktags_settings заключается в том, что функцию применяется к конкретному экземпляру редактора. А также используется для параметра новых экземпляров редакторов в любом месте. Хук quicktags_settings фильтрует все существующие экземпляры и не может использоваться для создания новых.

Полный код приведенных выше примеров доступен на Gist .

Улучшение текстового редактора WordPress при помощи плагина AddQuicktag

AddQuicktag – это плагин, который может добавлять кнопки в текстовый редактор WordPress.

Более глубокое изучение текстового редактора WordPress

Он предлагает страницу настроек, доступную из меню «Параметра». На ней можно добавлять и удалять существующие кнопки в редакторе.

AddQuicktag может настраивать редактор специально для публикаций, страниц и иных текстовых областей.

Плагин также добавляет Quicktags в визуальный редактор. Выберите опцию «Visual», и визуальный редактор покажет выпадающее меню Quicktags, на котором расположены все кнопки.

Второй раздел настроек предназначен для параметра встроенных квиктегов.

Более глубокое изучение текстового редактора WordPress

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

Более глубокое изучение текстового редактора WordPress

Заключение

Сейчас вы сможете легко изменить панель инструментов текстового редактора WordPress под себя. И для этого необязательно обладать навыками программирования.

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

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