Главная » Вебмастеру » Более глубокое изучение текстового редактора WordPress

Более глубокое изучение текстового редактора 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 type="text/javascript">
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 type="text/javascript">
	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 под себя. И для этого необязательно обладать навыками программирования.

 

Данная публикация представляет собой перевод статьи «A Deeper Look Into the WordPress Text Editor» , подготовленной дружной командой проекта Интернет-технологии.ру

Источник

Интересные публикации по этой теме: