Online rich-text editor

Last updated
Content being edited in the Amaya online rich-text editor Amaya inuse.png
Content being edited in the Amaya online rich-text editor

An online rich-text editor is the 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.

Contents

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, [1] and most major browsers now implement this informal standard in some capacity. [2]

The technical capabilities needed to implement an online rich text editor were not covered by the W3C specifications for HTML4. Nevertheless, popular services like Gmail and WordPress have relied on rich text editing as their main user interface. With HTML5, some standardization was made on a DOM property called "contentEditable"which resembles Internet Explorer's original extension. [3] Many of the online office suites 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, SnapEditor and TinyMCE. [4] Editors that use an iframe, to avoid styling conflicts, include CKEditor, Dijit Editor and TinyMCE.

See also

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">HTML</span> Hypertext Markup Language

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 JavaScript.

<span class="mw-page-title-main">Markup language</span> Modern system for annotating a document

Markuplanguage refers to a text-encoding system consisting of a set of symbols inserted in a text document to control its structure, formatting, or the relationship between its parts. Markup is often used to control the display of the document or to enrich its content to facilitating automated processing. A markup language is a set of rules governing what markup information may be included in a document and how it is combined with the content of the document in a way to facilitate use by humans and computer programs. The idea and terminology evolved from the "marking up" of paper manuscripts, which is traditionally written with a red pen or blue pencil on authors' manuscripts.

Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

<span class="mw-page-title-main">Hyperlink</span> Method of referencing visual computer data

In computing, a hyperlink, or simply a link, is a digital reference to data that the user can follow or be guided by clicking or tapping. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. The text that is linked from is known as anchor text. A software system that is used for viewing and creating hypertext is a hypertext system, and to create a hyperlink is to hyperlink. A user following hyperlinks is said to navigate or browse the hypertext.

Mathematical Markup Language (MathML) is a mathematical markup language, an application of XML for describing mathematical notations and capturing both its structure and content. It aims at integrating mathematical formulae into World Wide Web pages and other documents. It is part of HTML5 and is a ISO/IEC standard ISO/IEC 40314 since 2015.

XUL, which stands for XML User Interface Language, is a user interface markup language developed by Mozilla. XUL is an XML dialect for writing graphical user interfaces, enabling developers to write user interface elements in a manner similar to web pages.

An HTML editor is a program for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience and added functionality. For example, many HTML editors handle not only HTML, but also related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design and page layout programs that are not dedicated to web design, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The most commonly used version is HTML 4.01, which became official standard in December 1999. An HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified. Elements can also have content, including other elements and text.

The blink element is a non-standard HTML element that indicates to a user agent that the page author intends the content of the element to blink. The element was introduced in Netscape Navigator but is no longer supported and often ignored by modern Web browsers; some, such as Internet Explorer, never supported the element at all.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements shown in a frame may come from a different web site as the other elements of content on display, although this practice, known as framing, is today often regarded as a violation of same-origin policy.

<span class="mw-page-title-main">CKEditor</span> WYSIWYG rich text editor

CKEditor 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 under open source and commercial licenses.

<span class="mw-page-title-main">TinyMCE</span> Online rich-text editor

TinyMCE is an online rich-text editor released as open-source software under the MIT License. It has the ability to convert HTML text area fields or other HTML elements to editor instances. TinyMCE is designed to easily integrate with JavaScript libraries such as React, Vue.js, AngularJS and Bootstrap as well as content management systems such as Joomla!, and WordPress.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several core CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages. It mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">CSS box model</span> Model used for styling websites

In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing property, the problem had mostly been resolved.

HTML5 Audio is a subject of the HTML5 specification, incorporating audio input, playback, and synthesis, as well as speech to text, in the browser.

ContentTools is an open-source WYSIWYG editor for HTML content written in JavaScript/CoffeeScript by Anthony Blackshaw of Getme Limited.

References

  1. "Rich-Text Editing in Mozilla". developer.mozilla.org.
  2. "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 (public-html@w3.org from May 2008)". Lists.w3.org. Retrieved 2010-09-23.
  3. "7 User interaction — HTML5". W3.org. Retrieved 2010-09-23.
  4. "TinyMCE | Editor Appearance". www.tinymce.com. Retrieved 2016-07-05.