Inside Technique : WYSIWYG HTML Editor : Going to Edit Mode

The editor demonstration on the first page consists of two files. The editor itself is its own HTML document that is embedded on a page using the IFRAME element. By separating the editing functionality into its own file, it is easy to reuse the editor across multiple pages. By itself the editor is just a basic text editor. The pop-up formatting toolbar is defined in the outer document and calls formatting methods on the editor. This allows you to build your own custom user-interface for the editor.

The secret behind the editor is Internet Explorer itself. When you are browsing, pages that are read-only to the user are completely customizable through script. This customization through the DOM works very much like an editor, and as we will demonstrate, is really an editor. To build the editor, all we do is tell Internet Explorer to switch from the read-only browse mode to a read-write editor. This is accomplished using a property on the document called designMode. This property has two values "On" and "Off". You can switch any document into edit mode by setting the designMode property to "On". This property is officially unsupported by Microsoft but is useful for creating simple editors. The long-term recommended approach is to use the Dynamic HTML Editing Component which is currently available in preview release.

DesignMode Property

When a document is in designMode, all scripts on the page are disabled. In addition, the designMode property can only be called on another document, so a page cannot switch itself into edit mode. Therefore, we built our editor as a separate, reusable HTML document. Then we use the IFRAME element to embed the editor on the page. This allows us to reuse the editor on many pages without duplicating the code.

Before we walk you through the details of our reusable editor, we show you how to add a simple plaintext editor to your page. Notice that it only takes 1 line of script:

<IFRAME WIDTH=200 HEIGHT=200 ID=myEditor></IFRAME>
<SCRIPT>
  frames.myEditor.document.designMode = "On"
</SCRIPT>

The above creates a rich text input box. However, you are limited to entering plain text because there is no defined user interface for adding the formatting commands. Next we show you how to use the text range object to add formatting buttons to your editor.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.