http://www.developer.com/

Back to article

Enhancing Web Forms with Rich Text Editors


March 19, 2007

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.

Cross-Browser Rich Text Editor by Kevin Roth

So far, I have described custom RTEs on popular sites, but if you want to install one in your own project, you do not have to write it from scratch. One of the popular RTEs has been around since 2003* and was written by Kevin Roth. It is licensed under Creative Commons License, which means you can freely use it on your site, but there is also an option to buy the "uncompressed" source from the author. This RTE supports all major browsers and, if it is loaded on an unsupported version, it will just show a text area. The amount of supported formatting and editing commands varies per browser, but is very impressive for one man's work. Please see the references section for a link to the feature matrix.

* In 2003, this RTE won a Planet Source Code superior coding contest.



Click here for a larger image.

To implement Kevin's RTE, download the source code, unzip it someplace in the web server's directory structure, and add a reference to the main JavaScript file in the HEAD tag of the form page where RTE should appear. For example, if you extracted to /js/rte, insert this reference to the script:

<script language="JavaScript"
        type="text/javascript"
        src="js/rte/richtext_compressed.js"></script>

To initialize the RTE, call an API function:

//Usage: initRTE(imagesPath, includesPath, cssFile)
initRTE("images/", "", ""); 

Inside the form, exactly in the spot where rich text editor is to appear, add something like this:

<script language="JavaScript" type="text/javascript">
<!--
writeRichText('myRTE', '', 400, 200, true, false);

//Usage: writeRichText(fieldname, html, width, height, buttons,
//                     readOnly)

//-->
</script>

myRTE is the name of the editor, and it should be unique on the form. The next parameter is pre-populated text (with HTML markup), which is useful if there was a problem and the form needs to be re-displayed back to the user. The other parameters are self explanatory.

Note: This version of the RTE will create the <textarea>, and it will not attach the existing one as you will see in some other implementations. Due to this, before the form is submitted to the server, the RTE needs to sync its content to submit everything properly. To sync another API, JavaScript function needs to be called on the onSubmit event of the form. Actually, there are two functions, one if there is only one RTE on the form and another if there are multiple.

updateRTE('myRTE');

or

updateRTEs();

You can put the calls to the init and update functions in the same JavaScript code block. Also, if you choose to do something else when the form is submitted, you can put the call to update in a wrapper function. For example:

<form name="myform" onsubmit="return checkForm();">

<script language="JavaScript" type="text/javascript">
<!.

initRTE("images/", "", "");

function checkForm()
{
   // do something here . check the form
   // make sure hidden and iframe values are in sync before
   // submitting form
   updateRTE('myRTE');

   // use this when syncing only 1 rich text editor ("myRTE" is the
   // name of the editor)
   // updateRTEs();     // if there are multiple rich text editors
                        // inside the form

   return true;
   }    //-->
</script>

The install of this RTE is straightforward; under the hood, it includes a lot of features. If you are looking for a quick way to add an RTE to your form, you may want to consider this implementation.

The DOJO Editor (and Editor2)

Dojo is an AJAX/JavaScript framework in its beta stage (version 0.4.3). I have covered it in some detail in my previous article. One of the widgets that comes with its core installation is Dojo Rich Text Editor contributed to Dojo, written by Paul Sowden and David Schontzler. As with the framework, the Editor is licensed under the Academic Free License.

Here is Dojo's RTE (limited):

After you install Dojo, to use the Dojo's RTE it needs to be loaded. For example:

<script type="text/javascript"
        src="js/dojo/dojo.js"></script>
<script>
   dojo.require("dojo.widget.Editor");
</script>

The editor is highly configurable, and has a lot or features; however, be prepared to look through a lot of badly placed documentation. It also seems that most of the documentation is pointing to the version 1 of the editor, which has been upgraded to version 2 somewhere between Dojo 0.4.1 and 0.4.3.

To insert the Dojo RTE, a custom type can be added to the <textarea>, among other ways. For example:

<textarea dojoType="Editor"
          items="bold;italic;underline;strikethrough;|;createLink;">
</textarea>

For more information on this RTE, please see the reference guide by Paul Sowden and David Schontzler.

Xinha Editor

Among the three RTEs that you can install, Xinha is the most stable and feature rich. Everything in Xinha is customizable. It comes with a spell-check interface, a powerful plug-in interface, customizable CSS based "skins," and even a context menu. It supports all the major browsers, and is available as Open Source. There is also a version of this RTE for the popular blogging package WordPress. The plug-in mechanism allows it to be extended even further.

Xinha is released under the original htmlarea license, a BSD-style license. This means you can freely use it and any code contributions are welcome. Xinha is used on many sites, such as WorldClient email software, DealOgre.com, and others.

Here is the screenshot of Xinha with most of its options turned on.



Click here for a larger image.



To install Xinha, extract the downloaded source someplace in the web server directory structure. Create a config file—for example, my-config.js—to contain your settings. If you want to customize the appearance of the RTE, also place it in the Xinha folder. Include the initialization code and attach the editor to existing <textarea>.

The default plug-ins are:

  • 'CharacterMap'
  • 'ContextMenu'
  • 'ListType'
  • 'SpellChecker'
  • 'Stylist'
  • 'SuperClean'
  • 'TableOperations'

Adding Xinha to the form is very straightforward. Here is the initialization logic for the form:

<script type="text/javascript">
        _editor_url  = "js/ext/xinha/"
// (preferably absolute) URL (including trailing slash) where Xinha
// is installed
        _editor_lang = "en";    // And the language we need to use
                                // in the editor.
</script>
<script type="text/javascript"
        src="js/ext/xinha/htmlarea.js"></script>
<script type="text/javascript"
        src="js/ext/xinha/my-config.js"></script>

Here is the example code text area

<textarea id="vlad"
          name="vlad"
          rows="10"
          cols="50"
          style="width: 80%"></textarea>

Please make sure that the textarea has an id and a name that match.

In the config file (my-config.js), point to the text area(s).

xinha_init = xinha_init ? xinha_init : function()
{
   xinha_editors = xinha_editors ? xinha_editors :  [ 'vlad'  ];
   ... And start the RTE ...
   Xinha.startEditors(xinha_editors);
}
Xinha._addEvent(window,'load', xinha_init);

If you want to change look-and-feel, you can specify one of the pre-packaged CSS skins or create your own.

HTMLArea.loadStyle("/js/ext/xinha/skins/blue-look/skin.css");

For more customization options and how to configure plug-in please see the Xinha Developers guide.

If you are looking for a free, customizable, and stable RTE, give Xinha a close look. The documentation is well written, and there is an active user forum where developers can submit questions. The plug-in mechanism is very powerful and makes this RTE a very strong contender in the web RTE area.

Conclusion

In this article I have looked at different Rich Text Editors implemented in JavaScript and DHTML. I have examined which editors are used on the major web sites, and have covered how to implement the RTE in your own web-based project. The diversity of the implementations, and the fact that each major site has its own version, clearly indicates that competition is high in the already fragmented area of the web Rich Text Editors. It will be interesting to see if one editor will emerge as de facto RTE or some sort of a common code base will be implemented in the future. For now, web users just have to get accustomed to different look-and-feel of the Rich Text Editors online.

References

About the Author

Vlad Kofman works on enterprise-scale projects for the major Wall Street firms. He has also worked on defense contracts for the U.S. government. His main interests are object-oriented programming methodologies, UI, and design patterns.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date