Enhancing Web Forms with Rich Text Editors
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.
What Is the Benefit of RTE and How Do You Use It?
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:
Here are some more examples from Yahoo's RTE.
And here is an example from Microsoft's new email service:
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.