Revision 5310 of Rich-Text Editing in Mozilla

  • Revision slug: Rich-Text_Editing_in_Mozilla
  • Revision title: Rich-Text Editing in Mozilla
  • Revision id: 5310
  • Created:
  • Creator: Anonymous
  • Is current revision? No
  • Comment /* Executing Commands */

Revision Content

Please note: This document is currently being migrated from another site. It is a work in progress and is not yet complete. --fumble 18:13, 24 Apr 2005 (PDT)

Introduction

Mozilla 1.3 introduces an implementation of Microsoft® Internet Explorer's designMode feature. The rich-text editing support in Mozilla 1.3 supports the designMode feature which turns HTML documents into rich-text editors.

Setting Up Rich-Text Editing

Rich-text editing is initialized by setting the designMode property of a document to "On", such as the document inside an iframe. Once designMode has been set to "On", the document becomes a rich-text editing area and the user can type into it as if it were a textarea. The most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website.

dfgdfgxcvfxgjdfhdfh

Internet Explorer Differences

Mozilla does not support Internet Explorer's contentEditable attribute which allows any element to become editable. One major difference between Mozilla and Internet Explorer that affects designMode is the generated code in the editable document: while Internet Explorer uses HTML tags (em, i, etc), Mozilla 1.3 will generate by default spans with inline style rules. The useCSS command can be used to toggle between CSS and HTML markup creation.

Figure 1 : Generated HTML differences

Mozilla:
<span style="font-weight: bold;">I love geckos.</span>
<span style="font-weight: bold; font-style: italic; 
    text-decoration: underline;">Dinosaurs are big.</span>

Internet Explorer:
<STRONG>I love geckos.</STRONG>
<STRONG><EM><U>Dinosaurs are big.</U></EM></STRONG>

Another difference between Mozilla and IE is how to access the document object of an iframe, which is usually used in conjunction with designMode. Mozilla uses the W3C standard way, namely IFrameElement.contentDocument, while IE requires IFrameElement.document.

DevEdge provides a JavaScript helper class, xbDesignMode, which is a wrapper for the designMode feature which hides the differences between IE and Mozilla.

Examples

Please note: The example files are still being migrated from another site. They are not available at this time. --fumble 18:13, 24 Apr 2005 (PDT)

Example 1

The first example is an HTML document setting its own designMode to "On". This makes the entire document editable in Mozilla 1.3. Internet Explorer, however, does not allow javascript to change the current document's designMode. For it to work in Internet Explorer, the contentEditable attribute of the body tag needs to be set to "true". The example can be found here.


Figure 2 : First example - View Example

HTML:
<body contentEditable="true" onload="load()">

JavaScript:
function load(){
  window.document.designMode = "On";
}

Example 2

The second example is a simple rich text editing page, where text can be bolded/italicized/underlined, new links can be added and the color of text changed. The example page consists of an iframe, which will be the rich editing area, as well as elements for basic editing commands such as bold/italics/text color. Also provided is a "view source" button that will display the generated code in the iframe's document. The example can be found here.

<iframe src="example2-index.html" height="260" width="100%"></iframe>

Figure 3 : Setting up rich-text editing

HTML:
<body onload="load()">

JavaScript:
function load(){
  getIFrameDocument("editorWindow").designMode = "On";
}

function getIFrameDocument(aID){
  // if contentDocument exists, W3C compliant (Mozilla)
  if (document.getElementById(aID).contentDocument){
    return document.getElementById(aID).contentDocument;
  } else {
    // IE
    return document.frames[aID].document;
  }
}

The example contains a doRichEditCommand function that makes it easier to execute commands on the iframe's document and keeps the HTML code clean. The function executed the requested command using execCommand() and then sets focus back to the editable document, as clicking on a button will set focus on the button itself, which breaks the editing flow.

Figure 4 : Executing Rich Editing Commands

HTML:
<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>

JavaScript:
function doRichEditCommand(aName, aArg){
  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
  document.getElementById('editorWindow').contentWindow.focus()
}

Resources

Bugs

Bug 209836 - designMode still active after clicking Back.

Problem
Once document.designMode has been set for the document object in a window, all documents in that window for that domain will remain editable.
Solution
Edit the document in a separate window or contained in an IFRAME.

Original Document Information

  • Author(s): Doron Rosenberg, Netscape Communications
  • Published: 04 Apr 2003
  • Revised: 01 Jul 2003
  • Revised: 24 Apr 2005, Joel Coreson

Revision Source

<p><i> <b>Please note:</b> This document is currently being migrated from another site. It is a work in progress and is not yet complete.</i> --<a href="User:Fumble">fumble</a> 18:13, 24 Apr 2005 (PDT)
</p>
<h3 name="Introduction"> Introduction </h3>
<p>Mozilla 1.3 introduces an implementation of Microsoft<sup>®</sup> Internet Explorer's designMode feature. The rich-text editing support in Mozilla 1.3 supports the designMode feature which turns HTML documents into rich-text editors.
</p>
<h3 name="Setting_Up_Rich-Text_Editing"> Setting Up Rich-Text Editing </h3>
<p>Rich-text editing is initialized by setting the <code>designMode</code> property of a document to "On", such as the document inside an iframe. Once <code>designMode</code> has been set to "On", the document becomes a rich-text editing area and the user can type into it as if it were a textarea. The most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website.
</p><p><b>dfgdfg</b><i>xcvfxgj</i><a href="en/Dfhdfh">dfhdfh</a>
</p>
<h3 name="Internet_Explorer_Differences"> Internet Explorer Differences </h3>
<p>Mozilla does not support Internet Explorer's <code>contentEditable</code> attribute which allows any element to become editable. One major difference between Mozilla and Internet Explorer that affects designMode is the generated code in the editable document: while Internet Explorer uses HTML tags (em, i, etc), Mozilla 1.3 will generate by default spans with inline style rules. The <code>useCSS</code> command can be used to toggle between CSS and HTML markup creation.
</p><p><b>Figure 1 : Generated HTML differences</b>
</p>
<pre>Mozilla:
&lt;span style="font-weight: bold;"&gt;I love geckos.&lt;/span&gt;
&lt;span style="font-weight: bold; font-style: italic; 
    text-decoration: underline;"&gt;Dinosaurs are big.&lt;/span&gt;

Internet Explorer:
&lt;STRONG&gt;I love geckos.&lt;/STRONG&gt;
&lt;STRONG&gt;&lt;EM&gt;&lt;U&gt;Dinosaurs are big.&lt;/U&gt;&lt;/EM&gt;&lt;/STRONG&gt;
</pre>
<p>Another difference between Mozilla and IE is how to access the document object of an iframe, which is usually used in conjunction with designMode. Mozilla uses the W3C standard way, namely <code>IFrameElement.<a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-38538621">contentDocument</a></code>, while IE requires <code>IFrameElement.document</code>.
</p><p><i><b>DevEdge</b></i> provides a JavaScript helper class, <code><a href="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode</a></code>, which is a wrapper for the designMode feature which hides the differences between IE and Mozilla. 
</p>
<h3 name="Examples"> Examples </h3>
<p><i> <b>Please note:</b> The example files are still being migrated from another site. They are not available at this time.</i> --<a href="User:Fumble">fumble</a> 18:13, 24 Apr 2005 (PDT)
</p>
<h4 name="Example_1"> Example 1 </h4>
<p>The first example is an HTML document setting its own <code>designMode</code> to "On". This makes the entire document editable in Mozilla 1.3. Internet Explorer, however, does not allow javascript to change the current document's designMode. For it to work in Internet Explorer, the <code>contentEditable</code> attribute of the body tag needs to be set to "true". The example can be found <a href="en/Example1.html">here</a>.
</p><p><br>
<b>Figure 2 : First example - <a href="en/Example1.html">View Example</a></b>
</p>
<pre>HTML:
&lt;body contentEditable="true" onload="load()"&gt;

JavaScript:
function load(){
  window.document.designMode = "On";
}
</pre>
<h4 name="Example_2"> Example 2 </h4>
<p>The second example is a simple rich text editing page, where text can be bolded/italicized/underlined, new links can be added and the color of text changed. The example page consists of an iframe, which will be the rich editing area, as well as elements for basic editing commands such as bold/italics/text color. Also provided is a "view source" button that will display the generated code in the iframe's document. The example can be found <a href="en/Example2-index.html">here</a>.
</p><p>&lt;iframe src="example2-index.html" height="260" width="100%"&gt;&lt;/iframe&gt;
</p><p><b>Figure 3 : Setting up rich-text editing</b>
</p>
<pre>HTML:
&lt;body onload="load()"&gt;

JavaScript:
function load(){
  getIFrameDocument("editorWindow").designMode = "On";
}

function getIFrameDocument(aID){
  // if contentDocument exists, W3C compliant (Mozilla)
  if (document.getElementById(aID).contentDocument){
    return document.getElementById(aID).contentDocument;
  } else {
    // IE
    return document.frames[aID].document;
  }
}
</pre>
<p>The example contains a <code>doRichEditCommand</code> function that makes it easier to execute commands on the iframe's document and keeps the HTML code clean. The function executed the requested command using <code>execCommand()</code> and then sets focus back to the editable document, as clicking on a button will set focus on the button itself, which breaks the editing flow.
</p><p><b>Figure 4 : Executing Rich Editing Commands</b>
</p>
<pre>HTML:
&lt;button onclick="doRichEditCommand('bold')" style="font-weight:bold;"&gt;B&lt;/button&gt;

JavaScript:
function doRichEditCommand(aName, aArg){
  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
  document.getElementById('editorWindow').contentWindow.focus()
}
</pre>
<h3 name="Resources"> Resources </h3>
<ul><li> <a class="external" href="http://mozilla.org/editor/midas-spec.html">mozilla.org's rich-text editing Specification</a>
</li><li> <a class="external" href="http://mozilla.org/editor/midasdemo/">mozilla.org's rich-text editing Demo</a>
</li><li> <a class="external" href="http://www.mozilla.org/editor/ie2midas.html">Converting an app using document.designMode from IE to Mozilla at mozilla.org</a>
</li><li> <a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/designmode.asp">MSDN Documentation on designMode</a>
</li><li> <a class="external" href="http://msdn.microsoft.com/downloads/samples/internet/default.asp?url=/downloads/samples/internet/ie55/EditRegions/default.asp">MSDN Demo</a>
</li><li> <a class="external" href="http://www.kevinroth.com/rte/demo.htm">A open source, cross-browser rich-text editing demo</a>
</li><li> <a href="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a>
</li></ul>
<h3 name="Bugs"> Bugs </h3>
<p><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=209836">Bug 209836 - designMode still active after clicking Back.</a>
</p>
<blockquote>
Problem
<dl><dd><dl><dd>Once <code>document.designMode</code> has been set for the <code>document</code> object in a window, all documents in that window for that domain will remain editable.
</dd></dl>
</dd></dl>
</blockquote>
<blockquote>
Solution
<dl><dd><dl><dd>Edit the document in a separate window or contained in an IFRAME.
</dd></dl>
</dd></dl>
</blockquote>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author(s): Doron Rosenberg, Netscape Communications
</li><li> Published: 04 Apr 2003
</li><li> Revised: 01 Jul 2003
</li><li> Revised: 24 Apr 2005, <a href="User:Fumble">Joel Coreson</a>
</li></ul>
</div>
Revert to this revision