Дополнительные кнопки в HTML редакторе (Quicktags API)

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

— Так ведь есть же плагин… (голос из зала) — Конечно есть: Post Editor Buttons Fork, к тому же он удобный и простой. Но ведь и тут все очень просто, плюс есть возможность прицепить свою JS функцию к созданной кнопке! Это ли не чудо? Но, по порядку…

JavaScript API функция

/**
 * Основная 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 />' );
 */

Параметры

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:

add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
function appthemes_add_quicktags() {
    if ( wp_script_is('quicktags') ){
?>
    <script type="text/javascript">
    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
    }
}

Заметка: Чтобы избежать ошибки мы проверяем используется ли скрипт quicktags:
wp_script_is('quicktags').

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

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

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

Заметка: К ID автоматически добавляется префикс: qt_content_

Еще пример

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

add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
function appthemes_add_quicktags() {
    if ( wp_script_is('quicktags') ){
?>
    <script type="text/javascript">
	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] перестала работать. Сегодня посидел, восстановил.

Источник: WP-КАМА (блог Тимура Камаева)