DHTML Editing Made Easy

Nancy Winnick Cluts
Developer Technology Engineer
Microsoft Corporation

Posted March 30, 1998
Updated March 11, 1999

Incorporating "what you see is what you get" (WYSIWYG) editing into your HTML applications just got easier. The Dynamic HTML Editing Component is just about the easiest way to give your applications the familiar capabilities of WYSIWYG editing, while taking advantage of the DHTML-rendering capabilities available in Microsoft Internet Explorer 5 .

With this component in your application, the user can do everything from basic text-and-table formatting to resizing elements on the fly -- capabilities that users have to come to expect from HTML-based applications. In fact, this component is one easy way to add HTML editing capabilities to any Win32-based Windows application.

A Component You Can Use

The DHTML Editing Component is especially useful for incorporating editing into HTML-authoring applications, HTML Help, and HTML e-mail applications.

Corporate developers can include this control in Visual Basic® applications to build HTML-based forms for their application front ends. Let's say you have an expense form in HTML, which you would like employees to use via your corporate intranet. You can include this editing component to provide HTML editing for the HTML forms you have already created. Any application that uses HTML documents, or that targets HTML as its output, can benefit from the DHTML Editing Component.

Incorporating editing capabilities is easy for authors and developers alike. The editing component is accessed via the Component Object Model (COM), so any language that supports COM components (Visual Basic Scripting Edition, JScript™, Visual Basic, C, C++, or Visual J++) can be used to access the features of the editing component. In other words, using this component is just as easy as using any other pre-packaged component based on COM. Several independent software vendors have already started to incorporate the editing component into their applications. Visual InterDev 6.0 and Visual J++ 6.0, as well as Outlook Express, incorporate the editing component.

Features

The DHTML Editing Component provides basic editing capabilities that use Internet Explorer to render HTML. So the editing environment will always be in sync with the browsing environment. The Document Object Model provides notification of document events, and allows you to offer the following features:

Basic formatting, including bold and italics for selected text or an entire paragraph, adding images, changing the background color of any element, and text selection
The ability to insert and edit (add, delete, or change cells) tables on the fly
Undo and redo editing commands
Text search capability
The ability to drag and drop any object, text, or element anywhere on the page
Support for an invisible grid to help in positioning items on a page
Element resize

In addition, you can edit pages created with Active Server Pages technology seamlessly, without changing the original server script. You can also start with existing HTML, and the DHTML Editing Component will not change any of your original formatting (that is, the original white space and tags will remain).

Nancy Cluts, developer-technology writer first-class, gets her best DHTML tips from the other soccer moms.

The DHTML Editing Component: How to get it

The DHTML Editing Component is included in the minimum installation of Internet Explorer 5, so you can start developing with it as soon as you install the latest version of the browser. When you deploy your applications, users will need to have Internet Explorer 5 as well. To distribute Internet Explorer 5 with your application, you first need to license the Internet Explorer Administration Kit .

Lots more stuff

MSDN Online Web Workshop's DHTML Section also has a comprehensive data sheet and FAQ on the DHTML Editing Component.