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.

1. 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);    }

2. 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.

       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.

   Show Me
3. 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);    }

4. Add an onchange event to the oFontSizeToolbarDropDownList element that calls the changeFontSize function.

   onchange="changeFontSize();"

5. 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‘;    }

6. Add an onclick event to the Vertical AlignmentToolbarButton element that calls the VerticalMode function.

   onclick="VerticalMode();"

7. 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.

8. 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

   function getSystemFonts(){    var a=dlgHelper.fonts.count;    var fArray = new Array();    var oDropDown = oToolBar.createDropDownListAt("4");    oDropDown.setAttribute("id","FontNameList");    for (i = 1;i < dlgHelper.fonts.count;i++){    fArray[i] = dlgHelper.fonts(i);    var aOptions = oDropDown.getOptions();    var oOption = document.createElement("OPTION");    aOptions.add(oOption);    oOption.text = fArray[i];    oOption.Value = i;    }    // Attaching the onchange event is necessary in order to detect when a    // user changes the value in the drop-down list box.    oDropDown.setAttribute("onchange",ChangeFont);    }    

9. 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();

10. 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);    }

11. 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

    function getBlockFormats(){    var a=dlgHelper.blockFormats.count;    var fArray = new Array();    var oDropDown = oToolBar.createDropDownListAt("5");    oDropDown.setAttribute("id","FormatList");    for (i = 1;i < dlgHelper.blockFormats.count;i++)    {    fArray[i] = dlgHelper.blockFormats(i);    var aOptions = oDropDown.getOptions();    var oOption = document.createElement("OPTION");    aOptions.add(oOption);    oOption.text = fArray[i];    oOption.Value = i;    }    // Attach the onchange event    oDropDown.setAttribute("onchange",ChangeFormat);    }    

12. Add a call to the getBlockFormats function to the doInit function so that the ToolbarDropDownList element is populated when the application initializes.

    getBlockFormats();

13. 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);    }

14. 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;

15. 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

    function callColorDlg(sColorType){    if (sInitColor == null)    // Display color dialog box    var sColor = dlgHelper.ChooseColorDlg();    else    var sColor = dlgHelper.ChooseColorDlg(sInitColor);    // Change decimal to hex    sColor = sColor.toString(16);    // Add extra zeroes if hex number is less than 6 digits    if (sColor.length < 6) {    var sTempString = "000000".substring(0,6-sColor.length);    sColor = sTempString.concat(sColor);    }    // Change color of the selected text    document.execCommand(sColorType, false, sColor);    sInitColor = sColor;    oDiv.focus();    }

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.

1. 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.
2. 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    }

3. 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();    }

4. Add an onclick event to the New DocumentToolbar element that calls the NewDocument function.

   onclick="NewDocument();"

5. Create the CommonDialogOBJECT in the BODY section, directly below the dlgHelperOBJECT.

6. 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

   function LoadDocument(){    // Setting CancelError to true and using try/catch allows the user to    // click cancel on the save as dialog without causing a script error.    cDialog.CancelError=true;    try{    var answer = checkForSave();    // The user has clicked yes in the modal dialog box called in the    // checkForSave function.    if (answer) {var sCancel = SaveDocument();    // The user has clicked cancel in the save as dialog box; exit    // function.    if (sCancel) return;    cDialog.Filter="HTM Files (*.htm)|*.htm|Text Files (*.txt)|*.txt"    cDialog.ShowOpen();    var ForReading = 1;    var fso = new ActiveXObject("Scripting.FileSystemObject");    var f = fso.OpenTextFile(cDialog.filename, ForReading);    var r = f.ReadAll();    f.close();    oDiv.innerHTML=r;    // This variable is used in the checkForSave function to see    // if there is new content in the div.     sPersistValue=oDiv.innerHTML;    }    // The user has clicked no in the modal dialog box called in    // the checkForSave function.    if (answer==false)    {cDialog.Filter="HTM Files (*.htm)|*.htm|Text Files (*.txt)|*.txt"    cDialog.ShowOpen();    var ForReading = 1;    var fso = new ActiveXObject("Scripting.FileSystemObject");    var f = fso.OpenTextFile(cDialog.filename, ForReading);    var r = f.ReadAll();    f.close();    oDiv.innerHTML=r;    sPersistValue=oDiv.innerHTML;    }    oDiv.focus();    }    catch(e){    var sCancel="true";    return sCancel;}    }

7. Add an onclick event to the Open DocumentToolbar element that calls the LoadDocument function. The Open DocumentToolbar element should look like the following example.

8. 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

   function SaveDocument(){    // Setting CancelError to true and using try/catch allows the user to click cancel on the save    // as dialog without causing a script error.    cDialog.CancelError=true;    try{    cDialog.Filter="HTM Files (*.htm)|*.htm|Text Files (*.txt)|*.txt"    cDialog.ShowSave();    var fso = new ActiveXObject("Scripting.FileSystemObject");    var f = fso.CreateTextFile(cDialog.filename,  true);    f.write(oDiv.innerHTML);    f.Close();    sPersistValue=oDiv.innerHTML;}    catch(e){    var sCancel="true";    return sCancel;}    oDiv.focus();    }

9. Add an onclick event to the Save DocumentToolbar element that calls the SaveDocument function.
10. 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.
    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"

11. 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

12. Give the file a meaningful name and save the page with an .hta extension in the directory where you downloaded the sample files.

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.

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.

Related Topics

• Leveraging Scriptable Editing in Your Web Pages
• CONTENTEDITABLE
• Command Identifiers
• execCommand
• Introduction to HTML+TIME
• Introduction to HTML Applications (HTAs)
• Dialog Helper
• Toolbar Overview