JQuery WYSIWYG HTML Editors

WYSIWYG(What You See Is What You Get) Editor allows users to enter rich HTML text on the fly in the browser. These controls are very useful for the sites which allow users to publish the content.

Here I am going to share JQuery WYSISYG editor, i.e. “NicEdit” and other interesting editors.

NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser.
see Demo here

Here is the sample code to convert textarea into rich html editor:

<script type="text/javascript">
   new nicEditor().panelInstance('area1');
</script>
   <textarea cols="50" id="area1">

This plugin has more options to customize the editor

var o = {
    buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image'],
    iconsPath : '/nicEditorIcons.gif',
    maxHeight :200
};
new nicEditor(o).panelInstance('area1');

see more examples on official site .

Here is the list of other interesting JQuery wysiwyg html editors:

jhtmlArea
A simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page.

ClEditor
CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor.

Lightweight RTE- jQuery
A simple lightweight jQuery plugin is compatible with major browsers.

MarkItUp
It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

jwysiwyg
jWysiwyg is minimalistic WYSIWYG editor to covert TextArea.

elRTE
elRTE allows rich text editing, options for changing its appearance, style and many more.