Today, most web applications have the ability for the user to share various types of information. Blogs allow readers to post comments, email clients are fully web-based, social wiki sites let people submit revisions, and so forth. All of this is possible because of the oldest HTML element—the <form>.The form is submitted via the HTTP protocol to the server, and its individual elements, such as text fields and text areas are processed on the server—for example, stored in the relational database—emailed, or put into a flat file. By default, the form is submitted as plain text, which is not a good way to express any formatting or styles of the contents. For example, if you want to emphasize some words, and type your text in a standard text area, you have no way to make some words stand out or even use a different font.
The general solution is to use HTML markup with the text, to indicate the formatting and styles. In this article, I will look at several implementations of Rich Text Editors (RTE) that dynamically apply HTML markup to plain text before it is submitted to the server. I will show how to install several versions of the editor widgets, and then compare them.
What Is the Rich Text Editor (RTE)?
With the advancements in desktop technologies, modern word processors have added a great variety of formatting options. The ability to have the content appear the same (or very close to) as the final formatting, also known as What You See Is What You Get (WYSIWYG), existed on the desktop for quite some time.
To allow web users to change formatting of the text, web sites need to implement the Rich Text Editor in JavaScript (with the functionality mimicking the word processors). Some Ajax or JavaScript frameworks offer RTE as a widget. The RTE is also known as the JavaScript WYSIWYG editor because it follows the What You See Is What You Get methodology.
Typically, web RTE is a standard <textarea> that is "enhanced" with DHTML and JavaScript to provide formatting and editing functionality. For example, when composing email with an online email client, senders can change the text style with the RTE:
Click here for a larger image.
What Is the Benefit of RTE and How Do You Use It?
The major benefit is that users can apply rich formatting, such as different fonts, headings, margins, background and foreground colors, and other styles to the content that they are submitting. Users do not need to know HTML and even those who do know HTML do not have to type it by hand. For example, when you send web-based email and select some text to be bold using the RTE, under the hood, JavaScript Engine surrounds the text with the <b></b> tags.
After the text has been marked up with HTML tags and is sent to the server, any HTML authoring tool, email client, or web client will be able to reproduce the submitted text with preserved formatting. Therefore, the rightness of the text and its presentation makes submitted text much more visually advanced and user-friendly.
Many RTE implementations also feature other enhancements, such as spell checking with multiple language dictionaries, link insertions, image insertions, right-click context menus, and even HTML clean up (if HTML is pasted from sources such as MS Word).
Because most modern email clients understand how to parse and show HTML, RTE is a must for any web-based email program. For example, all the major web email services use some RTE on their pages. Other web 2.0 sites, such as web deal aggregator DealOgre.com (www.dealogre.com) are also using RTE to improve the users' experience with entering text descriptions.
Here is the screenshot of the RTE used on DealOgre.com:
Click here for a larger image.
Here are some more examples from Yahoo's RTE.
Click here for a larger image.
And here is an example from Microsoft's new email service:
Click here for a larger image.
Note that, by default, this RTE is not turned on in the Microsoft mail site, and even when turned on it has some limitations compared with other RTE implementations. For example, the background color button fills the whole area with the same color, even if some text is selected.
Google's Gmail is not as fancy as Yahoo's version, but does the job and is very stable across multiple browser versions.
Click here for a larger image.
IE 7
Firefox 2.0
