Using the contentEditable Attribute
Since 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 Editor
As 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() Method
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
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.