This tutorial describes how to use features found in Microsoft Internet Explorer 5.5 or later to create an HTML Editor Application. The application you create in this tutorial contains an editable region where users can type and format text using all of the standard formatting commands. For example, users can make the text bold or italic, change the font size, and make bulleted or numbered lists. A toolbar provides the formatting buttons, buttons for opening and saving files, and drop-down list boxes for font and block formatting selections. A menu allows alternate access to the functionality provided by the toolbar. As of Internet Explorer 6, you can also use the Dialog Helper object to change the face or color of the font.
With this HTML Editor Application, users can create HTML documents and save them to disk in either HTML or text format. If saved as an .htm file, the documents are viewable in Internet Explorer or in the HTML Editor Application. Files saved as .txt can be viewed in any text editor.
This tutorial demonstrates how to do the following:
You can leverage this kind of application to allow "what you see is what you get" (WYSIWYG) content editing of Web sites by users. You can also use this type of application as an editor for an Internet e-mail program.
Requirements and Dependencies
Developers who want to create an HTML editor as described in this tutorial should be familiar with Microsoft JScript and Dynamic HTML (DHTML). Knowledge of element behaviors is also helpful.
The CommonDialog
control used in this tutorial to display the
Open and
Save As dialog boxes is a licensed control that requires a valid design-time license. You can run the sample, but you cannot create this functionality unless you have Microsoft Visual Basic or Microsoft Visual InterDev installed on your development machine. For more information, see
HOWTO: Set Up Internet Download for Comdlg32.ocx .
You can use any HTML development environment, such as Visual InterDev, to complete this tutorial. Visual InterDev is a good choice because it provides a design-time license for the CommonDialog control.
Most of the technology described in this tutorial is supported by Internet Explorer 5.5 or later, with the notable exception of the Dialog Helper object, which requires Internet Explorer 6.
This tutorial requires a number of dependent files in order to function properly, including icons for the toolbar buttons, and two HTML Components (HTCs). All of these files are included in the HTML Editor
sample download. Before you get started with the tutorial, you need to download the
HTML Editor sample. Follow the steps on the download page before continuing to Implementation Steps.
Implementation Steps
This section describes, step-by-step, how to create a WYSIWYGHTML Editor HTA.
Step 1: Create the HTML file
The HTML file that you create in this step serves as the foundation for the features you add as the tutorial progresses.
- Create an HTML file. This file should contain the standard HTML tags, including HTML, HEAD, and BODY. You can also add a TITLE element in the HEAD section if you like. The following code sample shows what the HTML should look like.
<HTML> <HEAD> <TITLE>HTML Editor</TITLE> </HEAD> <BODY STYLE="overflow:hidden; margin:0px"> </BODY> </HTML>
- Add a DIV element in the BODY section. This DIV element is the container for the all of the user interface (UI) elements in the application.
<DIV ID="oContainer" STYLE="background-color:threedface; border:1px solid #cccccc; position:relative; height:100%; top:0;">
Place the closing DIV tag directly above the closing BODY tag. - Add the DIV element that serves as the editing region. Place this DIV inside the oContainerDIV element and set the CONTENTEDITABLE attribute. Give the DIV element an ID value of oDiv and set the STYLE properties of the DIV. The following code shows you how to set all the necessary attributes of the DIV.
<DIV ID=oDiv CONTENTEDITABLE STYLE="height:80%;background-color:white; overflow:auto; width:100%;"> </DIV>
- Add a SCRIPT block in the HEAD section and create a function that is called when the application initializes. The doInit function sets the focus on the DIV and sets the UNSELECTABLE attribute for all elements of the document. Later in the tutorial, you will add more code to this function.
<SCRIPT> window.onload=doInit function doInit(){ // Ensure that all document elements except the content editable DIV are unselectable. for (i=0; i<document.all.length; i++) document.all(i).unselectable = "on"; oDiv.unselectable = "off"; // Clear any text in the Document window and set the focus. oDiv.innerHTML=""; oDiv.focus(); } </SCRIPT>
- Name the file something meaningful and save the page with an .htm extension in the directory where you downloaded the sample files.
Note As you work through the tutorial, be careful not to name any of the files you create HTML_Editor, or you might overwrite the sample application. The sample application should be left as a reference to consult while working through this tutorial.
Step 2: Create the Toolbars
In this step, you use the WebControlsToolbarelement behavior to add two toolbars. The toolbars contain ToolbarButton, ToolbarDropDownList, and ToolbarSeparator elements that implement common document editing functionality by using execCommand along with formatting commands like Bold and ForeColor.
- Declare the following namespace for the toolbar inside the opening HTML tag.
xmlns:mytb
- Add the IMPORT statement, shown in the following example, between the opening HTML tag and the opening HEAD tag. The IMPORT statement points to the toolbar element behavior that uses the same namespace declared in the HTML element.
<?IMPORT namespace="mytb" implementation="toolbar.htc">
After you declare the namespace and add the IMPORT statement, all that is left to do to create a basic toolbar is to add the elements in the BODY section. - Add the first Toolbar element and child elements in the BODY of the document, inside the oContainerDIV element, directly above the oDivDIV element.
Two Toolbar elements are used so that they display on two separate rows.
The following example shows the oToolbarToolbar element. Show Example
- Add the second Toolbar and child elements, shown in the following example, in the BODY of the document, directly below the first Toolbar element.
Note The order of the elements in the HTML source code dictates the order of the elements displayed on the rendered page. Be careful to add each element in its proper place to ensure proper rendering.
Show Example
At this point, you have an application that is beginning to look like an editor, although the toolbar buttons will not function until you add the code to implement the functionality behind the buttons. Your application should look like the following example. Step 3: Create the Text Formatting Functions
The functions created in this step are from the ToolbarButton elements created in the last step. These include a function that executes most of the formatting commands used in this sample as well as functions to change the fontSize property and to change the alignment of the text.
You also create the Dialog Helper object and write functions that use this object to display the color dialog box and change the ForeColor or BackColor, based on the user‘s selection. You also write functions that utilize the Dialog Helper object to retrieve an array of fonts and an array of block formats installed on the user‘s system, populate ToolbarDropDownList elements on the ToolbarButton with these arrays, and change the font or format of the selection in the editable region based on the user‘s selection.
Create all of the functions in this step in the
SCRIPT block.
- Create a function called callFormatting with a single input parameter that calls the execCommand method. The parameter passes the appropriate Command Identifiers to the function based on which ToolbarButton is clicked.
function callFormatting(sFormatString){ document.execCommand(sFormatString); }
- Add an onclick event to each of the toolbar buttons that use the callFormatting function. Use the following BoldToolbarButton element as an example, and then replace the BoldCommand Identifier with the appropriate Command Identifier in the list that follows the example.
<mytb:TOOLBARBUTTON IMAGEURL="UI_bold.gif" title="Bold" <!--This is the line to add --> onclick="callFormatting(‘Bold‘);"/>
The ToolbarButtons that call this method are: Bold, Italic, Underline, StrikeThrough, SuperScript, SubScript, Cut, Copy, Paste, Undo, Redo, InsertOrderedList, Insert, UnorderedList, Outdent, Indent, JustifyLeft, JustifyCenter, and JustifyRight.
As you can see, most of the formatting functionality is accomplished with one simple line of code using the execCommand method and the proper Command Identifier. For clarity, the ToolbarButton titles match the Command Identifier that is passed to the function. Use this example as a check point for your application. Both applications should look and function the same way. You can use the source code of the example to compare to your application.
- Create a function called changeFontSize to change the fontSize property based on the value chosen in the oFontSizeToolbarDropDownList.
function changeFontSize(){ var sSelected=oToolBar.getItem(6).getOptions().item(oToolBar.getItem(6).getAtt ribute("selectedIndex")); document.execCommand("FontSize", false, sSelected.value); }
- Add an onchange event to the oFontSizeToolbarDropDownList element that calls the changeFontSize function.
onchange="changeFontSize();"
- Create a function called VerticalMode that uses the writingMode property to toggle the alignment of the editable region from vertical alignment to horizontal alignment.
function VerticalMode(){ if (oDiv.style.writingMode == ‘tb-rl‘) oDiv.style.writingMode = ‘lr-tb‘; else oDiv.style.writingMode = ‘tb-rl‘; }
- Add an onclick event to the Vertical AlignmentToolbarButton element that calls the VerticalMode function.
onclick="VerticalMode();"
- Add the object element at the top of the BODY section to create the Dialog Helper object. You must have Internet Explorer 6 or later to complete this step and subsequent steps.
<OBJECT ID=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" WIDTH="0px" HEIGHT="0px"></OBJECT>
- Create a function called getSystemFonts that uses the fonts collection of the Dialog Helper object to return an array of the names of all of the fonts installed on the user‘s system and then creates a ToolbarDropDownList element on the Toolbar and populates the OPTION elements with the names of the fonts. The code in this function also detects the onchange event and calls a function called ChangeFont.
Show Example
- Add a call to the getSystemFonts function to the end of the doInit function so that the ToolbarDropDownList element is populated when the application initializes.
getSystemFonts();
- Create a function called ChangeFont that uses the execCommand method and the FontName command to change the fontFamily of the selection in the editable region.
function ChangeFont(){ var sSelected=oToolBar.getItem(4).getOptions().item(oToolBar.getItem(4).getAtt ribute("selectedIndex")); document.execCommand("FontName", false, sSelected.text); }
- Create a function called getBlockFormats that uses the fonts collection of the Dialog Helper object to return an array of the names of all of the block formats installed on the user‘s system and then creates a ToolbarDropDownList on the Toolbar and populates the OPTION elements with the names of the block formats. The code in this function also detects the onchange event and calls a function called ChangeFormat.
Show Example
- Add a call to the getBlockFormats function to the doInit function so that the ToolbarDropDownList element is populated when the application initializes.
getBlockFormats();
- Create a function called ChangeFormat that uses the execCommand method and the FormatBlock command to change the block format of the selection in the editable region.
function ChangeFormat(){ var sSelected=oToolBar.getItem(5).getOptions().item(oToolBar.getItem(5).getAtt ribute("selectedIndex")); document.execCommand("FormatBlock", false, sSelected.text); }
- Create a global variable called sInitColor and set it equal to null. This variable holds the color that is chosen by the user when the color dialog box displays. The application "remembers" this choice and it will be the selected color the next time the color dialog box displays.
var sInitColor = null;
- Create a function called callColorDlg that calls the ChooseColorDlg method of the Dialog Helper object. The ChooseColorDlg method displays the color dialog box, returns the user‘s color selection in sColor, then applies the color choice using the ForeColor or the BackColor command, according to what is passed in sColorType.
Show Example
At this point, you can use the application to create and format an HTML document, creating WYSIWYGHTML Web pages. Use this example as a check point for your application. Both applications should look and function the same way. You can use the source code of the example to compare to your application. To become a fully functional editing application, the next step is to provide a way to save documents, to open existing documents, and to create new documents.
Step 4: Create the File New, File Open, and File Save Functions
The CommonDialog control is an Microsoft ActiveX control that provides an easy way to display the Open and Save As dialog boxes. After you declare the CommonDialog object, you can write one line of code that displays a dialog box.
Note The
CommonDialog control is a licensed control that is available only to developers with Visual Basic or Visual InterDev installed on their development machine. If you do not have a license to use the
CommonDialog control, skip to
Step 5: Create the Menu.
- Create a global variable called sPersistValue.
var sPersistValue
This variable holds the value of the innerHTML property of oDiv when the div is saved. This value is then compared to the value of innerHTML property of oDiv in the checkForSave function to determine whether to prompt the user to save the current document before opening an existing document or creating a new document. This variable must be declared before the functions that use it. The easiest way to ensure this is to place the variable declaration at the beginning of the script block. - Create a function called checkForSave that determines whether the contents of the editable region have changed and optionally uses the showModalDialog method to display a modal dialog box that asks the user whether to save the changes to the current document before proceeding. For information on using modal dialog boxes, see Creating and Using Modal Dialog Boxes.
This function is called by the NewDocument and LoadDocument functions. The dCheckForSave.htm file is provided for you in the sample directory.
function checkForSave() {if ((oDiv.innerHTML!=sPersistValue)&&(oDiv.innerHTML !="")) var checkSave=showModalDialog(‘dcheckForSave.htm‘,‘‘,‘dialogHeight:125px;dialo gWidth:250px;scroll:off‘); else var checkSave=false; return checkSave }
- Create a function called NewDocument that calls the checkForSave function. If the document in the editable region has changed, then the SaveDocument function is called before a new document is created by clearing the innerHTML property of oDiv.
function NewDocument(){ var answer = checkForSave(); if (answer) {var sCancel = SaveDocument(); if (sCancel) return; oDiv.innerHTML="";} if (answer==false) oDiv.innerHTML=""; oDiv.focus(); }
- Add an onclick event to the New DocumentToolbar element that calls the NewDocument function.
onclick="NewDocument();"
- Create the CommonDialogOBJECT in the BODY section, directly below the dlgHelperOBJECT.
<OBJECT ID="cDialog" WIDTH="0px" HEIGHT="0px" CLASSID="CLSID:F9043C85-F6F2-101A-A3C9-08002B2F49FB" CODEBASE="http://activex.microsoft.com/controls/vb5/comdlg32.cab"> </OBJECT>
- Create a function called LoadDocument that displays a Open dialog box, and then opens a FileSystemObject to read the contents of the file chosen by the user and display it in the editable region.
Show Example
- Add an onclick event to the Open DocumentToolbar element that calls the LoadDocument function. The Open DocumentToolbar element should look like the following example.
<mytb:TOOLBARBUTTON IMAGEURL="UI_open.gif" title="Open Document" onclick="LoadDocument();" />
- Create a function called SaveDocument that displays the Save As dialog box and then opens a FileSystemObject to write the contents of the document in the editable region to the file chosen by the user.
Show Example
- Add an onclick event to the Save DocumentToolbar element that calls the SaveDocument function.
- To enable users of the HTML Editor access to the Open and Save As dialog boxes on a computer without a license for the CommonDialog control, you must generate a license package file (LPK). To create this file, follow the procedures outlined in HOWTO: Use Licensed ActiveX Controls in Internet Explorer and HOWTO: Set Up Internet Download for Comdlg32.ocx . After you have created the .lpk file and followed the instructions for creating the licensing object as outlined in these articles, you have an .lpk file in the sample directory, and the licensing object is declared in the BODY of the sample application, as in the following example.
<OBJECT CLASSID="clsid:5220cb21-c88d-11cf-b347-00aa00a28331"> <PARAM NAME="LPKPath" VALUE="comdlg.lpk"> </OBJECT>
You will also have a CODEBASE attribute for the cDialog object, as in the following example. CODEBASE="http://activex.microsoft.com/controls/vb5/comdlg32.cab"
-
In most cases, HTML pages do not have access to the local file systems of client machines. For purposes of this sample it means that the user cannot open and save local files as long as the application is an HTML file. This is by design for security reasons. Because HTAs can do anything that other locally accessed applications can do, HTAs do not have this limitation. For more information, see Introduction to HTML Applications (HTAs).
Add the HTA element in the HEAD section directly below the title element. Show Example
- Give the file a meaningful name and save the page with an .hta extension in the directory where you downloaded the sample files.
Note Do not name the file HTML_Editor, or you will overwrite the sample application.
At this point, the application is fully functional. All of the button routines are operational and the application should work as a full-featured WYSIWYGHTML content editor. Use this example as a check point for your application. Both applications should look and function the same way. You can use the source code of the example to compare to your application. The next steps outline how to create a menu and splash screen to add a professional look to the application.
Step 5: Create the Menu
The menu you create in this step implements a subset of the functionality provided by the ToolbarButton elements. You can extend the menu to include any of the items on the ToolbarButton, as well as any other functions you want to provide your users.
- Declare the namespace for the menu inside the opening HTML tag. The HTML tag should look like the following example.
<HTML xmlns:mytb xmlns:mymenu>
- Add the IMPORT statement that points to the menu element behavior and that uses the same namespace declared in the HTML element.
<?IMPORT namespace="mymenu" implementation="menu.htc">
After you declare the namespace and add the IMPORT statement, all that is left to do to create a menu is to add the markup tags. - Add the menu elements and child elements to the BODY of the sample application, directly above the oToolBarToolbarButton element. Explicitly set the background color of the menu so that it won‘t be affected by individual desktop settings.
Show Example
- Create a function called CallMenuFunction that uses a switch statement to call the formatting functions created in Step 3: Create the Text Formatting Functions. The switch operates on the value of the ID attribute of the menu items.
Show Example
- Add an event called onsubmenu_click to the opening tag of each of the top-level menus: File, Edit, Format, and Help. This event calls the CallMenuFunction function.
<mymenu:menu id="File" onsubmenu_click="CallMenuFunction();">
Step 6: Create the Splash Screen
A splash screen adds a professional look to any application and is easy to implement using the HTML+TIME default behavior.
- Declare the namespace for the HTML+TIME element behavior inside the opening HTML tag.
xmlns:t ="urn:schemas-microsoft-com:time"
- Add the IMPORT statement that uses the same namespace declared in the HTML element.
<?IMPORT namespace="t" implementation="#default#time2">
- Add the style element in the HEAD element, directly above the title element.
<style> .time { behavior: url(#default#time2) } </style>
- Create a global variable called oPopup and use it to create a new pop-up window using the createPopup method. This variable must be declared before the functions that use it; therefore, place the variable declaration at the beginning of the script block.
var oPopup = window.createPopup();
- Create a function called goContext that displays the pop-up window.
function goContext() {var oPopupBody = oPopup.document.body; oPopupBody.innerHTML = oContext.innerHTML; oPopup.show(175, 125, 400, 300, document.body); document.body.onmousedown = oPopup.hide; }
- Add the HTML+TIME element in the BODY section, directly below the OBJECT elements. The pop-up window displays for 5 seconds and then disappears.
<t:animate dur="5" onend="oPopup.hide();"/>
- Add the div elements that serve as the display for the splash screen directly below the HTML+TIME element.
Show Example
- Add a call in the goContext function to the doInit function so the splash screen displays when the application initializes. The doInit function should look like the following example.
function doInit(){ for (i=0; i<document.all.length; i++) document.all(i).unselectable = "on"; oDiv.unselectable = "off"; oDiv.innerHTML=""; oDiv.focus(); getSystemFonts(); getBlockFormats(); goContext(); }
Congratulations! You now have a fully functioning HTML Editor Application, which should look and act like the example.Final Wrap-up
In this tutorial you discovered how to use Internet Explorer 6 features to create a real-time, WYSIWYGHTML Editor Application that can open and save files from the file system and which takes advantage of the rich, scriptable editing that Internet Explorer 6 offers.
Applying WYSIWYG editing to HTML can help users create Web pages effectively without knowing HTML. Additionally, you can use the HTML Editor Application as an online editor for an Internet e-mail program.
You can add many features to this application. For example, one extension could be a routine to synchronize the state of the toolbar buttons with the formatting of the current selection so that the buttons change state as the user navigates through the content in the editable region. Another possible extension of this application would be to include the ability to insert images from a file.