Converting an app using document.designMode from IE to Mozilla.
This document provides an overview of porting an application using Internet Explorer's document.designMode="on" functionality over to the new Mozilla Rich Text Editing API. The first version of Mozilla that supports rich text editing fully is 1.3b. Note contenteditable is not supported by Mozilla at this time.
A demo of basic rich text editing functionality is available at http://www.mozilla.org/editor/midasdemo. This demo was NOT designed to function on both IE and Mozilla. It will be updated in the future. Note that there is a great deal of rich text editing functionality that goes beyond what IE provides. This will be documented elsewhere.
Note that many of the modifications you will have to make to enable your application to work with Mozilla are not specific to the new editor functionality - they are general modifications that would need to be made to make your application work on Mozilla anyway. Most of these are related to areas where Internet Explorer is not compliant with W3C specifications.
-
All instances of document.all.element must be replaced by document.getElementById('element'). When you do this, you must make sure that all your elements actually have an "id" attribute, since document.all works with both "id" and "name" attributes.
In addition, any places where you reference elements directly by name must be changed to use getElementById as well. For example, IE allows you to reference the style of a table element by using tablecell.style - with Mozilla, you must use document.getElementById('tablecell').style.
Finally, IE provides different arrays such as frames, so that you can use frames.iframename. For Mozilla, you must use document.getElementById to reference the iframe.
-
IE allows the focus() method to be used directly on an iframe. Technically, the focus method should be executed against the contentWindow. The following code fragment can be used to replace iframe.focus() and will work with IE and Mozilla.
document.getElementById("iframe").contentWindow.focus() -
Setting document.designMode must NOT be done in the script section of the head. We suggest the onLoad function for the body where the iframe is contained.
-
On IE, the document is obtained like this: iframename.document. This is then used to do things like execCommand, etc. This does not work on Mozilla. You must use document.getElementById("iframename").contentWindow.document. This method works on IE as well.
-
If you would like to provide tooltip text for your toolbar buttons, you must use the title= attribute for images in addition to the alt= attribute. The alt= attribute is provided for accessibility purposes and while IE does allow it to be used for tooltips, the W3C compliant way is to use title= which works on both IE and Mozilla. For more information, please see: http://www.hixie.ch/advocacy/alttext.
-
Currently, the command "createlink" does not support displaying a user interface. You use Javascript to query the URL from the user. For instance:
var szURL = prompt("Enter the URL", ""); . . . getDocument().execCommand('createlink',false,szURL); -
Due to ambiguity in the Microsoft specification for execCommand, Mozilla requires that you specify all three parameters in order to guarantee the behavior you are expecting.
-
In researching the parameters to formatblock for execCommand, we have determined that the current use of "Heading 1", "Preformatted", "Normal", etc. in most editors on the web is incorrect. These words are translated, so if you hardcode them in your application, it will not function on non-English browsers. Microsoft has provided non-localized versions of these identifiers and we suggest that they be used to guarantee your application works in all versions of IE, as well as Mozilla. Note that in all of our research, the Normal identifiers functions exactly like the Paragraph identifier.
Here is the mapping:
Localized Version Equivalent Normal <P> Heading 1 <H1> Heading 2 <H2> Heading 3 <H3> Heading 4 <H4> Heading 5 <H5> Heading 6 <H6> Paragraph <P> Preformatted <PRE> Address <ADDRESS> -
View source must be done differently for Mozilla. Here is a mapping between the two methods.
IE method to switch to source view:
iHTML = getDocument().body.innerHTML; getDocument().body.innerText = iHTML;
Mozilla method to switch to source view:
var html = document.createTextNode(getDocument().body.innerHTML); getDocument().body.innerHTML = ""; getDocument().body.appendChild(html);
IE method to switch back to regular view:
iText = getDocument().body.innerText; getDocument().body.innerHTML = iText;
Mozilla method to switch back to regular view:
var html = getDocument().createRange(); html.selectNodeContents(getDocument().body); getDocument().body.innerHTML = html.toString();
-
Inserting arbitrary HTML is not supported at this time. For an example of how to insert a table, please see the demo at http://www.mozilla.org/editor/midasdemo
pavels@capital.lv writes:
However it's still possible. See example:
tempdiv=document.createElement("div"); tempdiv.innerHTML="Here we add some html
One more line"; getDocument().body.appendChild(tempdiv); -
The print option to execCommand does not work with Mozilla.
To print the document, simply call the print() function on
contentWindow. For example:
document.getElementById("iframe").contentWindow.print(); - The backcolor option to execCommand behaves differently on Mozilla than on IE. It sets the background of the entire document. If you just want to hilite text, similar to the way backcolor behaves on IE, use hilitecolor.
-
If you would like to detect whether or not the version of Mozilla that is being used supports rich text editing at all, you can use this code snippet:
document.getElementById('edit').contentDocument.designMode = "on"; try { document.getElementById('edit').contentDocument.execCommand("undo", false, null); } catch (e) { alert("This demo is not supported on your level of Mozilla."); }