Rich-Text Editing in Mozilla

  • Revision slug: Rich-Text_Editing_in_Mozilla
  • Revision title: Rich-Text Editing in Mozilla
  • Revision id: 5318
  • Created:
  • Creator: Unabacus
  • Is current revision? No
  • Comment /* Internet Explorer Differences */

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.

Executing Commands

When an HTML document has been switched to designMode, the document object exposes the execCommand method which allows one to run commands to manipulate the contents of the editable region. Most commands affect the document's selection (bold, italics, etc), while others insert new elements (adding a link) or affect an entire line (indenting).

execCommand(String aCommandName, Boolean aShowDefaultUI, String aOptionalCommandArgument)

Arguments

String aCommandName
the name of the command
Boolean aShowDefaultUI
whether the default user interface should be shown. This is not implemented in Mozilla.
String aOptionalCommandArgument
some commands (such as insertimage) require an extra argument (the image's url). Pass an argument of null if no argument is needed.

Commands

bold
toggles the bold attribute of the selected text.
createlink
generates a link from the selected text. Requires the URI to be passed in as the optional argument.
delete
deletes the current selection.
fontname
changes the fontname of the selected text. Requires the name of font ("Arial" for example) to be passed in as the optional argument.
fontsize
changes the fontsize of the selected text. Requires the size to be passed in as the optional argument.
fontcolor
changes the fontcolor of the selected text. Requires the color to be passed in as the optional argument.
indent
indents the text block where the caret is located.
inserthorizontalrule
inserts an horizontal rule at the cursor's location.
insertimage
inserts an image at the cursor's location. Requires the url of the image to be passed in as the optional argument.
insertorderedlist
inserts an ordered list.
insertunorderedlist
inserts an unordered list.
italic
toggles italicize attribute of the selected text.
justifycenter
centers the current line.
justifyleft
justifies the current line to the left.
justifyright
justifies the current line to the right.
outdent
outdents the current line if it was indented before.
redo
redoes the previously undo command.
removeformat
removes all formatting from the current selection.
selectall
selects all of the content of the editable region.
strikethrough
toggles strikethrough attribute of the selected text.
subscript
converts the current selection to subscript.
superscript
converts the current selection to superscript.
underline
toggles underlining of the selected text.
undo
undoes the last executed command.
unlink
removes the link information from the current selection.
useCSS
toggles the use of css for the generated markup. Requires a boolean indicating if to turn CSS generation on or off as the optional argument.

Internet Explorer Differences

Mozilla does not support Internet Explorer's contentEditable attribute which allows any element to become editable or non-editable (the latter for when preventing change to fixed elements in an editable environment). 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.


Event Handling Disabled

A further difference for Mozilla is that once a document is switched to designMode, all events on that particular document are disabled. Once designMode is turned off however (as this now seems possible in Mozilla 1.5) the events become active again.

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

Figure 2 : First 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.

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

{{wiki.template('Named-bug', [ 209836, "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>
<h3 name="Executing_Commands"> Executing Commands </h3>
<p>When an HTML document has been switched to designMode, the document object exposes the <code>execCommand</code> method which allows one to run commands to manipulate the contents of the editable region. Most commands affect the document's selection (bold, italics, etc), while others insert new elements (adding a link) or affect an entire line (indenting).
</p>
<pre class="eval">execCommand(String aCommandName, Boolean aShowDefaultUI, String aOptionalCommandArgument)
</pre>
<p><b>Arguments</b>
</p>
<blockquote>
<dl><dt>String aCommandName
</dt><dd>the name of the command
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>Boolean aShowDefaultUI
</dt><dd>whether the default user interface should be shown. This is not implemented in Mozilla.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>String aOptionalCommandArgument
</dt><dd>some commands (such as insertimage) require an extra argument (the image's url). Pass an argument of <code>null</code> if no argument is needed.
</dd></dl>
</blockquote>
<p><b>Commands</b>
</p>
<blockquote>
<dl><dt>bold
</dt><dd>toggles the bold attribute of the selected text.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>createlink
</dt><dd>generates a link from the selected text. Requires the URI to be passed in as the optional argument.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>delete
</dt><dd>deletes the current selection.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>fontname
</dt><dd>changes the fontname of the selected text. Requires the name of font ("Arial" for example) to be passed in as the optional argument.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>fontsize
</dt><dd>changes the fontsize of the selected text. Requires the size to be passed in as the optional argument.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>fontcolor
</dt><dd>changes the fontcolor of the selected text. Requires the color to be passed in as the optional argument.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>indent
</dt><dd>indents the text block where the caret is located.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>inserthorizontalrule
</dt><dd>inserts an horizontal rule at the cursor's location.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>insertimage
</dt><dd>inserts an image at the cursor's location. Requires the url of the image to be passed in as the optional argument.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>insertorderedlist
</dt><dd>inserts an ordered list.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>insertunorderedlist
</dt><dd>inserts an unordered list.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>italic
</dt><dd>toggles italicize attribute of the selected text.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>justifycenter
</dt><dd>centers the current line.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>justifyleft
</dt><dd>justifies the current line to the left.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>justifyright
</dt><dd>justifies the current line to the right.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>outdent
</dt><dd>outdents the current line if it was indented before.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>redo
</dt><dd>redoes the previously undo command.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>removeformat
</dt><dd>removes all formatting from the current selection.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>selectall
</dt><dd>selects all of the content of the editable region.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>strikethrough
</dt><dd>toggles strikethrough attribute of the selected text.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>subscript
</dt><dd>converts the current selection to subscript.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>superscript
</dt><dd>converts the current selection to superscript.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>underline
</dt><dd>toggles underlining of the selected text.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>undo
</dt><dd>undoes the last executed command.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>unlink
</dt><dd>removes the link information from the current selection.
</dd></dl>
</blockquote>
<blockquote>
<dl><dt>useCSS
</dt><dd>toggles the use of css for the generated markup. Requires a boolean indicating if to turn CSS generation on or off as the optional argument.
</dd></dl>
</blockquote>
<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 or non-editable (the latter for when preventing change to fixed elements in an editable environment). 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><p><br>
<b>Event Handling Disabled</b>
</p><p>A further difference for Mozilla is that once a document is switched to designMode, all events on that particular document are disabled. Once designMode is turned off however (as this now seems possible in Mozilla 1.5) the events become active again.
</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".
</p><p><b>Figure 2 : First example</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.
</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>
<div class="bug">{{wiki.template('Named-bug', [ 209836, "Bug 209836 - designMode still active after clicking Back." ])}}</div>
<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