dynamic html editing component sample applications

february 22, 1999

welcome to the dhtml editing component samples. you can use the sample applications to see the editing component in action and get ideas for your own application, and as tutorials that illustrate how to use both the dhtml editing component document object and activex control.

if you are reading this page, you've already installed the dhtml editing component samples. the dhtml editing component itself is installed as part of microsoft internet explorer 5.

note all sample applications are designed to run with the version of the dhtml editing component that is part of microsoft internet explorer 5. however, they should run properly with internet explorer 4 if you use the version of the dhtml editing component that was available as the dhtml editing component sdk.

when you download and install the samples, the following directories are created:

directory	contents
\root	a root directory under which the samples are installed. the default is \dhtmsamp.
\root\inc	the include files for c++, microsoft visual basic®, vbscript, and jscript®.
\root\samples	the source code and executables for the samples. in the samples directory are further directories, one for each standalone sample application, and another directory tree for the sample applications written as web applications.

the following sections provide an overview of the sample applications. the location column in the tables refers to a folder under the root samples directory.

c++ sample applications

location run description

\samples\cedit cedit.exe a fully functional mfc-based mdi application. cedit illustrates how to use the dhtml editing component document object from c++. for more details, see the file cedit.htm in the \samples\cedit directory.

location	run	description
\samples\cedit	cedit.exe	a fully functional mfc-based mdi application. cedit illustrates how to use the dhtml editing component document object from c++. for more details, see the file cedit.htm in the \samples\cedit directory.

visual basic sample applications

location run description

\samples\vbedit vbedit.exe
a simple html editor written in visual basic that uses the dhtml editing control and that demonstrates how a host's user interface can be tightly integrated with the dhtml editing control. the toolbars and menus in the vbedit sample application are used to send commands to the dhtml editing control; their state is updated based on events from the control. the vbedit sample also demonstrates how a dynamic context menu can be implemented by a host.

note see the notes following this table for information about running this sample.

\samples\vbdom vbdom.exe demonstrates how to access the dhtml editing control's document object model (dom) using visual basic. the dom is the primary api for modifying an html document using the dhtml editing component. this sample shows how to:

access the dom's document object using the control's dom property
sync and respond to dom events on selected document elements
determine the element directly under the selection point
use the css object model to add style sheets dynamically

\samples\htmldrop htmldrop.exe shows how to build a toolbox in visual basic from which you can drag elements onto the control and position them within a document. the sample demonstrates how to use the cf_html clipboard format to insert html into a document and how to use the absolutedropmode property to position html elements that are dragged onto the document.

location	run	description
\samples\vbedit	vbedit.exe	a simple html editor written in visual basic that uses the dhtml editing control and that demonstrates how a host's user interface can be tightly integrated with the dhtml editing control. the toolbars and menus in the vbedit sample application are used to send commands to the dhtml editing control; their state is updated based on events from the control. the vbedit sample also demonstrates how a dynamic context menu can be implemented by a host. note see the notes following this table for information about running this sample.
\samples\vbdom	vbdom.exe	demonstrates how to access the dhtml editing control's document object model (dom) using visual basic. the dom is the primary api for modifying an html document using the dhtml editing component. this sample shows how to: access the dom's document object using the control's dom property sync and respond to dom events on selected document elements determine the element directly under the selection point use the css object model to add style sheets dynamically
\samples\htmldrop	htmldrop.exe	shows how to build a toolbox in visual basic from which you can drag elements onto the control and position them within a document. the sample demonstrates how to use the cf_html clipboard format to insert html into a document and how to use the absolutedropmode property to position html elements that are dragged onto the document.

the visual basic samples require visual basic 5.0 or later to run. the visual basic sample executable files have been compiled with visual basic 5.0. if you are working with visual basic 6.0, you must recompile the samples before running them.

you can run the visual basic sample applications by loading the projects into visual basic and running the samples there. alternatively, you can rebuild the sample .exe files and then run them. if you experience errors when trying to run the .exe files, open the sample application's visual basic project and recompile the sample.

web-based sample applications

location view in internet explorer description

\samples\web\hellowld hellowld.htm hosts the dhtml editing control on a web page and demonstrates how to load html into the control either from memory, using the control's documenthtml property, or from the file system, using the control's common dialog support.

\samples\web\toolbars\doc tutorial.htm illustrates how to create toolbars and menus, implemented completely in dynamic html. toolbars can look and act like microsoft office toolbars (the default), or can be changed. several of the web samples, such as webedit, use the toolbars package to implement html editing applications within a web page. the tutorial.htm file provides details about how the toolbars and menus are implemented.

\samples\web\webedit fulledit.htm and nomenus.htm shows how to implement an html editor on a web page using the dhtml editing control and the toolbars package (see previous). this sample application has many of the component's editing commands available in a dhtml toolbar and a context menu.

\samples\web\domusage domusage.htm shows how to use the dhtml editing component to perform real-time document structure analysis. it also shows more ways to use the dom, implementing sentence, image, and header counting and a document outline. the outline window is initially turned off; click the "enable outline" button at the bottom of the document to turn it on. to see document analysis results, type in new text or open an existing document. note that the implementation of the outline is very simplistic and therefore can be slow.

\samples\web\webapp builded.htm shows how to build a client/server web application that uses the dhtml editing control to edit documents from the internet or intranet and post the results to a web server. this demo shows one technique for using the component with documents that are stored on a web server instead of the local file system. you will need to put this demo on a web server to open files over your intranet.

note the webapp sample application requires microsoft internet information server 4.0 to run correctly.

location	view in internet explorer	description
\samples\web\hellowld	hellowld.htm	hosts the dhtml editing control on a web page and demonstrates how to load html into the control either from memory, using the control's documenthtml property, or from the file system, using the control's common dialog support.
\samples\web\toolbars\doc	tutorial.htm	illustrates how to create toolbars and menus, implemented completely in dynamic html. toolbars can look and act like microsoft office toolbars (the default), or can be changed. several of the web samples, such as webedit, use the toolbars package to implement html editing applications within a web page. the tutorial.htm file provides details about how the toolbars and menus are implemented.
\samples\web\webedit	fulledit.htm and nomenus.htm	shows how to implement an html editor on a web page using the dhtml editing control and the toolbars package (see previous). this sample application has many of the component's editing commands available in a dhtml toolbar and a context menu.
\samples\web\domusage	domusage.htm	shows how to use the dhtml editing component to perform real-time document structure analysis. it also shows more ways to use the dom, implementing sentence, image, and header counting and a document outline. the outline window is initially turned off; click the "enable outline" button at the bottom of the document to turn it on. to see document analysis results, type in new text or open an existing document. note that the implementation of the outline is very simplistic and therefore can be slow.
\samples\web\webapp	builded.htm	shows how to build a client/server web application that uses the dhtml editing control to edit documents from the internet or intranet and post the results to a web server. this demo shows one technique for using the component with documents that are stored on a web server instead of the local file system. you will need to put this demo on a web server to open files over your intranet. note the webapp sample application requires microsoft internet information server 4.0 to run correctly.

as a convenience for using the dhtmledit control in javascript and vbscript, the files dhtmled.js and dhtmled.vbs are provided in the \inc directory. you can include these files in your web page with a <script> tag, using syntax such as the following:

<script language="javascript" src="\<root>\inc\dthmled.js">

or

<script language="vbscript" src="\<root>\inc\dthmled.vbs">

where <root> is the directory into which you installed the samples.

by including these files, you can use symbolic constants as parameters for the control's execcommand method rather than using explict numeric values. using dhtmled.js and dhtmled.vbs is highly recommended for future compatibility with the control's command set and dependent objects. see the fulledit.htm file in the webedit sample application for an example of how to include this file in a web page.