Online rich-text editor
An online rich-text editor is an interface for editing rich text within web browsers, which presents the user with a "what-you-see-is-what-you-get" (WYSIWYG) editing area. The aim is to reduce the effort for users trying to express their formatting directly as valid HTML markup.
Though very early browsers could display rich text, user data entry was limited to text boxes with a single font and style (implemented with the <TEXTAREA> HTML element). Internet Explorer was the first to add a special "designMode" which allowed formatted parts of a document to be edited by the user using a cursor. Mozilla followed suit in version 1.3, and most major browsers now implement this informal standard in some capacity.
The technical capabilities needed to implement an online rich text editor are still not covered by the W3C specifications for HTML4. Nevertheless, popular services like Gmail and WordPress rely on rich text editing as their main user interface. For HTML5, some standardization is being made on a DOM property called "contentEditable"—which resembles Internet Explorer's extension. Many of the Online office suites tend to provide online text editing and formatting functionality.
The most popular editors used for creating the rich text component of web pages have the following design objectives:
- The editing view matches the final appearance of published content with respect to fonts, headings, layout, lists, tables, images and structure
- The buttons, controls and key strokes deliver the same behaviour as the word processor or text editor that the user is most familiar with.
- The HTML code that is generated is compliant with web standards (such as W3C) and the browser on which the content will be viewed.
The majority of online rich text editors use an iframe element for the content area. This way the content inside the editor is separate from the rest of the page, because it is in a different document. The benefit from this separation is that the editor can be used anywhere on the site (e.g. in an admin area) while still maintaining the content styles the users expect to see when the content is published (e.g. in a public area).
Some editors use div elements for their content area. This way the editor content inherits the same style as the rest of the page, because it is in the same document. This approach is mainly used when the users need to edit content "in-place", preserving the overall layout of the page. Examples of such "in-place" editors are the DotNetNuke CMS and the SharePoint Web Content Management scenario.
The following implementations are divided into inline editors and iframe editors.
Inline editors differ from normal editors as they can edit the content directly, without placing it inside another element, often with a `contenteditable` attribute. These editors include:
- Aloha Editor — Open Source browser based html5 enabled rich text editor.
- CKEditor - starting from CKEditor 4 Beta - http://ckeditor.com/blog/CKEditor-4-Beta-Released
- EditLive! — An Applet-based rich text editor marketed to enterprise.
- Etch Editor - http://etchjs.com/
- FresherEditor - https://github.com/mquan/freshereditor (Twitter Bootstrap)
- Hallo Editor - https://github.com/bergie/hallo
- HTML5 Edit - https://github.com/balupton/html5edit
- Mercury Editor - https://github.com/jejacks0n/mercury/
- NicEdit - http://nicedit.com/
- Quill Editor — http://quilljs.com
- SnapEditor - Online HTML5 rich text editor - https://github.com/snapeditor/SnapEditor
- RedactorJS - http://redactorjs.com/
- Whizzywing - http://whizzywing.com/
- Ace Editor - http://ace.c9.io/
Editors that use an iframe, to avoid styling conflicts, include:
- CKEditor — Open Source browser based rich text editor.
- Dijit Editor — a Dojo-based rich text editor component.
- bootstrap-wysiwyg - https://github.com/mindmup/bootstrap-wysiwyg/
- bootstrap-wysihtml5 - http://jhollingworth.github.com/bootstrap-wysihtml5/
- lwrte - http://lwrte.googlecode.com/ (jQuery)
- TinyMCE — Open Source editor control.
- wkrte - http://wkrte.googlecode.com/ (jQuery)
- WYSIHTML5 - http://xing.github.com/wysihtml5/
Editors that have not yet been categorized include:
- WYMeditor — Open Source XHTML editor focusing on semantic markup.
- YUI Rich Text Editor — a Yahoo! rich text editor component.
- VisualEditor — a MediaWiki extension
- CLEditor - http://premiumsoftware.net/cleditor/
- Cross-Browser RTE - http://www.kevinroth.com/rte/
- ggEdit - https://code.google.com/p/ggedit/ (MooTools)
- goog.editor - (Closure Library)
- jHtmlArea - http://jhtmlarea.codeplex.com/
- jWYSIWYG - https://github.com/akzhan/jwysiwyg (jQuery)
- Loki Editor - https://code.google.com/p/loki-editor/ (MooTools)
- PunyMCE - https://github.com/spocke/punymce
- SimpleHtml5Editor - https://github.com/TheOtherNet/simpleHtml5Editor
- widgEditor - https://github.com/37signals/wysihat (jQuery, Prototype)
- WMD Markdown Editor - https://code.google.com/p/wmd/ (http://wmd-editor.com/ down?)
- Whizzywig Editor - http://unverse.net/Whizzywig-web-based-rich-text-editor
- "Rich-Text Editing in Mozilla 1.3". Devedge-temp.mozilla.org. Retrieved 2011-07-18.
- "RE: HTML Action Item 54 - ...draft text for HTML 5 spec to require producers/authors to include @alt on img elements. from Frederico Caldeira Knabben on 2008-05-14 (email@example.com from May 2008)". Lists.w3.org. Retrieved 2010-09-23.
- "7 User interaction — HTML5". W3.org. Retrieved 2010-09-23.
- Calmly Writer Online - a minimalist online rich-text editor
- Genii Software list, a list of online rich text editors (last update September 2009)
- socialcompare.com comparison — a comparison of various online rich text editors