17 Awesome Rich Text Editors

A rich text editor (RTE) is a WYSIWYG editor that renders in your browser and allows you to create content with rich formatting without the hassle of learning HTML or other markup languages. Internet Explorer was the first browser to add such a feature to allow the users edit some html elements directly from the browser and other popular browsers followed too. Today, there are hundreds of free, commercial and custom editors that has been built for specific projects or as standalone projects. We showcase some of them here with some info about their API and unique features.

CKEditor

Formerly known as FCKEditor, CKEditor is one of the top RTEs around with a large community, strong support and is extensively documented. CKEditor is a valid XHTML aware editor. This means that it produces valid XHTML code that does not break your page's validation and layout. You can do nearly anything you would with a desktop editor, it can be extended with custom plugins and it is very user friendly. Using the editor is as simple as setting a class name to an element. You can also load specific elements with a reference to their id attribute like this: [code lang="javascript"]CKEDITOR.replace( 'editor' );[/code] The code has to be used after the element has rendered, for example within a window.onload function. A simple example use of the CKEditor API is: [code lang="javascript"]function InsertHTML(htmlvalue) { // Get the editor instance that we want to interact with. var oEditor = CKEDITOR.instances.editor1 ; // Check the active editing mode. if (oEditor.mode == 'wysiwyg' ) { // Insert the desired HTML. oEditor.insertHtml( htmlvalue ) ; } else alert( 'You must be on WYSIWYG mode!' ) ; }[/code] The above code will insert any HTML you give to the InsertHTML method to the editor. Except from free licences, someone could acquire a paid licence and then be able to remove any reference to the editor's firm, create other versions of the editor with no need to be open sourced etc. Download | Demo | Documentation | Plugins

TinyMCE

TinyMCE from Moxiecode is the rival to CKEditor since it is as well very popular and powerful. TinyMCE is used in hundreds of projects like Wordpress and Joomla, companies like Microsoft and Oracle and many other individuals that use it in their projects. The editor supports insertion of predefined templates and this is a unique feature built-in the editor. TinyMCE also comes as a jQuery plugin. In order to load the editor in it's simplest form you should include the library and use this code: [code lang="javascript"]tinyMCE.init({ mode : "textareas", theme : "simple" });[/code] The TinyMCE API is powerful and easy to use too. For example if you want to get the editor contents you should do a: [code lang="javascript"]tinyMCE.get('editor').getContent());[/code] Download | Demo | Documentation | Plugins

Xinha

Xinha is one of my favorite RTEs. Xinha is fully extendable through plugins and it uses a rich API that can help you built the editor of your choice. It is based on on HTMLArea which was produced in the past by Interactive Tools. Xinha is an open source project and it will remain one judging from the developers message on the Xinha homepage. Xinha is a bit more complicated than TinyMCE and CKEditor from the amateur users view, since it needs a better understanding of the API but once you master it, you will never want to use another editor. To load the Xinha editor in a textarea with id=editor using some plugins, you can use this code: [code lang="javascript"]var xinha_plugins = [ 'ExtendedFileManager','ContextMenu','CSS','FindReplace','FormOperations','Forms','SpellChecker','LangMarks','InsertSnippet' ]; var xinha_editors = [ 'editor' ]; function xinha_init() { if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return; var xinha_config = new Xinha.Config(); xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins); Xinha.startEditors(xinha_editors); } Xinha.addOnloadHandler(xinha_init);[/code] Xinha also supports event hooks that can be used to perform special actions when something happens to the editor instance. The API is simple to use too. For example you can insert HTML in the editor (assume that the xinha instance is 'editor'): [code lang="javascript"]editor.insertHTML(html);[/code] Download | Demo | Documentation | Plugins

NicEdit

NicEdit is one of the easiest Rich Text Editors out there since, the only thing required to load the editor is to include the javascript file. It integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing. One of the best features of NicEdit is that in order to load a plugin to the library, the only think needed, is to go to the download section of the library, choose the plugins you want to be included and download the library. After that, as soon as you replace the library with the newly downloaded one, the plugins you have chosen will be there for you to use. This code will convert all textareas in a page to rich text editors: [code lang="javascript"]bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });[/code] and this code will add an inline editor to any element that you select (Assume that you have already added a div element with id=myNicPanel and you want to make the element with id=instance editable): [code lang="javascript"]bkLib.onDomLoaded(function() { var myNicEditor = new nicEditor(); myNicEditor.setPanel('myNicPanel'); myNicEditor.addInstance('instance'); });[/code] An example use of the NicEdit panel for getting the contents of the editor is: [code lang="javascript"][nicInstance].getContent()[/code] Download/Plugins | Demo | Documentation

EditArea

EditArea is another type of RTE that focuses on editing of source code files with syntax highlighting. It is one of the few editors that treat Tabs as a normal editor, this means inserting a tab character each time by default. EditArea supports real time highlighting for PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, SQL, Pascal, Basic, Brainf*ck and more. EditArea can be loaded with just one function call this way (For a textarea with id=editor): [code lang="javascript"]editAreaLoader.init({ id : "editor" // textarea id ,syntax: "" // syntax to be used for highlighting ,language: "en" //The language to use ,start_highlight: false // to display with highlight mode on start-up });[/code] and the API is fairly simple to use (get the contents of the editor): [code lang="javascript"]editAreaLoader.getValue('editor');[/code] Download | Demo | Documentation

WYMeditor

WYMeditor tries to see things in a different way than any other RTE. WYMeditor's main concept is to leave details of the document's visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as WYSIWYG editors). This is why the authors of WYMeditor describe the RTE as WYSIWYM (What You See Is What You Mean). It is a very semantic editor and uses CSS for styling elements. Styles can be applied from within the editor using prefefined classes that are loaded with the editor. The library is a jQuery plugin. Loading WYMeditor with the silver skin: [code lang="javascript"]jQuery(function() { jQuery('#editor').wymeditor({ lang: "en", stylesheet: './wymeditor/styles.css', skin: 'silver', postInit: function(wym) { wym.hovertools(); //activate hovertools wym.resizable(); //and resizable plugins } }); });[/code] WYMeditor's API is not an alien technology to learn. The same example as the other editors above (get the html value of the editor): [code lang="javascript"]wym.html("<p>Hello, World.</p>");[/code] Download | Demo | Documentation

openWYSIWYG

openWYSIWYG is a simple editor written entirely in JavaScript that is fast and user friendly. It facilitates one of the best table editing interfaces seen on RTEs and it is very simple to use it in your applications. The only drawback for this great RTE is the lack of documentation which could make it even better if existed. Loading openWYSIWYG is as easy as (for attaching an editor to a textarea with id=editor): [code lang="javascript"]WYSIWYG.attach('editor');[/code] Reacting with the editor from outside functions can be done like this (To insert some html to the editor): [code lang="javascript"]WYSIWYG.insertHTML(html,'editor');[/code] Download | Demo

BXE

BXE is a browser based Wysiwyg XML Editor – and that changes everything! You can edit now your content semantically and at the same time display it to your users and editors in its final form. Detailed explanation on how to use the bitflux editor will get you started in minutes. Download | Demo | Documentation

SPAW

SPAW is another popular RTE that from version 2.0 and above has become a state of the art, full featured rich text editor. Version 2 introduces new industry unique tabbed multi-document interface feature. Now you can edit virtually unlimited number of HTML snippets in a single WYSIWYG instance. SPAW can be used with PHP like this (for a textarea with id=editor): [code lang="php"]<?php include("spaw2/spaw.inc.php"); $spaw = new SpawEditor("editor", 'Initial Content here...'); $spaw->show(); ?>[/code] and with .NET technologies like this (for ASP): [code lang="asp"]<%@ Register TagPrefix="spaw" Namespace="Solmetra.Spaw2" Assembly="Solmetra.Spaw2" %> <spaw:Editor ID="Editor1" runat="server" />[/code] and for C#: [code lang="c#"]using Solmetra.Spaw2; Editor spaw1 = new Editor(); spaw1.ID = "Editor1"; Page.Controls.Add(spaw1);[/code] Download | Demo | Documentation | Plugins/Themes

TTW

A very basic RTE that could come handy if you want to add simple rich text editing functionality to your projects. Supports many features of an RTE but it lucks dialogs and image insertion the author states that:

This editor does support the adding of images into the content window. However, at this time, I have the option disabled in the editor.js file because of the need for a server-side script (my implementation is done in PHP).

To add TTW to a page you have to create a form element and add a onsubmit handler on it like this:onsubmit="editor.prepareSubmit()" in order to handle the data. Afterwards you need this code where you want the editor to render: [code lang="javascript"]var editor = new WYSIWYG_Editor('editor'); editor.display();[/code] Download | Demo

Whizzywig

Whizzywig is a lightweight RTE that uses just one file to do all it's magic. It is extremely powerful for it's size and produces valid XHTML. You can customize the toolbar, load your CSS to make it stick to your project's style and more. Adding the Whizzywig RTE to your projects is like (for a textarea with id=editor): [code lang="javascript"]makeWhizzyWig("editor", "all");[/code] Download | Demo | Documentation

widgEditor

widgEditor is an easily installed, easily customisable WYSIWYG editor for simple content. In order to use the editor, you only have to include the js file and all textareas will be transformed into RTEs. Download / Demo

Wikiwyg

Wikiwyg is a very exciting RTE that aims on providing a decent RTE for Wikis and it supports Wikitext too. The documentation of the editor will get you started right away. Download | Demo | Documentation

YUI Rich Text Editor

The Rich Text Editor is a UI control that replaces a standard HTML textarea; 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. The Rich Text Editor's toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. To use the editor, you have to include the appropriate files needed with your configuration and add this code in an onload function: [code lang="javascript"](function() { //Setup some private variables var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; //The SimpleEditor config var myConfig = { height: '300px', width: '600px', dompath: true, focusAtStart: true }; //Now let's load the SimpleEditor.. var myEditor = new YAHOO.widget.SimpleEditor('editor', myConfig); myEditor.render(); })();[/code] Download YUI | Demo | Documentation

Cross Browser RTE

Cross-Browser RTE is free to use but in order to customize it, you have to purchase the source code. It is a simple RTE like TTW and is very simple to use. To add the editor you have to add this code to your pages : [code lang="javascript"]var rte1 = new richTextEditor('editor'); rte1.build();[/code] You can access the editor programmatically like this: [code lang="javascript"]rte1.html = html;[/code] Download | Demo | Documentation

Damn Small RTE

A very small but powerful RTE. Only 18kb footprint and when it comes to JavaScript, size does matter. It comes as a jQuery plugin. Download | Demo

Web Wiz RTE

Web Wiz comes with a lot of features and an option to download for free. It works on all popular browsers and the design mode is very stable. This is how to install the editor in your pages. Download | Demo | Documentation Which one do you use for your projects? Which one did we forgot to mention here? I am waiting to test the rtePad editor which is set to launch late October/Early November 2009 and i use mainly the YUI RTE and Xinha.