В одной из прошлых статей я рассматривал, как можно перевести форму комментирования на 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.