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)
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.
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
xbDesignMode, which is a wrapper for the designMode feature which hides the differences between IE and Mozilla.
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)
The first example is an HTML document setting its own
contentEditable attribute of the body tag needs to be set to "true". The example can be found here.
Figure 2 : First example - View Example
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
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
- mozilla.org's rich-text editing Specification
- mozilla.org's rich-text editing Demo
- Converting an app using document.designMode from IE to Mozilla at mozilla.org
- MSDN Documentation on designMode
- MSDN Demo
- A open source, cross-browser rich-text editing demo
document.designModehas been set for the
documentobject in a window, all documents in that window for that domain will remain editable.
- 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