JHtmlArea visual editor

Very compact, but at the same time quite convenient visual editor jHtmlArea . By the first letter in the title, you can guess that jQuery is used.

It is somewhat similar to the more famous jWysiwyg. Although it has a smaller size, it has no less capabilities. In my opinion, the code is organized much more conveniently, it is very easy to expand. Also a huge plus is that the icons in the menu can be placed in any order.

Despite the fact that IE6 is not supported, it works fine in it. In Opera also works.

Demonstration

')
Initialized jHtmlArea is simple:
$("textarea.wysiwyg").htmlarea({params});
On one page you can do as many editors as you want on top of the <textarea class="wysiwyg">

To extend the functionality, there is a very convenient pasteHTML () method, for example:
$("textarea[name=html]").htmlarea({
toolbar: ["html", "bold", "italic", {
css: "smile",
text: " ",
action: function (btn) {
this.pasteHTML(":-)");
}
}
]});

To make this new icon (smile) appear in the toolbar, it's enough to write in CSS:
div.jHtmlArea .ToolBar ul li a.smile {background: url(img/smile.png) no-repeat 0 0;}

In the parameters, you can specify which CSS will be used in the edited document, it is very convenient, it will allow you to see it in the same way as on the site.

The only negative (for me) is the fixed width of the input field, and the textarea too, but this is easily corrected, just remove the change in the width of the input fields from the code. Found another error with not processing the events of the claviarute and the mouse at the visual editor, replaced $ (this.editor.body) .click (fnTA) ... with $ (this.editor) .click (fnTA) ...

For me, jHtmlArea was a real find, completely replacing them with jWysiwyg.