Editing HTML with a Web Browser

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

[View full width]

<html> <body> <div name="editor" contentEditable="true" style="BORDER: 1px solid; WIDTH: 400px; graphics/ccc.gif HEIGHT: 300px" ></div> </body> </html>

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

graphics/19fig01.jpg

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

The 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:

Parameter

Meaning

sCommand

String containing the command identifier.

bUserInterface

Boolean value specifying if there is a user interface or not

vValue

Variant containing a value to be used with the commands that need a value.

bSuccess

Boolean return value that is true if the command succeeded.

Table 19.1. Command Identifiers for the execCommand() Method.

Command Identifier

Description

bUserInterface

vValue

2D-Position

Allows absolutely positioned elements to be moved by dragging.

None; set to false.

Required. Boolean value specifying whether this feature is to be on or off.

AbsolutePosition

Sets an element's position property to "absolute".

None; set to false.

Required. Boolean value specifying whether the element is to be absolutely positioned.

BackColor

Sets or retrieves the background color of the current selection.

None; set to false.

Required. String that specifies a color name or a six-digit hexadecimal RGB value, with or with out a leading hash mark.

Bold

Toggles the current selection between bold and nonbold.

None; set to false.

Optional. Set to null or omit.

Copy

Copies the current selection to the clipboard.

None; set to false.

Optional. Set to null or omit.

CreateBookmark

Creates a bookmark anchor or retrieves the name of a bookmark anchor for the current selection or insertion point.

None; set to false.

Required. String that specifies a valid anchor name. Providing an empty string will cause the command to fail.

CreateLink

Inserts a hyperlink on the current selection, or displays a dialog box enabling the user to specify a URL to insert as a hyperlink on the current selection.

Optional. Displays a dialog box if true or omitted. Dialog box is not displayed if false or null and the Value parameter is present.

Optional. String that specifies a URL.

Cut

Copies the current selection to the clipboard and then deletes it.

None; set to false.

Optional. Set to null or omit.

Delete

Deletes the current selection.

None; set to false.

Optional. Set to null or omit.

FontName

Sets or retrieves the font for the current selection.

None; set to false.

Required. String that specifies a font name or font list.

FontSize

Sets or retrieves the font size for the current selection.

None; set to false.

Required. Integer or string that specifies the font size. This must be a value between 1 and 7, inclusive.

ForeColor

Sets or retrieves the foreground (text) color of the current selection.

None; set to false.

Required. String that specifies a color name or a six-digit hexadecimal RGB value, with or without a leading hash mark.

FormatBlock

Sets the current block format tag.

None; set to false.

Required. String that specifies a valid block format tag.

Indent

Increases the indent of the selected text by one indentation increment.

None; set to false.

Optional. Set to null or omit.

Insert-HorizontalRule

Overwrites a horizontal line on the text selection.

None; set to false.

Optional. String that specifies an id attribute for the horizontal line. May be set to null or omitted.

InsertImage

Overwrites an image on the text selection.

Optional. This command displays a dialog box if the bUserInterface argument of execCommand is set to true or omitted. It does not display a dialog box if the argument is set to false or null and the vValue parameter is present (even if it's null).

Optional. String that specifies the path and file name of the image to be inserted. If the command displays a dialog box, this parameter is ignored.

InsertOrdered List-

Toggles the text selection between an ordered list and a normal format block.

None; set to false.

Optional. String that specifies an id attribute for the ordered list. May be set to null or omitted.

InsertParagraph

Overwrites a line break on the text selection.

None; set to false.

Optional. String that specifies an id attribute for the paragraph. May be set to null or omitted.

InsertUnordered-List

Toggles the text selection between an ordered list and a normal format block.

None; set to false.

Optional. String that specifies an id attribute for the unordered list. May be set to null or omitted.

Italic

Toggles the current selection between italic and nonitalic.

None; set to false.

Optional. Set to null or omit.

JustifyCenter

Centers the format block in which the current selection is located.

None; set to false.

Optional. Set to null or omit.

JustifyLeft

Left-justifies the format block in which the current selection is located.

None; set to false.

Optional. Set to null or omit.

JustifyRight

Right-justifies the format block in which the current selection is located.

None; set to false.

Optional. Set to null or omit.

Outdent

Decreases by one increment the indentation of the format block in which the current selection is located.

None; set to false.

Optional. Set to null or omit.

OverWrite

Toggles the text-entry mode between insert and overwrite.

None; set to false.

Optional. Boolean value that specifies the text-entry mode. If this value is set to true or null, the text-entry mode is over write. If this value is set to false (the default), the text-entry mode is insert.

Paste

Overwrites the contents of the clipboard on the current selection.

None; set to false.

Optional. Set to null or omit.

Print

Opens the print dialog box so the user can print the current page.

Yes. Set to true or omit.

Optional. Set to null or omit.

Redo

Redo last undo.

None; set to false.

Optional. Set to null or omit.

Refresh

Refreshes the current document.

None; set to false.

Optional. Set to null or omit.

RemoveFormat

Removes the formatting tags from the current selection.

None; set to false.

Optional. Set to null or omit.

SelectAll

Selects the entire document.

None; set to false.

Optional. Set to null or omit.

StrikeThrough

Toggles the current selection between strikethrough and nonstrikethrough.

None; set to false.

Optional. Set to null or omit.

Subscript

Toggles the current selection between subscript and nonsubscript.

None; set to false.

Optional. Set to null or omit.

Superscript

Toggles the current selection between superscript and nonsuperscript.

None; set to false.

Optional. Set to null or omit.

UnBookmark

Removes any bookmark from the current selection.

None; set to false.

Optional. Set to null or omit.

Underline

Toggles the current selection between underlined and not underlined.

None; set to false.

Optional. Set to null or omit.

Undo

Undo last change.

None; set to false.

Optional. Set to null or omit.

Unlink

Removes any hyperlink from the current selection.

None; set to false.

Optional. Set to null or omit.

Unselect

Clears the current selection.

None; set to false.

Optional. Set to null or omit.

Table Excerpted from MSDN and Is Copyrighted by Microsoft, 2002.

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.



ASP. NET Solutions - 24 Case Studies. Best Practices for Developers
ASP. NET Solutions - 24 Case Studies. Best Practices for Developers
ISBN: 321159659
EAN: N/A
Year: 2003
Pages: 175

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net