Online rich-text editor
Encyclopedia
An online rich-text editor is an interface for editing rich text
within web browser
s, which presents the user with a "what-you-see-is-what-you-get"
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 box
es 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.
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.
Formatted text
Formatted text, styled text or rich text, as opposed to plain text, has styling information beyond the minimum of semantic elements: colours, styles , sizes and special features .-Terminology:...
within web browser
Web browser
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
s, which presents the user with a "what-you-see-is-what-you-get"
WYSIWYG
WYSIWYG is an acronym for What You See Is What You Get. The term is used in computing to describe a system in which content displayed onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product...
editing area. The aim is to reduce the effort for users trying to express their formatting directly as valid HTML markup
HTML element
An HTML element is an individual component of an HTML document. HTML documents are composed of a tree of HTML elements and other nodes, such as text nodes. Each element can have attributes specified. Elements can also have content, including other elements and text. HTML elements represent...
.
Though very early browsers could display rich text, user data entry was limited to text box
Text box
A text box, text field or text entry box is a kind of widget used when building a graphical user interface . A text box's purpose is to allow the user to input text information to be used by the program...
es 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
Cursor (computers)
In computing, a cursor is an indicator used to show the position on a computer monitor or other display device that will respond to input from a text input or pointing device. The flashing text cursor may be referred to as a caret in some cases...
. 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
Gmail
Gmail is a free, advertising-supported email service provided by Google. Users may access Gmail as secure webmail, as well via POP3 or IMAP protocols. Gmail was launched as an invitation-only beta release on April 1, 2004 and it became available to the general public on February 7, 2007, though...
and WordPress
WordPress
WordPress is a free and open source blogging tool and publishing platform powered by PHP and MySQL. It is often customized into a content management system . It has many features including a plug-in architecture and a template system. WordPress is used by over 14.7% of Alexa Internet's "top 1...
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.
Design challenges
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 processorWord processorA word processor is a computer application used for the production of any sort of printable material....
or text editorText editorA text editor is a type of program used for editing plain text files.Text editors are often provided with operating systems or software development packages, and can be used to change configuration files and programming language source code....
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.
Implementations
The majority of online rich text editors use an iframeIFrame
iFrame can be:* I-frames, in video compression; see video compression picture types* iFrame * The HTML iframe element....
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
Span and div
In HTML, the span and div elements are used where parts of a document cannot be semantically described by other HTML elements.Most HTML elements carry semantic meaning – i.e. the element describes, and can be made to function according to, the type of data contained within...
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.
Examples
- Aloha EditorAloha EditorAloha Editor is an open source WYSIWYG editor that can be used in web pages. Aloha Editor aims to be easy to use and fast in editing and allows advanced inline editing. The first version was released 15 July 2010.-Description:...
- Open Source browser based html5 enabled rich text editor. - CKEditor - Open Source browser based rich text editor.
- TinyMCETinyMCETinyMCE, also known as the Tiny Moxiecode Content Editor, is a platform-independent web-based JavaScript/HTML WYSIWYG editor control, released as open source software under the LGPL by Moxiecode Systems AB. It has the ability to convert HTML textarea fields or other HTML elements to editor instances...
- Open Source editor control. - WYMeditor - Open Source XHTML editor focusing on semantic markup.
Widget Toolkit Editors
- Dijit Editor - a Dojo ToolkitDojo ToolkitDojo Toolkit is an open source modular JavaScript library designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites. It was started by Alex Russell, Dylan Schiemann, David Schontzler, and others in 2004 and is dual-licensed under the modified BSD...
based rich text editor component. - YUI Rich Text EditorYUI Rich Text EditorYUI Rich Text Editor is a project developed by Yahoo! as a part of the YUI Library for an online rich-text editor that replaces a standard HTML textarea. It allows for drag and drop inclusion and sizing of images, text coloring, realignment, fonts, italic and bold text...
- a Yahoo!Yahoo!Yahoo! Inc. is an American multinational internet corporation headquartered in Sunnyvale, California, United States. The company is perhaps best known for its web portal, search engine , Yahoo! Directory, Yahoo! Mail, Yahoo! News, Yahoo! Groups, Yahoo! Answers, advertising, online mapping ,...
rich text editor component.
External links
- Genii Software list, a list of online rich text editors (last update September 2009).