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

5 Comments

Add a Comment

Your email address will not be published. Required fields are marked *