WordPress Quicktags API — дополнительные кнопки в HTML редакторе

С версии 3.3 разработчики WordPress улучшили HTML редактор, так у нас появилась возможность добавлять свои кнопки в него несколькими строками кода, называется все это коротко - Quicktags API. Иногда это бывает нужно, а порой даже очень!

Несмотря на то что есть не мало плагинов по этой теме, знать API надо, к тому же делается в нем все очень просто, плюс есть возможность прицепить свою JS функцию к созданной кнопке!

Quicktags API js функция

/**
 * Основная API функция для добавки кнопок к Quicktags
 *
 * Добавление qt.Button или qt.TagButton зависит от аргументов. Первые 3 обязательны.
 * Чтобы доавить кнопку, ваш скрипт должен идти после скрипта "quicktags"
 * и должен выводиться в footer. Если вы выводите JS из PHP, используйте хук
 * add_action( 'admin_print_footer_scripts', 'output_my_js', 100 )
 * или add_action( 'wp_footer', 'output_my_js', 100 )
 *
 * Минимальные требования для добавления кнопки с внешней функцией:
 *     QTags.addButton( 'my_id', 'my button', my_callback );
 *     function my_callback() { alert('yeah!'); }
 *
 * Минимальные требования для добавления кнопки, которая вставляет теги:
 *     QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
 *     QTags.addButton( 'my_id2', 'my button', '<br />' );
 */

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

id(строка) (обязательный)

ID кнопки. Атрибут id HTML тега input: <input id="">.

display(строка) (обязательный)

Название кнопки. Атрибут value HTML тега input: <input value="">.

arg1(строка) (обязательный)

Открывающий тег, который будет вставляться по нажатию, например: <span>. Или название функции, которая будет выполнена, при клике - callback функция.

arg2(строка)

Закрывающий тег, который будет вставляться по нажатию, например: </span>. Оставьте пустым, если тег не нужно закрывать, например: <hr />.

access_key(строка)

Короткий путь доступа к кнопке. Пишем какую-нибудь букву, например: s

title(строка)

Описание кнопки. Атрибут title HTML тега input: <input title="">.

priority(число)

Позиция кнопки среди других кнопок: 1-9 = первая, 11-19 = вторая, 21-29 = третья и т.д.

instance(строка)

Поместить кнопку в определенный экземпляр класса. Если ничего не указать, добавляется в общий экземпляр.

Примеры

С теорией покончили, перейдем к примерам!

Сейчас наш HTML редактор выглядит как картинка в начале поста.

Добавим к нему 3 кнопки с тегами: <h3>, <hr /> и <pre lang="php">. Для этого добавим следующий код в файл темы functions.php:

<?php
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags', 99 );
function appthemes_add_quicktags() {
	if ( ! wp_script_is('quicktags') )
		return;

	?>
	<script>
	document.addEventListener( 'DOMContentLoaded', function(){

		QTags.addButton( 'eg_h3', 'h3', '<h3>', '</h3>', 'h', 'Заголовок h3', 1 );
		QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Горизонтальная линия', 201 );
		QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', 'Подсветка PHP синтаксиса', 111 );
	} );
	</script>
	<?php
}
?>

Вот что получилось:

HTML код кнопок выглядит так:

<input type="button" id="qt_content_eg_h3" accesskey="h" class="ed_button" title="Заголовок h3" value="h3">

Еще пример

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

<?php
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
function appthemes_add_quicktags() {
	if ( wp_script_is('quicktags') ){
	?>
	<script>
		QTags.addButton( 'my_id', 'my button', my_callback );
		function my_callback() { alert('Ура!'); }
	</script>
	<?php
	}
}

Обновив страницу мы увидим новую кнопку "my button", кликнув на которую выскочит сообщение: 'Ура!'.

Кнопки по умолчанию

Это список значений кнопок добавленных по умолчанию WordPress. Accesskey и ID должны быть всегда уникальны, поэтому при добавлении своих кнопок не используйте эти значения:

Удаление кнопок из HTML редактора WordPress

Если нужно удалить базовые кнопки из HTML редактора, то можно использовать хук: quicktags_settings, на который прицепить свою функцию и переопределить кнопки по-умолчанию, оставив там только нужные вам.

Базовые кнопки расположены в строке strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen. Давайте удалим из них: del,ins,more,close, я ими не пользуюсь:

// удаляем ненужные кнопки
add_filter('quicktags_settings', 'set_buttons_for_html_editor');
function set_buttons_for_html_editor( $buttons ) {
	$buttons['buttons'] = 'strong,em,link,block,img,ul,ol,li,code,fullscreen';
	return $buttons;
	// default: $buttons['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen';
}

Плагины

Kama Quicktags

Писал когда-то статью (моя первая статья на этом блоге) про добавление кнопки в HTML редактор. Кнопка преобразовывает код в читабельный для HTML вид: символы < и > меняются на соответствующие им сущности: < и > и в результате вставленный в статью код с тегами будет отображаться как нужно. Со временем сделанная мной для этого кнопка: Код в HTML перестала работать. Сегодня посидел, восстановил.

Плагин для добавление кнопок в HTML редактор WordPress с кнопкой преобразования кода в подходящий для HTML вид:

Kama Quicktags V2.2

Преобразовывает спецсимволы и добавляет кнопки в HTML редактор.

Скачано: 771, размер: 1.7 KB

Post Editor Buttons Fork

Подробнее о плагине смотрите в каталоге WordPress.