«

»

Авг 24 2013

Распечатать Запись

Добавление визуального редактора TinyMCE в комментарии WordPress

В стандартной форме для комментирования WordPress никакого текстового редактора не предусмотрено. Может это и правильно для большинства сайтов, но мне хотелось дать возможность комментаторам излагать свои мысли красиво и оформлено.

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

Форма комментирования с визуальным редактором TinyMCE

Итак, приступим к установке TinyMCE (версия 3.x) в форму добавления комментария. Кстати, процесс несильно будет отличаться от версии 4.x – для неё только настройки немного отличаются и исходные скрипты точно придется загружать на сайт.

Установка основных скриптов TinyMCE

Есть два варианта:

  1. Скачать и перекинуть к себе на хостинг все необходимые файлы (ссылка для скачивания).
  2. Использовать имеющиеся в WP из папки wp-includes/js/tinymce/.

В первом случае мы полностью контролируем ситуацию, но добавляем на сайт еще один JS-скрипт. Во втором случае мы ничего не добавляем, но есть риск, что при обновлении WordPress наша форма комментирования сломается.

UPD 20.09.2013: При недавнем обновлении WP так и случилось. WP удалил и записал заного папку с TinyMCE и как следствие пропала руссификация и дополнительные плагины.

Установка и настройка редактора в форму комментирования

Добавить вызов пары скриптов перед формой добавления комментария. Я это сделал как  всегда добавив в functions.php функцию и прикрепив её вызов к хуку. По существу код взял отсюда и добавил правки отсюда.

Настройка кнопок редактора

Настроить состав кнопок и плагинов по своему вкусу. Справку по возможным плагинам и кнопкам для TinyMCE 3.x можно найти тут.

В коде выше добавлять плагины и кнопки нужно в этих фрагментах:

 

Кроме добавления кнопок, может потребоваться расширить набор допустимых тегов в форме добавления комментария. Иначе в редакторе тег будет, а при добавлении комментария WP его вырежет. Эту модификацию делаем способом, аналогичным добавлению самого редактора – в functions.php добавляем такой код.

Как можно догадаться здесь разрешается использовать тег pre.

Русификация

Как это ни странно у себя в исходных я языковых файлов не нашел, поэтому скачал их отсюда и скопировал полученный пакет файлов в исходную папку с TinyMCE. Код выше уже адаптирован под использование русского языка – за это отвечает строчка:

UPD 16.05.2014: Обновление WordPress до версии  3.9 и переход на TinyMCE 4

История решения в комментариях к этой записи, а здесь приведу получившийся кода со всеми изменениями (кроме того, воспользовался опытом по настройке Александра из комментариев.

Если не вдаваться в детали, то это все, что нужно для установки TinyMCE в форму комментирования WordPress. А если вдаваться, то материала хватит на отельный сайт :-) Спрашивайте в комментариях, если на каком-то этапе будут проблемы – разберемся!

15 комментариев

Перейти полю для комментария

  1. Сергей

    Вы не знаете, возможно ли добавление смайлов в форму комментов в теме Graphene? Перепробовал всё, что написано в инете, ничего не работает.

    1. Stonekeeper

      Первое же, что нашел гугл поиском “tinymce smiles”: 

      http://www.tinymce.com/wiki.php/Plugin:emoticons

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

  2. Stonekeeper

    В последнем обновдении WordPess 3.9 изменилась версия используемого редактора TinyMCE на четвертую. В связи с этим указанное выше решение перестало работать, так как заточено под третью версию. Варианта два: либо закачать на блок третью версию в отдельную папку, либо скорректировать скрипт инициализации самого редактора для комментариев на следующий:

  3. Владимир

    Доброго времени суток!
    Реализовал данный функционал у себя на сайте. Все работает, большое спасибо! Но есть одно но. Незнаю как назвать это, баг что ли. Если Вы нажмете ответить на чьё либо сообщение то текстовое окно блокируется. Вот скрин: http://prntscr.com/3da1yi. Не знаете ли вы как это исправить. Проверял у вас на сайте тоже самое.

    1. Stonekeeper

      И правда, до обновления TinyMCE такого не было. Спасибо, что обратили внимание!
      Как-то я встречал упоминание этой проблемки, но давно это было – покопаюсь на досуге, если найду решение, то обязательно сообщу.

  4. Вот еще http://prntscr.com/3dlj16. И это если вы залогиитесь или нет, т.е. все равно!

    1. Stonekeeper

      Интересная проблемка косяк где-то в кешировании страниц…

      1. БудниКЗ

        Нашел решение твоей проблемы. Только вот не пойму где чо поменять. Может глянешь? http://bechster.com/add-tinymce-visual-editor-comment-form-wordpress/

        1. Stonekeeper

          Спасибо, ссылка полезная.

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

          • mceRemoveControl на mceRemoveEditor
          • mceAddControl на mceAddEditor

          Итоговый вариант кода для TinyMCE сейчас добавлю в пост.

  5. Александр Каратаев

    Скачал последний релиз TinyMCE с сайта разработчиков – 4.0.26, залил папку себе в корень блога…
    Вставлял скриптом, который показывают на сайте разработчики TinyMCE в файл comments.php – всё хорошо, за исключенем того, что только я могу вставлять таблицы, изображения, выделять цветом и т.д.  Гости в режиме редактирования коментария все вставляют, а при сохранении это все удаляется почему-то… Остается только текст. Правда выделение жирным, курсивом… остается.
    Патался вставить последний Ваш код в functions.php – никакого эффекта… 
    Не подскажете в чём причина, почему у меня не срабатывает Ваш код? И ещё… Если я оставлю только тот функционал, что у Вас, то у меня тоже проблем с посетителями не будет. А если Вы, например, добавите вставку таблицы или изображения, то смогут-ли Ваши гости этим воспользоваться или как у меня это будет вырезано?
     

    1. БудниКЗ

       Да кстати я тоже это заметил не так давно!

    2. Stonekeeper

      На счет первого могу предположить, чт о это связано с разрешенными тегами в комментариях на уровне WP, все остальные вычищаются. Посмотрите в этой записи в разделе “Настройка кнопок редактора” там есть пример как разрешить тег pre в комментариях. В случае с таблицами, возможно, надо разрешать не только тег  table, но всё, что в него вложено th, td и т.п.

      На счет причин почему не работает – посмотрите какие ошибки в консоли вылезают при использовании моего кода. Пару раз это помогало вылочить ошибки в решении: не правильная тема при инициализации, не хватает плагинов, не хватает русификации, не верная ссылка для подключения скрипта и т.п.

      1. Сергей

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

        ячейка1.1
        ячейка1.2

        ячейка2.1
        ячейка2.2

        А теперь список из нескольких разноцветных пунктов

        Красный
        Желтый
        Зеленый

        И картинка из поста:

        А ниже я добавлю что-тьо с тегом pre:

    3. Stonekeeper

      Провел эксперимет в ответе на свой же собственнй коммент выше. Как видите в сообщении от незарегистрированного у меня пользователя WP убрал все теги, кроме разрешенного pre. Правда потом провел короткий экспериент с другими тегами – не заработало с наскоку… покопаюсь на досуге.

      P.S. Спасибо за ваш пост перенял немного по настройкам (по части настройки тулбара, до чего не дочитал, когда обновлял до 4ой версии).

  6. Vladimir

     Здравствуйте!
    Наткнулся еще на одну проблему. Как вы помните вы решили проблему с блокированием окна при нажатии на “Ответить” на комментарий. Но как выяснилось аналогичная проблема вылазиет при нажатии на “Отменить ответ”. Никак не могу найти решение данной проблемы. На сколько я понял нужно работать с функцией “cancel_comment_reply_link” по аналогии “comment_reply_link”. Нет ли у вас идей по решению данной проблемы?

Добавить комментарий для Сергей Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *