An online rich-text editor is the interface for editing

rich text Rich may refer to: Common uses * Rich, an entity possessing wealth * Rich, an intense flavor, color, sound, texture, or feeling ** Rich (wine), a descriptor in wine tasting Places United States * Rich, Mississippi, an unincorporated comm ...

within

web browser A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used o ...

s, 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 An HTML element is a type of HTML (HyperText Markup Language) document component, one of several types of HTML nodes (there are also text nodes, comment nodes and others). The first used version of HTML was written by Tim Berners-Lee in 1993 ...

. Though very early browsers ''could display'' rich text, user data entry was limited to

text box type=search placeholder=An example text box, which can be used to search the English Wikipedia. A text box (input box), text field or text entry box is a control element of a graphical user interface, that should enable the user to input ...

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 may refer to: * Cursor (user interface), an indicator used to show the current position for user interaction on a computer monitor or other display device * Cursor (databases), a control structure that enables traversal over the records in ...

. 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 were not covered by the

W3C The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 and led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working to ...

specifications for

HTML4 The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...

. Nevertheless, popular services like

Gmail Gmail is a free email service provided by Google. As of 2019, it had 1.5 billion active users worldwide. A user typically accesses Gmail in a web browser or the official mobile app. Google also supports the use of email clients via the POP and ...

and

WordPress WordPress (WP or WordPress.org) is a free and open-source content management system (CMS) written in hypertext preprocessor language and paired with a MySQL or MariaDB database with supported HTTPS. Features include a plugin architecture ...

have relied on rich text editing as their main user interface. With

HTML5 HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML ...

, some standardization was made on a DOM property called "contentEditable"—which resembles Internet Explorer's original extension. Many of the

online office suite An online office suite, online productivity suite or cloud office suite is an office suite offered in the form of a web application. It is accessed online using a web browser. This allows people to work together worldwide and at any time, thereby l ...

s tend to provide online text editing and formatting functionality.

Approach

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.

Implementations

Inline editors differ from normal editors as they can edit the content directly, without placing it inside another element, frequently with a `contenteditable` attribute. These editors include Aloha Editor,

CKEditor CKEditor (formerly known as FCKeditor) is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications. Its core code is written in JavaScript and it is developed by CKSource. CKEditor is available ...

SnapEditor SnapEditor is an HTML5 WYSIWYG text editor from 8098182 Canada Inc. that can be used in web pages. It was born out of frustration with existing editors and aims to solve those frustrations. The first version was released in 2012. Its developmen ...

and TinyMCE. Editors that use an ''iframe'', to avoid styling conflicts, include

Dijit Editor Dojo Toolkit (stylized as dōjō toolkit) is an open-source modular JavaScript library (or more specifically JavaScript toolkit) designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites. It was st ...

and TinyMCE.

References

External links

{{DEFAULTSORT:Online Rich-Text Editor Text editors Web applications

Approach

Implementations

See also

References

External links