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

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

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

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

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

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

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

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

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

Итак, теория закончена – переходим к практике :)

Вся установка сводится к заданию 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.

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

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

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





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



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

  1. Aртем

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

  2. cryptus

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

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

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

  5. cryptus

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

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

  7. Roy

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

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

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

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

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

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

  9. e

    e

  10. Дмитрий

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

  11. 555

    fasdf

  12. asd

    asd

  13. Вася
  14. Maxim

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

  15. Maxim

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

  16. Maxim

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

  17. Maxim

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

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

  19. дврвр

    авфавы

  20. sdfsdf

    Коменнтарий тест


© Copyright. . I-Novice. All Rights Reserved. Terms | Site Map