神马文学网How to Create an HTML Editor Application
来源：百度文库 编辑：神马文学网 时间：2024/04/27 19:11:15
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 theDialog 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:
Create and use editable regions with theCONTENTEDITABLE attribute. Use formattingCommand Identifiers and theexecCommand method. Use theInternet Explorer WebControls toolbar, as well as a menu element behavior and anHTML+TIME (Timed Interactive Multimedia Extensions)time2 behavior that displays a splash screen. Use the Dialog Helper object to access the fonts and block formats on a user‘s machine, and to display the color dialog box. Internet Explorer 6 introduces the Dialog Helper object. Create anHTML Application (HTA).
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 DependenciesImplementation StepsFinal Wrap-upRelated Topics
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 ofelement behaviors is also helpful.
TheCommonDialog
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, seeHOWTO: 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 twoHTML Components (HTCs). All of these files are included in theHTML Editor
sample download. Before you get started with the tutorial, you need to download theHTML 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 fileStep 2: Create the ToolbarsStep 3: Create the Text Formatting FunctionsStep 4: Create the File New, File Open, and File Save FunctionsStep 5: Create the MenuStep 6: Create the Splash Screen
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, includingHTML,HEAD, andBODY. You can also add aTITLE element in the HEAD section if you like. The following code sample shows what the HTML should look like.HTML Editor Add aDIV element in the BODY section. This DIV element is the container for the all of the user interface (UI) elements in the application.
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:
Create and use editable regions with theCONTENTEDITABLE attribute. Use formattingCommand Identifiers and theexecCommand method. Use theInternet Explorer WebControls toolbar, as well as a menu element behavior and anHTML+TIME (Timed Interactive Multimedia Extensions)time2 behavior that displays a splash screen. Use the Dialog Helper object to access the fonts and block formats on a user‘s machine, and to display the color dialog box. Internet Explorer 6 introduces the Dialog Helper object. Create anHTML Application (HTA).
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 DependenciesImplementation StepsFinal Wrap-upRelated Topics
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 ofelement behaviors is also helpful.
TheCommonDialog
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, seeHOWTO: 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 twoHTML Components (HTCs). All of these files are included in theHTML Editor
sample download. Before you get started with the tutorial, you need to download theHTML 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 fileStep 2: Create the ToolbarsStep 3: Create the Text Formatting FunctionsStep 4: Create the File New, File Open, and File Save FunctionsStep 5: Create the MenuStep 6: Create the Splash Screen
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, includingHTML,HEAD, andBODY. You can also add aTITLE element in the HEAD section if you like. The following code sample shows what the HTML should look like.
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 anID value of oDiv and set theSTYLE properties of the DIV. The following code shows you how to set all the necessary attributes of the DIV. Add aSCRIPT 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 theUNSELECTABLE attribute for all elements of thedocument. Later in the tutorial, you will add more code to this function. 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 containToolbarButton,ToolbarDropDownList, andToolbarSeparator elements that implement common document editing functionality by usingexecCommand along with formatting commands likeBold andForeColor.
Declare the followingnamespace for the toolbar inside the opening HTML tag. xmlns:mytb Add theIMPORT 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. 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. Show Me
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 thefontSize 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 orBackColor, 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 anonclick
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
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 anonchange event to the oFontSizeToolbarDropDownList element that calls the changeFontSize function. onchange="changeFontSize();" Create a function called VerticalMode that uses thewritingMode 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 theobject 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. Create a function called getSystemFonts that uses thefonts 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 theOPTION elements with the names of the fonts. The code in this function also detects theonchange 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); } 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 theFontName command to change thefontFamily 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
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); } 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 theFormatBlock 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 theChooseColorDlg 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(); }
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. Show Me
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 toStep 5: Create the Menu.
Create a global variable called sPersistValue. var sPersistValue This variable holds the value of theinnerHTML property of oDiv when thediv 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 theshowModalDialog 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, seeCreating 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. Create a function called LoadDocument that displays a Open dialog box, and then opens aFileSystemObject 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;} } Add an onclick event to the Open DocumentToolbar element that calls the LoadDocument function. The Open DocumentToolbar element should look like the following 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(); } 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 inHOWTO: Use Licensed ActiveX Controls in Internet Explorer
andHOWTO: 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 aCODEBASE 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, seeIntroduction to HTML Applications (HTAs).
Add theHTA element in the HEAD section directly below the title element. Show Example
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. Show Me
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. Add the IMPORT statement that points to the menu element behavior and that uses the same namespace declared in the HTML element. 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
File New Open Save Exit Edit Cut Ctrl+X Copy Ctrl+C Paste Ctrl+V Format Bold Italic Underline Font Color HighLight Help About Create a function called CallMenuFunction that uses a switch statement to call the formatting functions created inStep 3: Create the Text Formatting Functions. The switch operates on the value of the ID attribute of the menu items. Show Example
function CallMenuFunction(){ var menuChoice = event.result; switch(menuChoice){ case "open": LoadDocument(); break; case "new": NewDocument(); break; case "save": SaveDocument(); break; case "exit": window.close(); break; case "cut": callFormatting(‘Cut‘); break; case "copy": callFormatting(‘Copy‘); break; case "paste": callFormatting(‘Paste‘); break; case "bold": callFormatting(‘Bold‘); break; case "underline": callFormatting(‘Underline‘); break; case "italic": callFormatting(‘Italic‘); break; case "fontColor": callColorDlg(‘ForeColor‘); break; case "highlight": callColorDlg(‘BackColor‘); break; case "about": goContext(); break; default: break; } } 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.
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. Add the style element in the HEAD element, directly above the title element. Create a global variable called oPopup and use it to create a new pop-up window using thecreatePopup 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.
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; iCongratulations! You now have a fully functioning HTML Editor Application, which should look and act like the example.Show Me
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.
Leveraging Scriptable Editing in Your Web PagesCONTENTEDITABLECommand IdentifiersexecCommandIntroduction to HTML+TIMEIntroduction to HTML Applications (HTAs)Dialog HelperToolbar Overview
_xyz
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 containToolbarButton,ToolbarDropDownList, andToolbarSeparator elements that implement common document editing functionality by usingexecCommand along with formatting commands likeBold andForeColor.
Declare the followingnamespace for the toolbar inside the opening HTML tag. xmlns:mytb Add theIMPORT 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. 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
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. Show Me
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 thefontSize 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 orBackColor, 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 anonclick
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. 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
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 anonchange event to the oFontSizeToolbarDropDownList element that calls the changeFontSize function. onchange="changeFontSize();" Create a function called VerticalMode that uses thewritingMode 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 theobject 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. Create a function called getSystemFonts that uses thefonts 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 theOPTION elements with the names of the fonts. The code in this function also detects theonchange 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); } 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 theFontName command to change thefontFamily 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
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); } 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 theFormatBlock 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 theChooseColorDlg 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(); }
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. Show Me
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 toStep 5: Create the Menu.
Create a global variable called sPersistValue. var sPersistValue This variable holds the value of theinnerHTML property of oDiv when thediv 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 theshowModalDialog 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, seeCreating 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. Create a function called LoadDocument that displays a Open dialog box, and then opens aFileSystemObject 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;} } Add an onclick event to the Open DocumentToolbar element that calls the LoadDocument function. The Open DocumentToolbar element should look like the following 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(); } 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 inHOWTO: Use Licensed ActiveX Controls in Internet Explorer
andHOWTO: 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 aCODEBASE 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, seeIntroduction to HTML Applications (HTAs).
Add theHTA element in the HEAD section directly below the title element. Show Example
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. Show Me
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. Add the IMPORT statement that points to the menu element behavior and that uses the same namespace declared in the HTML element. 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
function CallMenuFunction(){ var menuChoice = event.result; switch(menuChoice){ case "open": LoadDocument(); break; case "new": NewDocument(); break; case "save": SaveDocument(); break; case "exit": window.close(); break; case "cut": callFormatting(‘Cut‘); break; case "copy": callFormatting(‘Copy‘); break; case "paste": callFormatting(‘Paste‘); break; case "bold": callFormatting(‘Bold‘); break; case "underline": callFormatting(‘Underline‘); break; case "italic": callFormatting(‘Italic‘); break; case "fontColor": callColorDlg(‘ForeColor‘); break; case "highlight": callColorDlg(‘BackColor‘); break; case "about": goContext(); break; default: break; } } 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.
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. Add the style element in the HEAD element, directly above the title element. Create a global variable called oPopup and use it to create a new pop-up window using thecreatePopup 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.
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
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.
Leveraging Scriptable Editing in Your Web PagesCONTENTEDITABLECommand IdentifiersexecCommandIntroduction to HTML+TIMEIntroduction to HTML Applications (HTAs)Dialog HelperToolbar Overview
_xyz
How to Create an HTML Editor Application
How to be an expert
How to use PageFunction to create dialog behavior in WPF?
An introduction to personas and how(First)
An introduction to personas and how(Second)
An introduction to personas and how(Third)
How to Kick Off an Innovation Project
How To Create A RSS Feed From Any Web Page
XML.com: How to Create a REST Protocol
How to Create a Clean Blog Design with Photoshop
Visual C# .NET: How to Create a Class Library
how to create a MapTilePack on your own
How to Find or Validate an Email Address
HOW TO: Turn Your 3D Designs Into Reality (an...
How to Install an Innovation Process in Your Company
How to Find or Validate an Email Address
How To Kill An OSGi Project - With 10 Questio...
Boots: Star is how to create the charm of ugg boots
How to...
how to
How to configure an L2TP/IPSec connection by using Preshared Key Authentication
How to account for memory usage on an HP-UX system
转贴：【教學】如何看英文棒針織圖-初級篇 【Lesson】How to Read an E...
An Introduction to Virtualization