Writing an editor of any type can seem a daunting task. Writing an editor using JavaScript can seem almost impossible. Thinking of all the things necessary for even a simple editor, not to mention an HTML editor, and then thinking of the limitations of JavaScript, and your next thought might be that it couldn't possibly be worth the work to implement an editor, if it is even possible. Fortunately, HTML editing functionality is built into Microsoft Internet Explorer (IE) starting with version 5.5. This makes it easy to implement client-side HTML editing functionality. Mozilla has recently added this functionality. Using the contentEditable AttributeSince IE 5.5, the contentEditable attribute has been added to many of the HTML tags. By setting this attribute to true and hooking up a user interface, you can quickly implement an HTML editor. In this chapter, we will be using only the <div> tag to create an HTML editor. This is primarily for convenience, because this functionality can be implemented in a number of different tags. The following HTML is a minimal implementation of an editor. The style settings make the editor border visible and set the size.
Now you have an HTML editor. It doesn't really look like one, but this is because we have not yet implemented a user interface. Let's examine what our editor can do without any user interface. The first thing you will probably notice is that many of the keyboard shortcuts that you are used to using in programs such as Microsoft Word work as you would expect them to. Ctrl+B toggles Bold, Ctrl+I toggles Italics, and Ctrl +U toggles Underline. Other shortcuts, such as Ctrl+Z for Undo, Ctrl+Y for Redo, Ctrl+C for Copy, Ctrl+X for Cut, and Ctrl+V for Paste, also work. Next, let's see what the Copy and Paste operations can do. Open up Microsoft Excel, if you have it, and make a small table. Do a little formatting to make it look nice, select all the cells you have entered, and then copy and paste it into your editor. Figure 19.1 shows an example of what you end up with. Figure 19.1. Example of Using Copy and Paste with the HTML EditorAs you can see, all the formatting in Excel is converted into HTML for you. This works for most of Microsoft's other products, too. The way it works is this: The application exports data to the clipboard; one of the formats that is available is CF_HTML; and anything that exports and has CF_HTML as an available format will work. So even without a user interface, you can do quite a bit with the editor just by formatting the document in another application and copying and pasting it into your editor. You can even copy and paste portions of other Web pages into the editor. All the formatting and images will be transferred to your editor. The execCommand() MethodThe next step is to hook up a user interface. This is primarily done by calls to the execCommand() method of the IE's document object. The JavaScript code to toggle Bold looks like this. editor.focus(); editor.document.execCommand("Bold"); For this to be useful, it needs to be called from the onClick event of an object such as a button. Listing 19.1 contains the code for a simple editor with buttons to set the text justification. Listing 19.1 HTML Editor with Text Justification<html> <body> <div style="BORDER: 1px solid; WIDTH: 400px; HEIGHT: 25px" align="center"> <input type="button" value="Left Justify" name="JustifyLeft" onclick="return EditorCommand('JustifyLeft')"> <input type="button" value="Center" name="JustifyCenter" onclick="EditorCommand('JustifyCenter')"> <input type="button" value="Right Justify" name="JustifyRight" onclick="EditorCommand('JustifyRight')"> </div> <div style="BORDER: 1px solid; WIDTH: 400px; HEIGHT: 200px" contenteditable="true" name="EditorDiv" > </div> <script language="javascript"> function EditorCommand(command) { EditorDiv.focus(); EditorDiv.document.execCommand(command,false,null); return false; } </script> </body> </html> To make things easy, I wrote a function that took the command to be passed to the execCommand() method as a parameter, and then I made the necessary function calls. If you don't set the focus to the editor <div> tag, the call to the execCommand() method will work only if you have highlighted text. No effect occurs if no text is selected. The format of the execCommand() is as follows: bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue]) The parameters have the following meanings:
Table 19.1 is a partial list of the possible command identifiers listing the most useful commands. To see a complete list of all command identifiers, look up the execCommand() method in MSDN. |