Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : HTML Text Editor
By Scott Isaacs

Last week Microsoft released the Internet Explorer 5.0 developer's preview. With Internet Explorer 5.0, Microsoft is taking Dynamic HTML to new levels by greatly improving the object model and developer features. Each week, we are going to publish an article covering new features and techniques for Internet Explorer 5.0. Our first articles will demonstrate features and help provide technical background their use. Keep in mind IE 5.0 is currently only a developer's preview and any features discussed may be changed by Microsoft before the final release. If you experiment with IE5, be sure to provide Microsoft with your feedback.

In our first article we introduce two very exciting new Internet Explorer 5.0 features:

  1. HTMLArea Element for rich text editing
  2. Using DHTML Behaviors for adding new behaviors to your web-page

The HTMLArea element creates an input control that is analogous to the existing HTML TextArea element. The one difference is the HTMLArea supports the formatting and entry of rich HTML. The HTMLArea element is a block element and is embedded on the page as follows:

  <P>Initial <B>HTML</B> Value

By itself, the HTMLArea element looks and feels just like a standard TextArea as currently there is no built-in user-interface to allow the user to format the contents. To make the HTMLArea really useful, you currently must combine it with a small amount of DHTML script.

Below we create a fairly simple HTML editor. In Internet Explorer 5.0, you will see a functional HTML editor for creating and editing rich HTML. In all other browsers, you are seeing the user-interface for the editor, but no input box as the HTMLArea element is being ignored:

Hello World!

The results are very cool for IE5 users, but unfortunately, not acceptable for other browsers. I could have written the traditional browser detection code to present a standard textbox to existing browsers. However, to do this correctly requires the page designer to have knowledge of scripting. Without it, getting this to work properly would be quite a challenge.

As a web designer, this can be quite frustrating. Cross and down-level browser development looks to be getting more difficult. With Internet Explorer 5.0 this is not so. IE 5.0 provides an elegant solution for soloving the legacy browser issue. But before we explain the solution, we first demonstrate how we built the editor, followed by a discussion on how to make it cross-browser and downlevel friendly.