» » » Функция wp_editor() — текстовый редактор в комментариях
logotip

Функция wp_editor() — текстовый редактор в комментариях

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

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

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

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

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

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,

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

wp_editor-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>',

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

wp_editor-2

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


editor_class (строка)

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

'editor_class' => 'my_class',

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

wp_editor-3

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


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

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

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

wp_editor-4

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

wp_editor-5

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


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

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

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


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

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

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

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

wp_editor-6

Если в аргументе 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();" ));

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

wp_editor-7

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


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

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

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

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

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

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

wp_editor-8

По умолчанию: 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, с таким же набором кнопок, как в админке.

wp_editor-9

Важно! Визуальный редактор TinyMce не работает при ответе на комментарий, вернее при перемещении формы комментирования под кнопку «Ответить».

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

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

wp_editor-10

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

wp_editor-11

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

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

wp_editor-12

А текстовое поле выводиться с помощью стандартных тегов <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);
}

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

wp_editor-13

Набор кнопок задается в строчке №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

Комментарии: 16

  1. Андрей:

    Спасибо за подробную инструкцию, всё работает!

    Ответить
  2. max:

    Добрый день. Сори что не по теме. Но как у вас реализован блок Содержание статьи, как раз искал такую штуку.Скажите что плагин- неповерю))

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Нет, это не плагин. Я уже не помню точный урл, поищите в интернете по запросу «оглавление для больших постов».

      Ответить
  3. Вадим:

    Классная публикация. Жаль, что такие сведения мне не попались на глаза прошлым летом, когда мучился с этой функцией и некоторыми другими. Зато теперь точно знаю, где искать ответы на свои вопросы.

    Ответить
  4. Мария Царенок:

    Здравствуйте.
    Интересно, но сложновато.
    Надо перечитать внимательнее.
    Спасибо!

    Ответить
  5. Woot:

    такая огромная статья про редактор. А сами не используете.
    Почему ?

    Ответить
    • Виталий Кириллов:

      Мне непонятны некоторые моменты, о которых я упоминал в статье. Хочу сначала разобраться, да времени для этого совсем нет.

      Ответить
  6. Оксана:

    Не могу найти строчку, которую нужно заменить в файле comments.php

    Ответить
  7. Александр:

    Здравствуйте, Виталий. У себя на блоге я так и не смог найти такую строку
    У меня шаблон bloggerz хочу функцию комментировать сделать проще. Это все что есть в commensts.php

    >>

    ‘div’,
    ‘short_ping’ => true,
    ‘avatar_size’ => 56,
    ) );
    ?>

    1 && get_option( ‘page_comments’ ) ) : // Are there comments to navigate through? ?>


    Ответить
  8. Денис:

    Виталий, добрый день! Подскажите пожалуйста, как добавить функцию «value» у поля «textarea» в редакторе. Нужно чтобы по умолчанию был какой то текст в редакторе…
    <?php wp_editor('Какой то текст', 'editor_id', array(
    ….
    ));
    Такой вариант не подходит, так как этот текст приходится удалять перед написанием своего!
    Делаю для себя отдельный плагин и в "textarea" нужно вставить вот такое — value="»
    А задача следующая, есть 2 формы для заполнения — заголовок и форма , если одно из полей не заполнено и нажали на кнопку сохранить, страница обновляется и с формы текст пропадает. Для решения этой проблемы нужно добавить в стандартный — value=»»
    Не могу сообразить как это сделать ((

    Заранее благодарю!

    Ответить
    • Денис:

      Поспешил, не преобразовал код:

      <?php wp_editor('Какой то текст', 'editor_id', array(
      ….
      ));

      value="<?=$content?>"

      Ответить
      • Виталий Кириллов:

        К сожалению Денис у функции нет хуков, с помощью которых можно было бы повлиять на html.

        Ответить
  9. Алексей:

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

    <p>
    <textarea id="text" name="text"></textarea>
    <?

    wp_editor('', 'text', array(
    'wpautop' => 1,
    'media_buttons' => 1,
    'textarea_name' => 'text', //нужно указывать!
    'textarea_rows' => 20,
    'tabindex' => null,
    'editor_css' => '',
    'editor_class' => '',
    'teeny' => 0,
    'dfw' => 0,
    'tinymce' => 1,
    'quicktags' => 1,
    'drag_drop_upload' => false
    ) );

    ?>
    </p>

    Ответить
  10. Roman:

    Блин, мне без стакана не разобраться

    Ответить
  11. Igor:

    Спасибо, работает.

    Ответить
  12. Александр Каратаев:

    Визуальный редактор TinyMce не работает при ответе на комментарий, вернее при перемещении формы комментирования под кнопку «Ответить».

    Ну почему-же не работает? Очень даже нормально работает. Посмотрите, например, мой плагин визуального редактора комментариев — он давно в репозитории WordPress. Вот ссылка на него:
    wordpress.org/plugins/ark-wysiwyg-comment-editor/

    Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS