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

Очень компактный, но в то же время довольно удобный визуальный редактор jHtmlArea. По первой букве в названии можно догадаться, что используется jQuery.

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

Несмотря на то что не заявлена поддержка IE6, прекрасно в нем работает. В Opera тоже работает.

Демонстрация


Инициализируется jHtmlArea просто:
$("textarea.wysiwyg").htmlarea({params});
На одной странице можно делать сколько угодно редакторов поверх <textarea class="wysiwyg">

Для расширения функциональности есть очень удобный метод pasteHTML(), пример:
$("textarea[name=html]").htmlarea({
toolbar: ["html", "bold", "italic", {
css: "smile",
text: "Вставить смайлик",
action: function (btn) {
this.pasteHTML(":-)");
}
}
]});

Чтобы эта новая иконка (smile) появилась в тулбаре, достаточно в CSS прописать:
div.jHtmlArea .ToolBar ul li a.smile {background: url(img/smile.png) no-repeat 0 0;}

В параметрах можно указать какой CSS будет использоваться в редактируемом документе, очень удобно, позволит сделать так, что будем видеть точно так же, как и на сайте.

Единственный минус (для меня), это фиксированная ширина поля ввода, причем у textarea тоже, но это легко исправляется, достаточно убрать из кода изменение ширины полей ввода. Нашел еще ошибку с не обработкой событий клавиаруты и мыши у визуального редактора, заменил $(this.editor.body).click(fnTA)… на $(this.editor).click(fnTA)…

Для меня jHtmlArea стал настоящей находкой, полностью заменил им jWysiwyg.