Section D.2. Commanding an Editable Document

D.2. Commanding an Editable Document

As you've come to expect, even where there is commonality among scripting operations across browsers, you'll still have to contend with some inconsistencies. Such is the case in a typical user-editable environment consisting of an iframe element and scripts in (or linked into) the main document bearing the various user editing tools (e.g., for controlling font sizes, colors, special element insertions, etc.).

The primary concern is obtaining a reference to the document object of the iframe from scripts running in the main document. Assuming the use of an iframe element as the editable region of the page, a script in the main document needs to set the designMode property of the document object within the iframe differently for IE and W3C DOM browsers:

 // Internet Explorer 5.5 or later var editDoc = document.getElementById("editableIframe").contentWindow.document; // W3C DOM var editDoc = document.getElementById("editableIframe").contentDocument; 

The following script and HTML fragments demonstrate a simplified editing environment offering a few invocations of commands that modify selections within the editable document. The HTML portion is as follows:

 <div> <form> Font Color:<select onchange="setFontColor(this)">     <option value="black">Black</option>     <option value="red">Red</option>     <option value="green">Green</option>     <option value="blue">Blue</option> </select> Font Style:<select onchange="setFontStyle(this)">     <option value="bold">Bold</option>     <option value="italic">Italic</option>     <option value="underline">Underline</option>     <option value="strikethrough">Strikethrough</option> </select> Font Family:<select onchange="setFontFamily(this)">     <option value="serif">Serif</option>     <option value="sans-serif">Sans-serif</option>     <option value="monospace">Mono</option>     <option value="comic sans ms">Comic Sans</option> </select> </form> </div> <iframe  width="400" height="300"></iframe> 

The script portion first initializes the iframe element's document to be editable. Other functions respond to choices made from the "tools" above the iframe element:

 <script type="text/javascript"> function setFontColor(choice) {     if (editDoc) {         editDoc.execCommand("forecolor", false, choice.value);     } } function setFontStyle(choice) {     if (editDoc) {         editDoc.execCommand(choice.value, false, null);     } } function setFontFamily(choice) {     if (editDoc) {         editDoc.execCommand("fontname", false, choice.value);     } } var editDoc; function init( ) {     if (document.getElementById) {         var iframe = document.getElementById("editableIframe");         if (iframe.contentWindow) {             editDoc = iframe.contentWindow.document;         }else if (iframe.contentDocument) {             editDoc = iframe.contentDocument;         }     }     if (editDoc && editDoc.designMode) {         editDoc.designMode = "on";     } } window.onload </script> 

There are other internal differences among implementations of the execCommand( ) method. IE and Opera modify the document tree for style changes using "old-fashioned" HTML markup, such as <bold> and <italic> tags. Mozilla will do that, too, but operates in a default mode that instead wraps a selection inside a <span> tag, and assigns CSS properties to the style attribute of the span element.

For an extended example of creating a user editing environment for Mozilla, visit http://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla.