Rich-Text Editing in Mozilla

  • Revision slug: Rich-Text_Editing_in_Mozilla
  • Revision title: Rich-Text Editing in Mozilla
  • Revision id: 5351
  • Created:
  • Creator: garann
  • Is current revision? No
  • Comment 2 words added, 3 words removed

Revision Content

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. Starting in Firefox 3, Mozilla also supports 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).

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.

Similarly, setting contentEditable to "true" allows you to make individual elements of a document editable.

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). When using contentEditable, calling execCommand will affect the currently active editable element.

execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)

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 aValueArgument
some commands (such as insertimage) require an extra value argument (the image's url). Pass an argument of null if no argument is needed.

Commands

backColor
Changes the document background color. In styleWithCss mode, it affects the background color of the containing block instead. Requires a color value string to be passed in as a value argument. (Internet Explorer uses this to set text background color.)
bold
Toggles bold on/off for the selection or at the insertion point. (Internet Explorer uses the STRONG tag instead of B.)
contentReadOnly
Makes the content document either read-only or editable. Requires a boolean true/false to be passed in as a value argument. (Not supported by Internet Explorer.)
copy
Copies the current selection to the clipboard. Clipboard capability must be enabled in the user.js preference file. See
createLink
Creates an anchor link from the selection, only if there is a selection. Requires the HREF URI string to be passed in as a value argument. The URI must contain at least a single character, which may be a white space. (Internet Explorer will create a link with a null URI value.)
cut
Cuts the current selection and copies it to the clipboard. Clipboard capability must be enabled in the user.js preference file. See
decreaseFontSize
Adds a SMALL tag around the selection or at the insertion point. (Not supported by Internet Explorer.)
delete
Deletes the current selection.
enableInlineTableEditing
Enables or disables the table row and column insertion and deletion controls. (Not supported by Internet Explorer.)
enableObjectResizing
Enables or disables the resize handles on images and other resizable objects. (Not supported by Internet Explorer.)
fontName
Changes the font name for the selection or at the insertion point. Requires a font name string ("Arial" for example) to be passed in as a value argument.
fontSize
Changes the font size for the selection or at the insertion point. Requires an HTML font size (1-7) to be passed in as a value argument.
foreColor
Changes a font color for the selection or at the insertion point. Requires a color value string to be passed in as a value argument.
formatBlock
Adds an HTML block-style tag around the line containing the current selection, replacing the block element containing the line if one exists (in Firefox, BLOCKQUOTE is the exception - it will wrap any containing block element). Requires a tag-name string to be passed in as a value argument. Virtually all block style tags can be used (eg. "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer supports only heading tags H1 - H6, ADDRESS, and PRE, which must also include the tag delimiters < >, such as "<H1>".)
heading
Adds a heading tag around a selection or insertion point line. Requires the tag-name string to be passed in as a value argument (i.e. "H1", "H6"). (Not supported by Internet Explorer.)
hiliteColor
Changes the background color for the selection or at the insertion point. Requires a color value string to be passed in as a value argument. UseCSS must be turned on for this to function. (Not supported by Internet Explorer.)
increaseFontSize
Adds a BIG tag around the selection or at the insertion point. (Not supported by Internet Explorer.)
indent
Indents the line containing the selection or insertion point. In Firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented.
insertBrOnReturn
Controls whether the Enter key inserts a br tag or splits the current block element into two. (Not supported by Internet Explorer.)
insertHorizontalRule
Inserts a horizontal rule at the insertion point (deletes selection).
insertHTML
Inserts an HTML string at the insertion point (deletes selection). Requires a valid HTML string to be passed in as a value argument. (Not supported by Internet Explorer.)
insertImage
Inserts an image at the insertion point (deletes selection). Requires the image SRC URI string to be passed in as a value argument. The URI must contain at least a single character, which may be a white space. (Internet Explorer will create a link with a null URI value.)
insertOrderedList
Creates a numbered ordered list for the selection or at the insertion point.
insertUnorderedList
Creates a bulleted unordered list for the selection or at the insertion point.
insertParagraph
Inserts a paragraph around the selection or the current line. (Internet Explorer inserts a paragraph at the insertion point and deletes the selection.)
italic
Toggles italics on/off for the selection or at the insertion point. (Internet Explorer uses the EM tag instead of I.)
justifyCenter
Centers the selection or insertion point.
justifyLeft
Justifies the selection or insertion point to the left.
justifyRight
Right-justifies the selection or the insertion point.
outdent
Outdents the line containing the selection or insertion point.
paste
Pastes the clipboard contents at the insertion point (replaces current selection). Clipboard capability must be enabled in the user.js preference file. See
redo
Redoes the previous undo command.
removeFormat
Removes all formatting from the current selection.
selectAll
Selects all of the content of the editable region.
strikeThrough
Toggles strikethrough on/off for the selection or at the insertion point.
subscript
Toggles subscript on/off for the selection or at the insertion point.
superscript
Toggles superscript on/off for the selection or at the insertion point.
underline
Toggles underline on/off for the selection or at the insertion point.
undo
Undoes the last executed command.
unlink
Removes the anchor tag from a selected anchor link.
useCSS {{ Deprecated_inline() }}
Toggles the use of HTML tags or CSS for the generated markup. Requires a boolean true/false as a value argument. NOTE: This argument is logically backwards (i.e. use false to use CSS, true to use HTML). (Not supported by Internet Explorer.) This has been deprecated; use the styleWithCSS command instead.
styleWithCSS
Replaces the useCSS command; argument works as expected, i.e. true modifies/generates style attributes in markup, false generates formatting elements.

Internet Explorer Differences

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.

More information can be found in the Rich text editing section of Migrate apps from Internet Explorer to 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".

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

{{ languages( { "zh-cn": "Cn/Rich-Text_Editing_in_Mozilla", "en": "en/Rich-Text_Editing_in_Mozilla", "ja": "Ja/Rich-Text_Editing_in_Mozilla", "it": "it/Rich-Text_Editing_in_Mozilla"} ) }}

Original Document Information

Revision Source

<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. Starting in Firefox 3, Mozilla also supports 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).</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>Similarly, setting <code>contentEditable</code> to "true" allows you to make individual elements of a document editable.</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). When using <code>contentEditable</code>, calling <code>execCommand</code> will affect the currently active editable element.</p>
<pre class="eval">execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)
</pre>
<p><strong>Arguments</strong></p>
<blockquote>
<dl> <dt>String aCommandName</dt> <dd>the name of the command</dd>
</dl>
<dl> <dt>Boolean aShowDefaultUI</dt> <dd>whether the default user interface should be shown. This is not implemented in Mozilla.</dd>
</dl>
<dl> <dt>String aValueArgument</dt> <dd>some commands (such as insertimage) require an extra value argument (the image's url). Pass an argument of <code>null</code> if no argument is needed.</dd>
</dl>
</blockquote>
<p><strong>Commands</strong></p>
<blockquote>
<dl> <dt>backColor</dt> <dd>Changes the document background color. In styleWithCss mode, it affects the background color of the containing block instead. Requires a color value string to be passed in as a value argument. (Internet Explorer uses this to set text background color.)</dd>
</dl>
<dl> <dt>bold</dt> <dd>Toggles bold on/off for the selection or at the insertion point. (Internet Explorer uses the STRONG tag instead of B.)</dd>
</dl>
<dl> <dt>contentReadOnly</dt> <dd>Makes the content document either read-only or editable. Requires a boolean true/false to be passed in as a value argument. (Not supported by Internet Explorer.)</dd>
</dl>
<dl> <dt>copy</dt> <dd>Copies the current selection to the clipboard. Clipboard capability must be enabled in the user.js preference file. See <a class="external" href="http://www.mozilla.org/editor/midasdemo/securityprefs.html"></a></dd>
</dl>
<dl> <dt>createLink</dt> <dd>Creates an anchor link from the selection, only if there is a selection. Requires the HREF URI string to be passed in as a value argument. The URI must contain at least a single character, which may be a white space. (Internet Explorer will create a link with a null URI value.)</dd>
</dl>
<dl> <dt>cut</dt> <dd>Cuts the current selection and copies it to the clipboard. Clipboard capability must be enabled in the user.js preference file. See <a class="external" href="http://www.mozilla.org/editor/midasdemo/securityprefs.html"></a></dd>
</dl>
<dl> <dt>decreaseFontSize</dt> <dd>Adds a SMALL tag around the selection or at the insertion point. (Not supported by Internet Explorer.)</dd>
</dl>
<dl> <dt>delete</dt> <dd>Deletes the current selection.</dd>
</dl>
<dl> <dt>enableInlineTableEditing</dt> <dd>Enables or disables the table row and column insertion and deletion controls. (Not supported by Internet Explorer.)</dd>
</dl>
<dl> <dt>enableObjectResizing</dt> <dd>Enables or disables the resize handles on images and other resizable objects. (Not supported by Internet Explorer.)</dd>
</dl>
<dl> <dt>fontName</dt> <dd>Changes the font name for the selection or at the insertion point. Requires a font name string ("Arial" for example) to be passed in as a value argument.</dd>
</dl>
<dl> <dt>fontSize</dt> <dd>Changes the font size for the selection or at the insertion point. Requires an HTML font size (1-7) to be passed in as a value argument.</dd>
</dl>
<dl> <dt>foreColor</dt> <dd>Changes a font color for the selection or at the insertion point. Requires a color value string to be passed in as a value argument.</dd>
</dl>
<dl> <dt>formatBlock</dt> <dd>Adds an HTML block-style tag around the line containing the current selection, replacing the block element containing the line if one exists (in Firefox, BLOCKQUOTE is the exception - it will wrap any containing block element). Requires a tag-name string to be passed in as a value argument. Virtually all block style tags can be used (eg. "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer supports only heading tags H1 - H6, ADDRESS, and PRE, which must also include the tag delimiters &lt; &gt;, such as "&lt;H1&gt;".)</dd>
</dl>
<dl> <dt>heading</dt> <dd>Adds a heading tag around a selection or insertion point line. Requires the tag-name string to be passed in as a value argument (i.e. "H1", "H6"). (Not supported by Internet Explorer.)</dd>
</dl>
<dl> <dt>hiliteColor</dt> <dd>Changes the background color for the selection or at the insertion point. Requires a color value string to be passed in as a value argument. UseCSS must be turned on for this to function. (Not supported by Internet Explorer.)</dd>
</dl>
<dl> <dt>increaseFontSize</dt> <dd>Adds a BIG tag around the selection or at the insertion point. (Not supported by Internet Explorer.)</dd>
</dl>
<dl> <dt>indent</dt> <dd>Indents the line containing the selection or insertion point. In Firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented.</dd>
</dl>
<dl> <dt>insertBrOnReturn</dt> <dd>Controls whether the Enter key inserts a br tag or splits the current block element into two. (Not supported by Internet Explorer.)</dd>
</dl>
<dl> <dt>insertHorizontalRule</dt> <dd>Inserts a horizontal rule at the insertion point (deletes selection).</dd>
</dl>
<dl> <dt>insertHTML</dt> <dd>Inserts an HTML string at the insertion point (deletes selection). Requires a valid HTML string to be passed in as a value argument. (Not supported by Internet Explorer.)</dd>
</dl>
<dl> <dt>insertImage</dt> <dd>Inserts an image at the insertion point (deletes selection). Requires the image SRC URI string to be passed in as a value argument. The URI must contain at least a single character, which may be a white space. (Internet Explorer will create a link with a null URI value.)</dd>
</dl>
<dl> <dt>insertOrderedList</dt> <dd>Creates a numbered ordered list for the selection or at the insertion point.</dd>
</dl>
<dl> <dt>insertUnorderedList</dt> <dd>Creates a bulleted unordered list for the selection or at the insertion point.</dd>
</dl>
<dl> <dt>insertParagraph</dt> <dd>Inserts a paragraph around the selection or the current line. (Internet Explorer inserts a paragraph at the insertion point and deletes the selection.)</dd>
</dl>
<dl> <dt>italic</dt> <dd>Toggles italics on/off for the selection or at the insertion point. (Internet Explorer uses the EM tag instead of I.)</dd>
</dl>
<dl> <dt>justifyCenter</dt> <dd>Centers the selection or insertion point.</dd>
</dl>
<dl> <dt>justifyLeft</dt> <dd>Justifies the selection or insertion point to the left.</dd>
</dl>
<dl> <dt>justifyRight</dt> <dd>Right-justifies the selection or the insertion point.</dd>
</dl>
<dl> <dt>outdent</dt> <dd>Outdents the line containing the selection or insertion point.</dd>
</dl>
<dl> <dt>paste</dt> <dd>Pastes the clipboard contents at the insertion point (replaces current selection). Clipboard capability must be enabled in the user.js preference file. See <a class="external" href="http://www.mozilla.org/editor/midasdemo/securityprefs.html"></a></dd>
</dl>
<dl> <dt>redo</dt> <dd>Redoes the previous undo command.</dd>
</dl>
<dl> <dt>removeFormat</dt> <dd>Removes all formatting from the current selection.</dd>
</dl>
<dl> <dt>selectAll</dt> <dd>Selects all of the content of the editable region.</dd>
</dl>
<dl> <dt>strikeThrough</dt> <dd>Toggles strikethrough on/off for the selection or at the insertion point.</dd>
</dl>
<dl> <dt>subscript</dt> <dd>Toggles subscript on/off for the selection or at the insertion point.</dd>
</dl>
<dl> <dt>superscript</dt> <dd>Toggles superscript on/off for the selection or at the insertion point.</dd>
</dl>
<dl> <dt>underline</dt> <dd>Toggles underline on/off for the selection or at the insertion point.</dd>
</dl>
<dl> <dt>undo</dt> <dd>Undoes the last executed command.</dd>
</dl>
<dl> <dt>unlink</dt> <dd>Removes the anchor tag from a selected anchor link.</dd>
</dl>
<dl> <dt>useCSS {{ Deprecated_inline() }}</dt> <dd>Toggles the use of HTML tags or CSS for the generated markup. Requires a boolean true/false as a value argument. NOTE: This argument is logically backwards (i.e. use false to use CSS, true to use HTML). (Not supported by Internet Explorer.) This has been deprecated; use the <em>styleWithCSS</em> command instead.</dd>
</dl>
<dl> <dt>styleWithCSS</dt> <dd>Replaces the <em>useCSS</em> command; argument works as expected, i.e. true modifies/generates <em>style</em> attributes in markup, false generates formatting elements.</dd>
</dl>
</blockquote>
<h3 name="Internet_Explorer_Differences">Internet Explorer Differences</h3>
<p>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><strong>Figure 1 : Generated HTML differences</strong></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><em><strong>DevEdge</strong></em> provides a JavaScript helper class, <code><a href="/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="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>
<strong>Event Handling Disabled</strong></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>
<p><strong>More information</strong> can be found in the <a href="/en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing">Rich text editing</a> section of <a href="/en/Migrate_apps_from_Internet_Explorer_to_Mozilla" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla">Migrate apps from Internet Explorer to Mozilla</a>.</p>
<h3 name="Examples">Examples</h3>
<p><em> <strong>Please note:</strong> The example files are still being migrated from another site. They are not available at this time.</em> --<a href="/User:Fumble" title="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><strong>Figure 2 : First example</strong></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><strong>Figure 3 : Setting up rich-text editing</strong></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><strong>Figure 4 : Executing Rich Editing Commands</strong></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>{{ MSDN("ms533720", "designMode Property") }}</li> <li>{{ MSDN("ms537834", "How to Create an HTML Editor Application") }}</li> <li><a class="external" href="http://www.kevinroth.com/rte/demo.htm">A closed source, cross-browser rich-text editing demo</a></li> <li><a href="/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li> <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-contenteditable/">Firefox 3 and contentEditable</a></li>
</ul>
<p>{{ languages( { "zh-cn": "Cn/Rich-Text_Editing_in_Mozilla", "en": "en/Rich-Text_Editing_in_Mozilla", "ja": "Ja/Rich-Text_Editing_in_Mozilla", "it": "it/Rich-Text_Editing_in_Mozilla"} ) }}</p>
<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" title="User:Fumble">Joel Coreson</a></li> <li>Revised: 28 Nov 2006, <a class="link-mailto" href="mailto:kkuhns@ComputronicsUSA.com">Ken Kuhns</a>, <a class="external" href="http://www.ComputronicsUSA.com">ComputronicsUSA</a></li> <li>Revised: 19 Dec 2007, <a href="/User:MarkFinkle" title="User:MarkFinkle">Mark Finkle</a></li>
</ul>
</div>
Revert to this revision