Rich Text Editing: Part I

Synopsis

This article details how to create an iframe to use as a replacement for a <textarea>; the iframe is intended to be the destination for user input in a rich text control.

A working example can be seen here.

Compatibility

This works in newer versions of most browsers. The two exceptions I know of to date are Safari and Konqueror; support of the designMode property for these browsers is expected.

Series

The HTML

Before we begin we will create a simple HTML document; we can not use an XHTML DTD or our page will technically contain invalid markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>RTE - dynamic iframe</title>
    <script type="text/javascript" src="rte.js"></script> <!-- rte.js IS THE FILE WE WILL BE CREATING -->
    <style type="text/css">
      h1 {
        font-size: 1.0em;
      }
    </style>
  </head>
  <body>
    <h1>Rich Text Editing - Dynamic iframe</h1>
  </body>
</html>

rte.js

The first thing we must do is create an onload event handler; we do this because we will be attaching the iframe to the body element but the body element won't be available until after the document is parsed.

// For simplicity's sake, we will do this the old fashioned way.
window.onload = function(){
}

#1 - Create the iframe

window.onload = function(){
  var iframe = document.createElement("iframe");                     // #1
}

#2 - Insert the iframe

window.onload = function(){
  var iframe = document.createElement("iframe");                     // #1
  document.getElementsByTagName("body")[0].appendChild(iframe);      // #2
}

Create some short-hand variables

window.onload = function(){
  var iframe = document.createElement("iframe");                     // #1
  document.getElementsByTagName("body")[0].appendChild(iframe);      // #2
  var w3c = iframe.contentDocument !== undefined ? true : false;     // Shortcut
  var idoc = w3c ? iframe.contentDocument                            // Shortcut
                 : iframe.contentWindow.document;
}

#3 - Open and close the iframe document

If you do not do this, the iframe will not accept user input when you set the designMode property in some browsers.

window.onload = function(){
  var iframe = document.createElement("iframe");                     // #1
  document.getElementsByTagName("body")[0].appendChild(iframe);      // #2
  var w3c = iframe.contentDocument !== undefined ? true : false;     // Shortcut
  var idoc = w3c ? iframe.contentDocument                            // Shortcut
                 : iframe.contentWindow.document;
  idoc.open();                                                       // #3
  idoc.close();                                                      // #3
}

#4 - Set the design mode property

Most examples for W3C browsers show the property as "on" and MSDN states the property is case-sensitive for IE; however my testing would support that the value assigned to designMode is case-insensitive.

window.onload = function(){
  var iframe = document.createElement("iframe");                     // #1
  document.getElementsByTagName("body")[0].appendChild(iframe);      // #2
  var w3c = iframe.contentDocument !== undefined ? true : false;     // Shortcut
  var idoc = w3c ? iframe.contentDocument                            // Shortcut
                 : iframe.contentWindow.document;
  idoc.open();                                                       // #3
  idoc.close();                                                      // #3
  idoc.designMode = w3c ? "on" : "On";                               // #4
}

Alternative

If you do not wish to call open and close on the iframe's document, you can set the designMode property using a timer.

window.onload = function(){
  var iframe = document.createElement("iframe");                     // #1
  document.getElementsByTagName("body")[0].appendChild(iframe);      // #2
  var w3c = iframe.contentDocument !== undefined ? true : false;     // Shortcut
  var idoc = w3c ? iframe.contentDocument                            // Shortcut
                 : iframe.contentWindow.document;
  setTimeout(function(){
    var the_iframe = iframe;
    if(the_iframe.contentDocument){
      the_iframe.contentDocument.designMode = "on";
    }else if(the_iframe.contentWindow){
      the_iframe.contentWindow.document.designMode = "On";
    }
  }, 250);
}

Helpful Hints

contentDocument and contentWindow will be unavailable until after the iframe is inserted into the document.
contentDocument is the W3C property for accessing the iframe document, although it looks as if most browsers also support contentWindow.document

rbredlau