Microsoft Internet Explorer supplies built-in XHTML editing capabilities to permit live editing of page content. The entire page can be placed in edit mode, or selected containers can be made editable with WYSIWYG (what-you-see-is-what-you-get) methods. You can, for example, create forms that allow users to enter formatted text, you can permit users to customize their own content, or you can even develop an online XHTML editor.

In the following example, a simplified XHTML editor demonstrates some of the capabilities to create Web pages. You can edit the text appearing in the editor or start with a new document and create your own page.

Making Content Selectable

In order for text on a Web page to be editable, it must be "selectable." By default, all content on a page is selectable by either dragging through the text or double-clicking on words. Once the text is selected, various styling or content changes can be made to it. For instance, the following button applies bold styling to any text that you select on this page.

Normally, though, you will want to restrict editing to certain sections of a page. This means that you need, first, to "turn off" selectability for the entire page, and then "turn on" selectability for the particular section that is to be editable.

Clicking the following "Initialize Page" button does just that. It makes all content on this page unselectable except for the following division. Clicking the "Reset Page" button returns the page to its default setting to permit all page content to be selectable.

The following functions are called by the above "Initialize Page" and "Reset Page" buttons to restrict editing to the previous division and to reset the page for full selectability.

<script type="text/javascript">

function Init()
{
  //-- Make all page content unselectable.
  for (i=0; i<document.all.length; i++) {
    document.all(i).unselectable = "on";
  }
  //-- Make the division selectable.
  document.getElementById("DIV").unselectable = "off";
}

function Reset()
{
  //-- Make all page content selectable.
  for (i=0; i<document.all.length; i++) {
    document.all(i).unselectable = "off";
  }
}

<script>

<input type="button" value="Initialize Page" onclick="Init()"/>
<input type="button" value="Reset Page" onclick="Reset()"/>

<div id="DIV">
This is a division that is selectable for editing. Select any of this text
by dragging through it or by double-clicking a word. Then apply or remove 
bold, italic, and underline styling to the selected text by clicking the 
accompanying buttons.
</div>

Selectability of a page element is controlled by its unselectable property, set to either "on" to make it unselectable or "off" (the default) to make it selectable. Function Init() makes all page content unselectable by iterating the page's document.all collection (of all tags on the page), setting each one's unselectable="on" property. Then the division has its unselectable="off" property set to permit selection and editing of its content. Function Reset() returns the page to its default status, iterating all page elements in the document.all collection and setting their unselectable="off" properties.

Making Content Editable

Besides being selectable, page content can be made "content-editable," meaning that it permits cursor placement in the text, cursor movement with the arrow keys, and the ability to use the keyboard to enter or delete text. The following division is content-editable. Click the mouse to position the cursor and then enter new text or delete existing text.

Any container on a page can be made content-editable by setting its contentEditable property. The default setting is "false"; a "true" setting makes the container editable for cursor placement and keyboard use. The following code shows the tag for the above division containing editable text.

<div contentEditable="true">
This is a division that is content editable. You can position the cursor 
within the text, move the cursor with the arrow keys, and use the keyboard 
to enter or delete text at the cursor position.
</div>

In summary, to make a container on a page fully editable,

• Set all page elements as unselectable by iterating the page's document.all collection and setting each element's unselectable="on" property.


• Set the container's unselectable="off" property.


• Set the container's contentEditable="true" property.

These steps can be performed by a function that is called when the page loads. Below is the outline of a script that restricts editing to an identified container.

<script type="text/javascript">

function InitPage()
{
  for (i=0; i < document.all.length; i++) {
    document.all(i).unselectable = "on";
  }
  document.getElementById("id").unselectable = "off";
  document.getElementById("id").contentEditable = "true";
}

</script>

<body onload="InitPage()">
...
<tag id="id">
  editable content...
</tag>

Editing Methods

Editing functionality is applied to selected page content through scripts that apply the document.execCommand() method. Parameters are passed to this method giving the edit command to apply. The general format for the execCommand() method is shown below. It is applied through the document object.

document.execCommand("command" [,0] [,"value"])

A command name is supplied giving the action to take. If this is a styling action, then that style is immediately applied to the text that has been selected on the page. The second (0) and third ("value") parameters are optional depending on the type of command being issued.

The following button code is typical of a styling action requiring only a command name. It applies bold styling to selected page content.

<button title="Bold"
  onclick="document.execCommand('Bold')">
  <img src="Bold.gif"/>
</button>

When the button is clicked, the "Bold" command is issued through the document.execCommand() method, and bold styling is applied to whatever string of text has been selected on the page.

Certain styling commands require a value to be passed to the method. For example, in setting the font style for a selected text string, the name of the font face is passed to the command using the format

document.execCommand("FontName",0,"fontName")

Parameter "FontName" identifies the command being issued. The second parameter specifies whether to display the command's user interface, if applicable. Its value can be 0 or false unless otherwise noted. This parameter is not needed for most editing commands but is required to be present when passing the third parameter, the name of the font face to be applied (arial, courier, times new roman, etc.).

Example coding for font selection is shown below. The drop-down list responds to a change event to set the font face of any selected content. (It applies to any content on this page if the page is in its default selectable configuration.)

<select onchange=
  'document.execCommand("FontName",0,this.options[this.selectedIndex].text)'>
  option selected>Arial</option>
  option>Arial Narrow</option>
  option>Comic Sans MS</option>
  option>Courier</option>
  option>Georgia</option>
  option>Impact</option>
  option>Tahoma</option>
  option>Times</option>
  option>Verdana</option>
</select>

The selected option is used as the third paramater in the execCommand() method: this.options[this.selectedIndex].text. The font name selected from the drop-down list is the value applied through the "FontName" command.

Editing Commands

All of the available editing commands are too numerous to list here. The following table gives a sampling of what types of editing can be applied to selected text a page.

You cannot save edited text to an external file nor can you open existing Web documents unless you supply registered components from Microsoft with your editor. An alternative, however, is to open the edited content in a new browser window and choose "Save As..." from the File menu. The following button, for example, displays the edited content from division "DIV" shown above on this page.

<script type="text/javascript">

function ViewContent()
{
  var Win = open("","","width=500,height=300,menubar=yes,scrollbars=yes");
  Win.moveTo(200,200);
  Win.document.write("<html><body>");
  Win.document.write(document.getElementById("DIV").innerHTML);
  Win.document.write("</body></html>");
  Win.document.close();
}

</script>

<button title="View Content" onclick="ViewContent()">
  <img src="Web.gif"/>
</button> View Edited Content

The innerHTML content of the division is written to the secondary window in order to include the XHTML tags along with the text. Be sure to choose "Web Page, HTML only (*htm,*html)" as the saved file type to save the output as a Web page and to gain access to the source listing of page code.

You cannot open an external Web page for editing. An alternative, however, is to copy and paste the code from a displayed page into an editable area of your editing page.

Making a Simple Editor

You can construct a simple demonstation editor with just a few lines of code. In the following example, a division is defined as the edit area and a second division is a display area for viewing the XHTML code produced by editing. Three formatting buttons, copy and paste buttons, and a button for viewing the XHTML code are provided.

<h3>A Simple Editor</h3>

<button Title="Bold" unselectable="on"
  onclick='document.execCommand("Bold"); 
  document.getElementById("EditDIV").focus()'>
    <b>B</b>
</button>

<button Title="Italic" unselectable="on"
  onclick='document.execCommand("Italic"); 
  document.getElementById("EditDIV").focus()'>
    <b><i>I</i></b>
</button>

<button Title="Underline" unselectable="on"
  onclick='document.execCommand("Underline"); 
  document.getElementById("EditDIV").focus()'>
    <b><u>U</u></b>
</button>
 
<button Title="Copy" unselectable="on"
  onclick='document.execCommand("Copy"); 
  document.getElementById("EditDIV").focus()'>
    <b>Copy</b>
</button>

<button Title="Paste" unselectable="on"
  onclick='document.execCommand("Paste"); 
  document.getElementById("EditDIV").focus()'>
    <b>Paste</b>
</button>
 
<button Title="View Code" unselectable="on"
  onclick='document.getElementById("CodeDIV").innerText = 
  document.getElementById("EditDIV").innerHTML'>
    ViewCode
</button>
<br/>
<div id="EditDIV" contentEditable="true" style="width:300px; height:100px; 
border:solid 1px; font-family:times new roman; font-size:12pt; padding:5px; 
overflow:auto; margin-top:3px">
  Edit the content in this window.
</div>
Code:<br/>
<div id="CodeDIV" style="width:300px; padding:5px; border:solid 1px"></div>