AJAXовый редактор для комментариев

В одной из прошлых статей я рассматривал, как можно перевести форму комментирования на Ajax. Сегодня мы пойдем еще дальше и добавим еще один наворот к нашей форме комментирования icon smile AJAXовый редактор для комментариев

А именно – редактор для добавления комментариев, чтобы пользователи могли использовать некоторые html-теги в своих комментариях.

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

Лично я остановился на jquery-редакторе под названием markItUp. Он использует библиотеку jquery и поэтому очень легкий, но в то же время очень технологичный и функциональный.

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

  • Тублар
  • Скин
  • Превью

Тулбар (панель управления) – отдельная и заменяемая часть редактора. На сайте изготовителя можно скачать разные панели для разных нужд (разметка текста, разметка html и даже разметка wiki-документов). Впрочем, эту панель можно отредактировать и самостоятельно (даже без документации понятно как это сделать, если посмотреть на пример).

Скин – это общее оформление редактора. На сайте так же есть несколько скинов (в тиле Windows Vista, MacOS). Все оформление вынесено в отдельные css, что легко позволяет его изменять.

Итак, теория закончена – переходим к практике icon smile AJAXовый редактор для комментариев

Вся установка сводится к заданию id для textarea, внутри формы для комментария и подключению файлов редактора в заголовке страницы (можно еще подогнать внешний вид под тему после этого).

Допустим редактор мы поставили в папку markitup в корне сайта, тогда в header.php нужно добавить следующие строки:

<?php if (is_single() || is_page()) { ?>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/form.js" type="text/javascript"></script>
<!-- Скин markItUp! -->
<link rel="stylesheet" type="text/css" href=" /markitup/skins/markitup/style.css" />
<!-- Скин панели markItUp! -->
<link rel="stylesheet" type="text/css" href=" /markitup/sets/html/style.css" />
<!-- Сам markItUp! -->
<script type="text/javascript" src=" /markitup/markitup.js"></script>
<!-- Панель markItUp! -->
<script type="text/javascript" src=" /markitup/sets/html/set.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function()	{
	$('#comment').markItUp(mySettings);
});
-->
</script>
<? } ?>

Здесь я использовал теги условия wordpress is_single() и is_page() – это для того, чтобы этот кусок кода подгружался только для открытых страниц и постов.

А здесь

$(‘#comment’).markItUp(mySettings);

вместо comment, нужно указать id вашего textarea внутри формы для комментирования.

Если вы хотите, чтобы в поле предварительного просмотра комментария (подгружается через ajax), комментарий выглядел так же как и все комментарии у вас на сайте, то можно отредактировать файлы preview.html и preview.css в папке templates каталога markitup.

Примеры работы редактора с различными панелями можно посмотреть здесь.

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

До встречи!
Novice.


Теги: ,


Читайте также:



18 Ответов на “AJAXовый редактор для комментариев”

  1. Aртем
    Ноябрь 14th, 2008

    Было бы здорово если ты показал как прикрутить файловый менеджер к этому редактору например какойто плагин к jquery с возможностью загрузки на сервер файлов.

  2. cryptus
    Ноябрь 14th, 2008

    Для таких целей лучше использовать редакторы покруче. Например, FCKEditor или Spaw2 – там все это уже есть.

  3. Grawl
    Апрель 21st, 2009

    Ого, вот так всё просто…
    Кстати, в превью не ставится тег br автоматом – непорядок…

  4. Grawl
    Апрель 21st, 2009

    установил я себе в WordPress плагин этот. разочаровало: плагин заменил стандартный редактор только в админке, форму комментария не изменил.
    решил я последовать Вашим советам. дошёл до строки 11 первого кода и попал в тупик: ну нету в папке /markitup/sets/html/ файла set.js, зато есть set.php – а php, как я помню, тут не прокатит…
    что скажете?

  5. cryptus
    Апрель 23rd, 2009

    Не совсем понял о каком плагине идет речь.. Насчет set.php и set.js – проверь не одинаковое ли у них содержание ;) Если нет, то запусти тестовый пример и сравни структуру его директорий со своим случаем.

  6. Grawl
    Апрель 23rd, 2009

    плагин – WP-markItUp!
    а о каком плагине ведёте речь Вы? :)
    точнее, какой архив с того сайта Вы скачали? там их ой как много…

  7. Roy
    Сентябрь 6th, 2009

    У меня почему-то в скрипт текст из textarea не передается.

  8. Фантик
    Ноябрь 11th, 2009

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

    Дело в том что неопытный пользователь который даже краем уха не слыхал о HTML путается в бесконечных тегах которые скрипт добавляет в поле ввода.

    А что если аудитория сайта состоит именно из таких пользователей. Нет не блондинки как вы подумали ))) … например грузовладельцы.

    Я лично много гневных писем прочитал по этому поводу.

    Потому на данный момент до сих пор нахожусь в поиске оптимального решения … кто подскажет тому спасибо !!!

  9. e
    Сентябрь 28th, 2010

    e

  10. Дмитрий
    Февраль 13th, 2011

    Фантик, попробуй NiceEditor NiceEditor Легкий и довольно функциональный. Плохо что тут можно стили задать самому как хочешь и он это воспримет, например так:
    Это большой синий текст заголовок H1 Хотелось бы ограничить функционал пользователю.

  11. 555
    Июнь 8th, 2011

    fasdf

  12. asd
    Июнь 27th, 2011

    asd

  13. Вася
    Сентябрь 21st, 2011

    Проверка….простите меня, пожалуйста

  14. Maxim
    Октябрь 19th, 2011

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

  15. Maxim
    Октябрь 19th, 2011

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

  16. Maxim
    Октябрь 19th, 2011

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

  17. Maxim
    Октябрь 19th, 2011

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

  18. brootos
    Январь 20th, 2012

    Отличный плагин, поставил себе, теперь только под дизайн настроить и все. Автор респетую :)

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


© 2008 - 2012 i-novice.net | Все права защищены.