In this post I suggest you to try five free WYSIWYG editors for your web-based applications that transform simple <textarea> HTML elements into powerful and useful rich text editors. I also provide simple instructions to implement quickly these editors in your web pages.

Yahoo! UI Rich Text Editor

The Yahoo! Rich Text Editor is a UI control that replaces a standard HTML textarea and is based on Yahoo! UI Library; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. Implement this editor in your web site is very simple. You have to add a simple textarea like this:

<textarea id="editor" name="editor">

Then, to activate the editor copy and paste the JavaScript code you find in the related pages on Yahoo Developer Network.

TinyMCE

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control that has the ability to convert HTML <textarea> fields or other HTML elements to editor instances. TinyMCE is lightweight, browser friendly, very easy to integrate into other Content Management Systems and fully customizable with themes and plugins. This editor can be integrated in your website only with a few lines of code. Add this code into the tag <head> of your page:

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>

To initialize the editor use the code you can find here (View Source link). Than add a simple text area in your page like this:

<textarea id="content" style="width:100%"></textarea>

Direct Link: http://tinymce.moxiecode.com

NicEdit

NicEdit is a WYSIWYG editor for websites. Its goal is to be as simple and fast as possible for users of your application. NicEdit is extremely lightweight and can be easily integrated in any site with minimal impact while providing visitors an effective means to express themselves in rich text. To include NicEdit in your page you have only add the following two lines of code and all textareas on the page will be converted to nicEditors:

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);

Direct Link: NicEdit

CKEditor

CKEditor is a powerful WYSIWYG editor that brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice. Because CKEditor is licensed under flexible Open Source and commercial licenses, you'll be able to integrate and use it inside any kind of application. This is the ideal editor for developers, created to provide easy and powerful solutions to their users.

Direct Link: http://ckeditor.com/demo

openWYSIWYG

openw

openWYSIWYG is the ultimate WYSIWYG editor for your web-based applications and forms that's packed with every rich-text editing feature you need to make your content management system that much better. Packed with every rich text editing feature you need, openWYSIWYG gives you total control over formatting your text. Setting up openWYSIWYG is so easy, you can quickly turn any <textarea> into a powerful WYSIWYG editor with just a few simple lines of code. The only thing you have to do is to include the following line of code in your web pages:

<script language="text/javascript">WYSIWYG.attach('textarea-id');></script>

Direct Link: http://www.openwebware.comt4apxuzkib