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

NicEdit wysiwyg html editor

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.

jJHTML wysiwyg html editor

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

Lightweight RTE- jQuery
A simple lightweight jQuery plugin is compatible with major browsers.
light weight RTE jquery wysiwyg html editor

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.
MarlItUp jquery wysiwyg html editor

jwysiwyg
jWysiwyg is minimalistic WYSIWYG editor to covert TextArea.
jWysiwyg jquery wysiwyg html editor

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


You can leave a response, or trackback from your own site.

5 Responses to “JQuery WYSIWYG HTML Editors”

  1. Chris says:

    Thank you for the helpful post. Any recommendation as to which would be the best for allowing users to compose HTML emails that include images and such? Email clients of course don’t have good support for CSS, so services like MailChimp format them with tables and inline styles. Looking for an editor which supports that.

  2. Prithvi says:

    Heya..
    Hope you doing great.. Landed on your blog just now and found it pretty useful.. Gone through many posts. couldn comment on every of those page, so posting on this page. Keep up the good work.. :)

  3. Rob Sherwood says:

    Although not open source, Redactor gets my vote – very nice, clean WYSIWYG editor with nice file and image upload as standard.

  4. Siyabonga says:

    Will these plugins works on android, IOS, Symbian ?

  5. Jane says:

    I love NicEdit. Lightweight and easy to customize so client’s won’t override set page styles.

Leave a Reply