This document is currently being migrated from another site. It is a work in progress and is not complete. --fumble 17:45, 22 Apr 2005 (PDT)
Mozilla 1.3 introduces an implementation of Micro$oft ® 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.
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)
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
- toggles the bold attribute of the selected text.
- generates a link from the selected text. Requires the URI to be passed in as the optional argument.
- deletes the current selection.
- changes the fontname of the selected text. Requires the name of font ("Arial" for example) to be passed in as the optional argument.
- changes the fontsize of the selected text. Requires the size to be passed in as the optional argument.
- changes the fontcolor of the selected text. Requires the color to be passed in as the optional argument.
- indents the text block where the caret is located.
- inserts an horizontal rule at the cursor's location.
- inserts an image at the cursor's location. Requires the url of the image to be passed in as the optional argument.
- inserts an ordered list.
- inserts an unordered list.
- toggles italicize attribute of the selected text.
- centers the current line.
- justifies the current line to the left.
- justifies the current line to the right.
- outdents the current line if it was indented before.
- redoes the previously undo command.
- removes all formatting from the current selection.
- selects all of the content of the editable region.
- toggles strikethrough attribute of the selected text.
- converts the current selection to subscript.
- converts the current selection to superscript.
- toggles underlining of the selected text.
- undoes the last executed command.
- removes the link information from the current selection.
- 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. 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 CSSand 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
Still working on it! More content coming soon...
Original Document Information
- Authors: Doron Rosenberg, Netscape Communications
- Published 04 Apr 2003 (Feedback)
- Revised 01 Jul 2003