Plug-ins for rich text editors on your website
Most of the blogs, CMSes, forums and websites use a plain text editor for allowing their readers to create, edit content and comments. But, with web 2.0, rise of HTML5 and many cross browser scripting languages like jQuery made it very simple to convert those plain text-areas into rich text editors and to have more control with users for content they create.
In this post, I will be listing WYSIWYG/M editors built with scripting languages like JavaScript, AJAX and jQuery.
CLEditor is an open source jQuery plug-ins which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor which can be easily added into any web site CLEditor also support for rich drop downs for font name, size, style, text color and highlight color. Also, CLEditor allows you to insert images, hyperlinks and horizontal rules. All this functionalities are available in 9kb zip compressed code with images.
WMD is a simple, lightweight WYSIWYM (What-You-See-Is-What-You-Mean) editor.It can be added to any text area using just one line of code and supported by all major browsers across the globe.It uses markdown as an input format converting it into HTML behind the scenes. Stack Overflow(http://www.stackoverflow.com/) uses WMD editor for editing comments and answers.
An extremely lightweight editor plug-in, which can be customized according to our needs. Mostly used for creating in line content editors which can be used in comment, contact or similar kind of forms. It allows you to turn any text area in markup using following three lines of code.
$(function()
$(‘#wysiwyg’).wysiwyg();});
If you are looking for plug-in with support for almost all the browsers then ckeditor is THE editor for you. With support of almost all commonly used browsers, ckeditor can be used with languages like JavaScript, AFP, ASP, ASP.NET, ColdFusion, Java, PHP, Python, Adobe AIR and others. The key features like thoroughly navigable through keyboard and support high contrast sites make it one of the unique plug-ins available in market.
Do you like to have an option of upload images as one of the options? NicEdit can solve your problem. In addition to replacing text areas, NicEdit instances can also replace any element (divs,spans,paragraphs,etc.) with editor instances without effecting the layout of the page. As you will see in other examples content can be saved via AJAX to the server or retrieved from javascript
To make use of In line Editing you should first create an empty element as a placeholder for the Editor Panel.
Not a WYSIWYG editor but it is worth mentioning here. It is very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites. You can integrate HTML, Textile, WikiSyntax, Markdown, bbcode or even your own markup language with it.
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 Text Area DOM Elements on the page. The minified script alone is 7kb, and with CSS and image files it’s a total of 25kb. jHTMLArea has an support of IE 7/8, Firefox 3/3.5 and Safari.
uEditor is a WYSIWYG HTML editor originally based on widgEditor designed by Cameron Adams, but rewritten for jQuery and considerably modified since. uEditor is flexible and easy to use. As for widgEditor, the generated code is clean and valid and it’s possible to use a custom style sheet for rendering in WYSIWYG mode among other things.You can also extend its functionalities thanks to an easy-to-use plug-in system.
Do you like this post or have some more editor plug-ins to suggest? Comment them down to share with our readers.