SEO Маяк

Всем привет! Сегодня на seo-mayak.com мы продолжим тему текстового редактора WordPress и разберем на винтики функцию wp_editor().

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

Стоит сказать, что есть плагины, которые выводят TinyMCE или Quicktags в форму комментирования, такие как: CKEditor for WordPress, WP Comment Quicktags Plus и другие, но в этой статье мы их разбирать не будем.

Но зачем нам плагин, когда можно обойтись без него, благо в WordPress с версии 3.3 появилась функция wp_editor(), с помощью которой можно вывести текстовый редактор в любом месте сайта, в том числе и в форме комментирования.

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

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

В общем читайте статью до конца, будет интересно. Поехали!

Функция wp_editor()

С помощью функции wp_editor() можно вывести на экран поле формы textarea с визуальным редактором TinyMCE и HTML редактором Quicktags (можно на выбор).

Текстовое поле можно вывести, как в шаблоне, так и в виде дополнительного редактора в админке на страницах типа: запись, постоянная страница, а также на страницах редактирования категорий и меток.

А сейчас давайте познакомимся с параметрами, которые может принимать функция.

wp_editor($content, $editor_id, $settings = array());

$content (строка)

Текст, который будет установлен в текстовое поле.

По умолчанию: нет.

$editor_id (строка)

Идентификатор текстового поля textarea, к которому будет привязываться редактор. Допускаются только буквы в нижнем регистре и символ подчеркивания (использование тире недопустимо!). Например textareaid или textarea_id.

По умолчанию: нет.

$settings (массив)

Массив аргументов (полный перечень смотрите ниже).

По умолчанию: array().

Все аргументы массива $settings

Массив $settings может принимать следующие аргументы:

$settings = array(
	'wpautop' => 1,
	'media_buttons' => 1,
	'textarea_name' => '', // Значение name
	'textarea_rows' => 20,
	'tabindex'      => null,
	'editor_css'    => '',
	'editor_class'  => '',
	'teeny'         => 0,
	'dfw'           => 0,
	'tinymce'       => 1,
	'quicktags'     => 1,
	'drag_drop_upload' => false
);

Данные аргументы массива ничто иное, как настройки редактора, которые мы сейчас подробно разберем.

wpautop (логическое)

Применять ли функцию wpautop().

'wpautop' => 1,

1 или (true) — применять;
0 или (false) — не применять.

На заметку! Функция wpautop() добавляет html теги параграфа (<p></p>) и переноса строки (<br />).

По умолчанию: 1 (true).

media_buttons (логическое)

'media_buttons' => 1,

Значение данного аргумента определяет показывать или не показывать кнопку загрузки медиафайлов:

1 или (true) — выводит кнопку;
0 или (false) — не выводить.

По умолчанию: 1 (true).

textarea_name (строка)

Суда вписывается значение атрибута name поля textarea, к которому привязывается редактор. Например у поля textarea формы комментариев значением name является comment.

'textarea_name' => 'comment', 

По умолчанию: $editor_id.

textarea_rows (число)

Указывается количество строк rows, определяющее высоту текстового поля редактора. Например, значение rows текстового поля комментариев равно 10 (rows="10").

'textarea_rows' => 10,

Конечно, можно указать любое число.

По умолчанию: get_option(‘default_post_edit_rows’, 10), берется из настроек админки.

tabindex (число)

Значение атрибута tabindex у поля textarea.

На заметку! Атрибут tabindex задает порядок отображения полей формы начиная с единицы. Поле со значением tabindex="1" будет отображаться выше, чем поле со значением tabindex="2". У текстового поля формы комментирования tabindex равен 4.

'tabindex' => 4,

Данный атрибут не является обязательным.

По умолчанию: нет.

editor_css (строка)

В качестве значения можно задать дополнительные CSS стили, которые будут выведены прямо перед формой. Стили необходимо заключать в HTML теги <style></style>. Например:

'editor_css'=>'<style>.my_class{margin-top:10px;}</style>',

В исходном коде это будет выглядеть так:

По умолчанию: нет.

editor_class (строка)

Здесь можно задать дополнительные CSS классы к полю textarea. Например:

'editor_class' => 'my_class',

Исходный код:

По умолчанию: нет.

teeny (логическое)

Данные аргумент определяет какую версию редактора выводить на экран

1 или true — вывести урезанный набор кнопок:

0 или false — вывести все кнопки:

По умолчанию: false.

dfw (логическое)

Надо ли заменять полноэкранный режим по умолчанию на DFW (нужны специальные DOM элементы и CSS).

По умолчанию: false.

tinymce (логическое / массив)

Выводить визуальный редактор TinyMCE или нет.

0 — не выводить;
1 — вывести.

Если для визуального редактора были созданы дополнительные кнопки, то они тоже будут включены:

Если в аргументе tinymce используется значение 1 или true, то массив кнопок берется из файла /wp-includes/class-wp-editor.php.

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

$set_of_buttons = add_filter('mce_buttons', create_function('' , "return array(
'bold', 
'italic', 
'underline', 
'blockquote', 
'strikethrough', 
'bullist', 
'numlist', 
'alignleft', 
'aligncenter', 
'alignright', 
'undo', 
'redo', 
'link', 
'unlink', 
'fullscreen'
);" 
));

'tinymce'=> $set_of_buttons,

Кнопке будут выведены в той же очередности, что и в массиве. Если убрать какую либо кнопку из массива, то она не будет отображаться в редакторе.

Таким же образом можно перебрать массив кнопок второго ряда:

$set_of_buttons = add_filter('mce_buttons_2', create_function('' , "return array(
'formatselect', 
'underline', 
'alignjustify', 
'forecolor', 
'pastetext', 
'removeformat', 
'charmap', 
'outdent', 
'indent', 
'undo', 
'redo'
);" 
));

На примерах видно, что массивы пропускаются через фильтры: mce_buttons (первый ряд), mce_buttons_2 (второй ряд) и т.д.

Если оставить пустой массив, например:

$set_of_buttons = add_filter('mce_buttons', create_function('' , "return array();" ));

То будет выведен вот такой интересный набор кнопок:

По умолчанию: 1.

quicktags (логическое / массив)

Выводить HTML редактор Quicktags или нет.

0 — не выводить;
1 — вывести.

Также можно задать свой массив кнопок, например:

'quicktags'=> array('buttons' => 'strong,em,ul,ol,li,code,close'),

Вот что у меня получилось:

По умолчанию: 1.

drag_drop_upload (логическое)

Включает поддержку Drag-and-Drop, что позволяет загружать файлы через редактор с помощью обычного перетаскивания.

По умолчанию: false.

Как вывести текстовый редактор в комментариях

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

На самом деле сложного ничего нет и сейчас вы в этом сами убедитесь.

Давайте напишем функцию, которая и займется выводом редактора в комментарии и еще раз повторим вышеизложенный материал. Приступим!

В файле functions.php, что находится в папке с темой, создадим новую функцию:

function mayak_editor_comments(){ 
//тут будет сценарий
}

В данный скелет вставляем сценарий на основе функции wp_editor() с нужным набором аргументов. Для примера я взял следующий сценарий:

function mayak_editor_comments(){ 
$settings = array(
  'media_buttons'=>0,
  'textarea_name'=>'comment',
  'quicktags'=>0,
  'teeny'=>0,
  'tinymce'=> 1,
  'textarea_rows'=>10,
);
$aut = wp_editor('', 'comment', $settings);
return $aut;
}

Теперь идем в файл comments.php и ищем код вывода текстового поля:

<textarea id="comment" class="textarea" name="comment" cols="100" rows="10" tabindex="4"></textarea>

Вместо этой строчки вставляем код вызова нашей функции:

<?php mayak_editor_comments(); ?>

Если Вы все сделали правильно, то вместо текстового поля, куда пользователи вписывали свои комментарии, появится полноценный визуальный редактор TinyMce вместе с html редактором WordPress, с таким же набором кнопок, как в админке.

Кстати, редакторы, выводимые плагинами также не работают при перемещении. Почему это происходит?

Это происходит из-за того, что для тестового поля, TinyMce создает отдельный html документ с помощью тегов <iframe></iframe>, со своей областью <head></head>, в которой подключаются необходимые для работы редактора скрипты:

А при перемещении формы, подключение скриптов теряется:

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

В отличии от TinyMce, HTML редактор Quicktags не требует создания отдельно HTML документа и подключения дополнительных скриптов:

А текстовое поле выводиться с помощью стандартных тегов <textarea></textarea>, поэтому Quicktags прекрасно работает хоть в статическом состоянии хоть в динамическом.

Теперь давайте выведем только html редактор, без TinyMce (раз он не работает в полной мере) и зададим ему набор кнопок.

function mayak_editor_comments(){ 
$settings = array(
  'media_buttons'=>0,
  'textarea_name'=>'comment',
  'quicktags'=>array('buttons' => 'strong,em,ul,ol,li,code,close'),
  'teeny'=>0,
  'tinymce'=>0,
  'textarea_rows'=>10,
);
wp_editor('', 'comment', $settings);
}

Вот что в итоге получится:

Набор кнопок задается в строчке №5. Названия кнопок пишутся через запятую без пробелов.

Я пока не понял, как добавить свои кнопки в HTML редактор, создание которых я описывал тут, но как только я решу данную задачу, обязательно дополню статью.

Добавление второго редактора в админку на страницу редактирования записи

Интересное решение я увидел на сайте Миши Рудастых truemisha.ru, которое позволяет добавить второй редактор в админку на страницу редактирования записи.

function true_save_double_editor($post_id){
	update_post_meta($post_id, '_true_editor_data', $_POST['trueeditor']);
}
function true_double_editor() {
	global $post;
	echo '<h2>Второй редактор</h2>'; // заголовок ко второму редактору
    wp_editor( get_post_meta($post->ID, '_true_editor_data', true), 'trueeditor' );	
} 
add_action( 'edit_form_advanced', 'true_double_editor' );
add_action( 'edit_page_form', 'true_double_editor' );
add_action('save_post', 'true_save_double_editor');

Надо сказать, что на контент, выведенный через второй или последующие редакторы, не действует фильтр the_content, что конечно не очень хорошо. Могут возникнуть проблемы с той же микроразметкой.

До встречи!

С уважением, Виталий Кириллов

Статьи по теме:

Кнопка в редактор TinyMCE для ajax-ссылки
Свои кнопки в редактор TinyMCE WordPress