[Openfirst-cvscommit] base/config/functions/wysiwyg/gecko/dev Text Color.htm,NONE,1.1 Midas Specific
Brought to you by:
xtimg
Menu
▾
▴
[Openfirst-cvscommit] base/config/functions/wysiwyg/gecko/dev Text Color.htm,NONE,1.1 Midas Specification.htm,NONE,1.1 Midas Demo.htm,NONE,1.1 Converting an app using document_designMode from IE to Midas.htm,NONE,1.1 .DS_Store,NONE,1.1
Update of /cvsroot/openfirst/base/config/functions/wysiwyg/gecko/dev In directory sc8-pr-cvs1:/tmp/cvs-serv7583 Added Files: Text Color.htm Midas Specification.htm Midas Demo.htm Converting an app using document_designMode from IE to Midas.htm .DS_Store Log Message: initial upload --- NEW FILE: Text Color.htm --- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0051)http://www.mozilla.org/editor/midasdemo/colors.html --> <HTML><HEAD><TITLE>Text Color</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <SCRIPT> function selectColor(color) { parent.document.getElementById("edit").contentDocument.execCommand(parent.command, false, color); parent.document.getElementById("colorpalette").style.visibility="hidden"; parent.document.getElementById("edit").contentWindow.focus(); } function InitColorPalette() { if (document.getElementsByTagName) var x = document.getElementsByTagName('TD'); else if (document.all) var x = document.all.tags('TD'); for (var i=0;i<x.length;i++) { x[i].onmouseover = over; x[i].onmouseout = out; x[i].onclick = click; } } function over() { this.style.border='2px dotted white'; } function out() { this.style.border='1px solid gray'; } function click() { selectColor(this.id); } </SCRIPT> <META content="MSHTML 6.00.2800.1141" name=GENERATOR></HEAD> <BODY bgColor=white onload=InitColorPalette()> <TABLE cellSpacing=1 cellPadding=1 border=1> <TBODY> <TR> <TD id=#FFFFFF width=20 bgColor=#ffffff height=20><IMG height=1 width=1></TD> <TD id=#FFCCCC width=20 bgColor=#ffcccc height=20><IMG height=1 width=1></TD> <TD id=#FFCC99 width=20 bgColor=#ffcc99 height=20><IMG height=1 width=1></TD> <TD id=#FFFF99 width=20 bgColor=#ffff99 height=20><IMG height=1 width=1></TD> <TD id=#FFFFCC width=20 bgColor=#ffffcc height=20><IMG height=1 width=1></TD> <TD id=#99FF99 width=20 bgColor=#99ff99 height=20><IMG height=1 width=1></TD> <TD id=#99FFFF width=20 bgColor=#99ffff height=20><IMG height=1 width=1></TD> <TD id=#CCFFFF width=20 bgColor=#ccffff height=20><IMG height=1 width=1></TD> <TD id=#CCCCFF width=20 bgColor=#ccccff height=20><IMG height=1 width=1></TD> <TD id=#FFCCFF width=20 bgColor=#ffccff height=20><IMG height=1 width=1></TD></TR> <TR> <TD id=#CCCCCC width=20 bgColor=#cccccc height=20><IMG height=1 width=1></TD> <TD id=#FF6666 width=20 bgColor=#ff6666 height=20><IMG height=1 width=1></TD> <TD id=#FF9966 width=20 bgColor=#ff9966 height=20><IMG height=1 width=1></TD> <TD id=#FFFF66 width=20 bgColor=#ffff66 height=20><IMG height=1 width=1></TD> <TD id=#FFFF33 width=20 bgColor=#ffff33 height=20><IMG height=1 width=1></TD> <TD id=#66FF99 width=20 bgColor=#66ff99 height=20><IMG height=1 width=1></TD> <TD id=#33FFFF width=20 bgColor=#33ffff height=20><IMG height=1 width=1></TD> <TD id=#66FFFF width=20 bgColor=#66ffff height=20><IMG height=1 width=1></TD> <TD id=#9999FF width=20 bgColor=#9999ff height=20><IMG height=1 width=1></TD> <TD id=#FF99FF width=20 bgColor=#ff99ff height=20><IMG height=1 width=1></TD></TR> <TR> <TD id=#C0C0C0 width=20 bgColor=#c0c0c0 height=20><IMG height=1 width=1></TD> <TD id=#FF0000 width=20 bgColor=#ff0000 height=20><IMG height=1 width=1></TD> <TD id=#FF9900 width=20 bgColor=#ff9900 height=20><IMG height=1 width=1></TD> <TD id=#FFCC66 width=20 bgColor=#ffcc66 height=20><IMG height=1 width=1></TD> <TD id=#FFFF00 width=20 bgColor=#ffff00 height=20><IMG height=1 width=1></TD> <TD id=#33FF33 width=20 bgColor=#33ff33 height=20><IMG height=1 width=1></TD> <TD id=#66CCCC width=20 bgColor=#66cccc height=20><IMG height=1 width=1></TD> <TD id=#33CCFF width=20 bgColor=#33ccff height=20><IMG height=1 width=1></TD> <TD id=#6666CC width=20 bgColor=#6666cc height=20><IMG height=1 width=1></TD> <TD id=#CC66CC width=20 bgColor=#cc66cc height=20><IMG height=1 width=1></TD></TR> <TR> <TD id=#999999 width=20 bgColor=#999999 height=20><IMG height=1 width=1></TD> <TD id=#CC0000 width=20 bgColor=#cc0000 height=20><IMG height=1 width=1></TD> <TD id=#FF6600 width=20 bgColor=#ff6600 height=20><IMG height=1 width=1></TD> <TD id=#FFCC33 width=20 bgColor=#ffcc33 height=20><IMG height=1 width=1></TD> <TD id=#FFCC00 width=20 bgColor=#ffcc00 height=20><IMG height=1 width=1></TD> <TD id=#33CC00 width=20 bgColor=#33cc00 height=20><IMG height=1 width=1></TD> <TD id=#00CCCC width=20 bgColor=#00cccc height=20><IMG height=1 width=1></TD> <TD id=#3366FF width=20 bgColor=#3366ff height=20><IMG height=1 width=1></TD> <TD id=#6633FF width=20 bgColor=#6633ff height=20><IMG height=1 width=1></TD> <TD id=#CC33CC width=20 bgColor=#cc33cc height=20><IMG height=1 width=1></TD></TR> <TR> <TD id=#666666 width=20 bgColor=#666666 height=20><IMG height=1 width=1></TD> <TD id=#990000 width=20 bgColor=#990000 height=20><IMG height=1 width=1></TD> <TD id=#CC6600 width=20 bgColor=#cc6600 height=20><IMG height=1 width=1></TD> <TD id=#CC9933 width=20 bgColor=#cc9933 height=20><IMG height=1 width=1></TD> <TD id=#999900 width=20 bgColor=#999900 height=20><IMG height=1 width=1></TD> <TD id=#009900 width=20 bgColor=#009900 height=20><IMG height=1 width=1></TD> <TD id=#339999 width=20 bgColor=#339999 height=20><IMG height=1 width=1></TD> <TD id=#3333FF width=20 bgColor=#3333ff height=20><IMG height=1 width=1></TD> <TD id=#6600CC width=20 bgColor=#6600cc height=20><IMG height=1 width=1></TD> <TD id=#993399 width=20 bgColor=#993399 height=20><IMG height=1 width=1></TD></TR> <TR> <TD id=#333333 width=20 bgColor=#333333 height=20><IMG height=1 width=1></TD> <TD id=#660000 width=20 bgColor=#660000 height=20><IMG height=1 width=1></TD> <TD id=#993300 width=20 bgColor=#993300 height=20><IMG height=1 width=1></TD> <TD id=#996633 width=20 bgColor=#996633 height=20><IMG height=1 width=1></TD> <TD id=#666600 width=20 bgColor=#666600 height=20><IMG height=1 width=1></TD> <TD id=#006600 width=20 bgColor=#006600 height=20><IMG height=1 width=1></TD> <TD id=#336666 width=20 bgColor=#336666 height=20><IMG height=1 width=1></TD> <TD id=#000099 width=20 bgColor=#000099 height=20><IMG height=1 width=1></TD> <TD id=#333399 width=20 bgColor=#333399 height=20><IMG height=1 width=1></TD> <TD id=#663366 width=20 bgColor=#663366 height=20><IMG height=1 width=1></TD></TR> <TR> <TD id=#000000 width=20 bgColor=#000000 height=20><IMG height=1 width=1></TD> <TD id=#330000 width=20 bgColor=#330000 height=20><IMG height=1 width=1></TD> <TD id=#663300 width=20 bgColor=#663300 height=20><IMG height=1 width=1></TD> <TD id=#663333 width=20 bgColor=#663333 height=20><IMG height=1 width=1></TD> <TD id=#333300 width=20 bgColor=#333300 height=20><IMG height=1 width=1></TD> <TD id=#003300 width=20 bgColor=#003300 height=20><IMG height=1 width=1></TD> <TD id=#003333 width=20 bgColor=#003333 height=20><IMG height=1 width=1></TD> <TD id=#000066 width=20 bgColor=#000066 height=20><IMG height=1 width=1></TD> <TD id=#330099 width=20 bgColor=#330099 height=20><IMG height=1 width=1></TD> <TD id=#330033 width=20 bgColor=#330033 height=20><IMG height=1 width=1></TD></TR></TBODY></TABLE></BODY></HTML> --- NEW FILE: Midas Specification.htm --- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0045)http://www.mozilla.org/editor/midas-spec.html --> <HTML><HEAD><TITLE>Midas Specification</TITLE> <META http-equiv=content-type content="text/html; charset=ISO-8859-1"> <META content="Kathleen Brade" name=author><LINK href="Midas Specification-Dateien/persistent-style.css" type=text/css rel=stylesheet><LINK href="../images/mozilla-16.png" type=image/png rel=icon> <META content="MSHTML 6.00.2800.1141" name=GENERATOR></HEAD> <BODY> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=bannercell vAlign=top><A class=bannerlink href="http://www.mozilla.org/"><IMG class=mozillaorgbanner height=58 alt="" src="Midas Specification-Dateien/mozilla-banner.gif" width=600> </A></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=3 width="100%" border=0> <TBODY> <TR> <TD vAlign=top> <TABLE class=outersidebar border=0> <TBODY> <TR> <TD class=bordercell vAlign=top> <TABLE class=middlesidebar cellSpacing=3 border=0> <TBODY> <TR> <TD class=titlecell vAlign=top> <TABLE class=innersidebar cellSpacing=3 cellPadding=0 border=0> <TBODY> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/"><B>The Mozilla<BR>Organization</B></A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/mozorg.html">At A Glance</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/feedback.html">Feedback</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/get-involved.html">Get Involved</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/community.html">Newsgroups</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/MPL/">License Terms</A></TD></TR> <TR> <TD class=spacercell></TD></TR> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/catalog/"><B>Developer Docs</B></A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/roadmap.html">Roadmap</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/projects/">Projects</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/ports/">Ports</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/owners.html">Module Owners</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/hacking/">Hacking</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/source.html">Get the Source</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/build/">Build It</A></TD></TR> <TR> <TD class=spacercell></TD></TR> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/quality/"><B>Testing</B></A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/releases/">Download</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Report A Bug</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/bugs/">Bugzilla</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/quality/bug-writing-guidelines.html">Bug Writing</A></TD></TR> <TR> <TD class=spacercell></TD></TR> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/tools.html"><B>Tools</B></A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://lxr.mozilla.org/seamonkey/">View Source</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://tinderbox.mozilla.org/showbuilds.cgi?tree=SeaMonkey">Tree Status</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://bonsai.mozilla.org/cvsquery.cgi?treeid=default&module=SeaMonkeyAll&branch=HEAD&branchtype=match&dir=&file=&filetype=match&who=&whotype=match&sortby=Date&hours=2&date=day&mindate=&maxdate=&cvsroot=%2Fcvsroot">New Checkins</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://bugzilla.mozilla.org/">Submit A Bug</A></TD></TR> <TR> <TD class=spacercell></TD></TR> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/faq.html"><B>FAQ</B></A></TD></TR> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/search.html"><B>Search</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD> <TD vAlign=top>Last revised: November 15, 2002<BR><BR>Midas is rich text editing controls for a document.<BR><BR> <H1>Enabling Midas:</H1> <DIV style="MARGIN-LEFT: 40px">Given a document, you can add the attribute "designMode" and set it to "on" to get an editable document. For example, in JavaScript, if you have an iframe with an id of 'edit', you can get its contentDocument and set designMode to "on" like this:<BR> <DIV style="MARGIN-LEFT: 40px"><CODE>document.getElementById("edit").contentDocument.designMode="on";</CODE> </DIV><BR>Right now, you can't completely turn off editing by setting designMode to "off." Setting designMode to "off" will prevent certain operations from being handled but typing and other actions are still possible.<BR></DIV><BR> <H1>Invoking Commands:</H1> <H2>execCommand<BR></H2> <DIV style="MARGIN-LEFT: 40px">Given a document that has Midas enabled, you can invoke specific commands on the document by calling execCommand with 3 parameters. For example, in JavaScript, if you have an editable document, you can invoke the bold command by calling this:<BR> <DIV style="MARGIN-LEFT: 40px"><CODE>editableDocument.execCommand("Bold", false, null); </CODE></DIV>Notes: If you haven't set designMode to "On", you will get an error. This could also happen if you call execCommand with the wrong document.<BR><BR>There are 3 required parameters for execCommand:<BR> <OL> <LI>command string <LI>boolean flag for showing UI <LI>value string </LI></OL>The first parameter is a string which contains the command. The second parameter is a boolean flag. If it is set to true, you will get an error (NS_ERROR_NOT_IMPLEMENTED). The third parameter is a string which is the value. Some commands will require details such as the particular size you want to set when setting a font size.<BR><BR>The section on Supported Commands will document each command and any corresponding values needed.<BR></DIV> <DIV style="MARGIN-LEFT: 40px"></DIV><BR> <H2>queryCommandEnabled</H2> <BLOCKQUOTE>This command operates on the editable document. There is one required parameter (the command string). The result is a boolean which is true if the command is can be done given the current selection and/or caret position. The result is false if the command should not be invoked (execCommand) given the current selection and/or caret position. <BR></BLOCKQUOTE><BR> <H2>queryCommandState</H2> <BLOCKQUOTE>xxx<BR></BLOCKQUOTE><BR> <H2>queryCommandValue</H2> <BLOCKQUOTE>xxx<BR></BLOCKQUOTE><BR> <H1>Supported Commands:</H1> <DIV style="MARGIN-LEFT: 40px">The following list of commands is presented in alphabetical order. The commands may be mixed case or whatever makes your code more readable.<BR><BR> <TABLE style="WIDTH: 100%; TEXT-ALIGN: left" cellSpacing=2 cellPadding=2 border=1> <TBODY> <TR> <TD style="VERTICAL-ALIGN: top">command<BR></TD> <TD style="VERTICAL-ALIGN: top">value<BR></TD> <TD style="VERTICAL-ALIGN: top">explanation / behavior<BR></TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">backcolor<BR></TD> <TD style="VERTICAL-ALIGN: top">????<BR></TD> <TD style="VERTICAL-ALIGN: top">This command is untested right now.<BR>This command will set the background color of the document.</TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">bold<BR></TD> <TD style="VERTICAL-ALIGN: top">none<BR></TD> <TD style="VERTICAL-ALIGN: top">If there is no selection, the insertion point will set bold for subsequently typed characters. <BR><BR>If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.<BR></TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">copy<BR></TD> <TD style="VERTICAL-ALIGN: top">none<BR></TD> <TD style="VERTICAL-ALIGN: top">If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen.<BR><BR>note: the shortcut key will automatically trigger this command (typically accel-C)<BR></TD></TR> <TR> <TD vAlign=top>createlink<BR></TD> <TD vAlign=top>url (href)<BR></TD> <TD vAlign=top>This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.<BR></TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">cut<BR></TD> <TD style="VERTICAL-ALIGN: top">none<BR></TD> <TD style="VERTICAL-ALIGN: top">If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen.<BR><BR>note: the shortcut key will automatically trigger this command (typically accel-X)<BR></TD></TR> <TR> <TD vAlign=top>delete<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top>This command will delete all text and objects that are selected.<BR></TD></TR> <TR> <TD vAlign=top>fontname<BR></TD> <TD vAlign=top>????<BR></TD> <TD vAlign=top>This command will set the fontface for a selection or at the insertion point if there is no selection.<BR></TD></TR> <TR> <TD vAlign=top>fontsize<BR></TD> <TD vAlign=top>????<BR></TD> <TD vAlign=top>This command will set the fontsize for a selection or at the insertion point if there is no selection.<BR></TD></TR> <TR> <TD vAlign=top>forecolor<BR></TD> <TD vAlign=top>????<BR></TD> <TD vAlign=top>This command is untested right now.<BR>This command will set the text color of the selection or at the insertion point.<BR></TD></TR> <TR> <TD vAlign=top>formatblock<BR></TD> <TD vAlign=top>????<BR></TD> <TD vAlign=top><BR></TD></TR> <TR> <TD vAlign=top>heading<BR></TD> <TD vAlign=top>????<BR></TD> <TD vAlign=top><BR></TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">indent<BR></TD> <TD style="VERTICAL-ALIGN: top">none<BR></TD> <TD style="VERTICAL-ALIGN: top">Indent the block where the caret is located.<BR></TD></TR> <TR> <TD vAlign=top>inserthorizontalrule<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top>This command will insert a horizontal rule (line) at the insertion point.<BR><BR>Does it delete the selection?<BR></TD></TR> <TR> <TD vAlign=top>insertimage<BR></TD> <TD vAlign=top>url (src)<BR></TD> <TD vAlign=top>This command will insert an image (referenced by url) at the insertion point.<BR><BR>Does it delete the selection?<BR></TD></TR> <TR> <TD vAlign=top>insertorderedlist<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top><BR></TD></TR> <TR> <TD vAlign=top>insertunorderedlist<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top><BR></TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">italic<BR></TD> <TD style="VERTICAL-ALIGN: top">none<BR></TD> <TD style="VERTICAL-ALIGN: top">If there is no selection, the insertion point will set italic for subsequently typed characters. <BR><BR>If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.</TD></TR> <TR> <TD vAlign=top>justifycenter<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top><BR></TD></TR> <TR> <TD vAlign=top>justifyfull<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top><BR></TD></TR> <TR> <TD vAlign=top>justifyleft<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top><BR></TD></TR> <TR> <TD vAlign=top>justifyright<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top><BR></TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">outdent<BR></TD> <TD style="VERTICAL-ALIGN: top">none<BR></TD> <TD style="VERTICAL-ALIGN: top">Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen.<BR><BR>note: is an error thrown if no outdenting is done?<BR></TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">paste<BR></TD> <TD style="VERTICAL-ALIGN: top">none<BR></TD> <TD style="VERTICAL-ALIGN: top">This command is disabled for the time being to prevent security exploits.<BR><BR>This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents.<BR><BR>note: the shortcut key will automatically trigger this command (typically accel-V)</TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">redo<BR></TD> <TD style="VERTICAL-ALIGN: top">none<BR></TD> <TD style="VERTICAL-ALIGN: top">This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect.<BR><BR>note: the shortcut key will automatically trigger this command (typically accel-shift-Z)</TD></TR> <TR> <TD vAlign=top>removeformat<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top><BR></TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">selectall<BR></TD> <TD style="VERTICAL-ALIGN: top">none<BR></TD> <TD style="VERTICAL-ALIGN: top">This command will select all of the contents within the editable area.<BR><BR>note: the shortcut key will automatically trigger this command (typically accel-A)<BR></TD></TR> <TR> <TD vAlign=top>strikethrough<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top>If there is no selection, the insertion point will set strikethrough for subsequently typed characters. <BR><BR>If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.<BR></TD></TR> <TR> <TD vAlign=top>subscript<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top>If there is no selection, the insertion point will set subscript for subsequently typed characters. <BR><BR>If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.<BR></TD></TR> <TR> <TD vAlign=top>superscript<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top>If there is no selection, the insertion point will set superscript for subsequently typed characters. <BR><BR>If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text<BR></TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">underline<BR></TD> <TD style="VERTICAL-ALIGN: top">none<BR></TD> <TD style="VERTICAL-ALIGN: top">If there is no selection, the insertion point will set underline for subsequently typed characters. <BR><BR>If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.</TD></TR> <TR> <TD style="VERTICAL-ALIGN: top">undo<BR></TD> <TD style="VERTICAL-ALIGN: top">none<BR></TD> <TD style="VERTICAL-ALIGN: top">This command will undo the previous action. If no action has occurred in the document, then this command will have no effect.<BR><BR>note: the shortcut key will automatically trigger this command (typically accel-Z)<BR></TD></TR> <TR> <TD vAlign=top>unlink<BR></TD> <TD vAlign=top>none<BR></TD> <TD vAlign=top><BR></TD></TR></TBODY></TABLE><BR></DIV><BR></TD></TR> <TR> <TD vAlign=top align=right colSpan=2> <DIV class=documentinfo>Copyright © 1998-2003 The Mozilla Organization. <BR>Last modified November 18, 2002. <BR><A href="http://www.mozilla.org/webtools/bonsai/cvslog.cgi?file=mozilla-org/html/editor/midas-spec.html&rev=&root=/cvsroot/">Document History</A>. <BR><A href="http://doctor.mozilla.org/?file=mozilla-org/html/editor/midas-spec.html">Edit this Page</A>. </DIV></TD></TR></TBODY></TABLE></BODY></HTML> --- NEW FILE: Midas Demo.htm --- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0040)http://www.mozilla.org/editor/midasdemo/ --> <HTML><HEAD><TITLE>Midas Demo</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <STYLE type=text/css>.imagebutton { BORDER-RIGHT: #c0c0c0 2px solid; BORDER-TOP: #c0c0c0 2px solid; BORDER-LEFT: #c0c0c0 2px solid; WIDTH: 23px; BORDER-BOTTOM: #c0c0c0 2px solid; HEIGHT: 22px; BACKGROUND-COLOR: #c0c0c0 } .image { BORDER-RIGHT: medium none; BORDER-TOP: medium none; LEFT: 1px; BORDER-LEFT: medium none; WIDTH: 21px; BORDER-BOTTOM: medium none; POSITION: relative; TOP: 1px; HEIGHT: 20px } .toolbar { HEIGHT: 30px; BACKGROUND-COLOR: #c0c0c0 } </STYLE> <SCRIPT> var command = ""; function InitToolbarButtons() { kids = document.getElementsByTagName('DIV'); for (var i=0; i < kids.length; i++) { if (kids[i].className == "imagebutton") { kids[i].onmouseover = tbmouseover; kids[i].onmouseout = tbmouseout; kids[i].onmousedown = tbmousedown; kids[i].onmouseup = tbmouseup; kids[i].onclick = tbclick; } } } function tbmousedown(e) { this.firstChild.style.left = 2; this.firstChild.style.top = 2; this.style.border="inset 2px"; e.preventDefault(); } function tbmouseup() { this.firstChild.style.left = 1; this.firstChild.style.top = 1; this.style.border="outset 2px"; } function tbmouseout() { this.style.border="solid 2px #C0C0C0"; } function tbmouseover() { this.style.border="outset 2px"; } function insertNodeAtSelection(win, insertNode) { // get current selection var sel = win.getSelection(); // get the first range of the selection // (there's almost always only one range) var range = sel.getRangeAt(0); // deselect everything sel.removeAllRanges(); // remove content of current selection from document range.deleteContents(); // get location of current selection var container = range.startContainer; var pos = range.startOffset; // make a new range for the new selection range=document.createRange(); if (container.nodeType==3 && insertNode.nodeType==3) { // if we insert text in a textnode, do optimized insertion container.insertData(pos, insertNode.nodeValue); // put cursor after inserted text range.setEnd(container, pos+insertNode.length); range.setStart(container, pos+insertNode.length); } else { var afterNode; if (container.nodeType==3) { // when inserting into a textnode // we create 2 new textnodes // and put the insertNode in between var textNode = container; container = textNode.parentNode; var text = textNode.nodeValue; // text before the split var textBefore = text.substr(0,pos); // text after the split var textAfter = text.substr(pos); var beforeNode = document.createTextNode(textBefore); var afterNode = document.createTextNode(textAfter); // insert the 3 new nodes before the old one container.insertBefore(afterNode, textNode); container.insertBefore(insertNode, afterNode); container.insertBefore(beforeNode, insertNode); // remove the old node container.removeChild(textNode); } else { // else simply insert the node afterNode = container.childNodes[pos]; container.insertBefore(insertNode, afterNode); } range.setEnd(afterNode, 0); range.setStart(afterNode, 0); } sel.addRange(range); }; function getOffsetTop(elm) { var mOffsetTop = elm.offsetTop; var mOffsetParent = elm.offsetParent; while(mOffsetParent){ mOffsetTop += mOffsetParent.offsetTop; mOffsetParent = mOffsetParent.offsetParent; } return mOffsetTop; } function getOffsetLeft(elm) { var mOffsetLeft = elm.offsetLeft; var mOffsetParent = elm.offsetParent; while(mOffsetParent){ mOffsetLeft += mOffsetParent.offsetLeft; mOffsetParent = mOffsetParent.offsetParent; } return mOffsetLeft; } function tbclick() { if ((this.id == "forecolor") || (this.id == "hilitecolor")) { parent.command = this.id; buttonElement = document.getElementById(this.id); document.getElementById("colorpalette").style.left = getOffsetLeft(buttonElement); document.getElementById("colorpalette").style.top = getOffsetTop(buttonElement) + buttonElement.offsetHeight; document.getElementById("colorpalette").style.visibility="visible"; } else if (this.id == "createlink") { var szURL = prompt("Enter a URL:", ""); document.getElementById('edit').contentWindow.document.execCommand("CreateLink",false,szURL) } else if (this.id == "createtable") { e = document.getElementById("edit"); rowstext = prompt("enter rows"); colstext = prompt("enter cols"); rows = parseInt(rowstext); cols = parseInt(colstext); if ((rows > 0) && (cols > 0)) { table = e.contentWindow.document.createElement("table"); table.setAttribute("border", "1"); table.setAttribute("cellpadding", "2"); table.setAttribute("cellspacing", "2"); tbody = e.contentWindow.document.createElement("tbody"); for (var i=0; i < rows; i++) { tr =e.contentWindow.document.createElement("tr"); for (var j=0; j < cols; j++) { td =e.contentWindow.document.createElement("td"); br =e.contentWindow.document.createElement("br"); td.appendChild(br); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); insertNodeAtSelection(e.contentWindow, table); } } else { document.getElementById('edit').contentWindow.document.execCommand(this.id, false, null); } } function Select(selectname) { var cursel = document.getElementById(selectname).selectedIndex; /* First one is always a label */ if (cursel != 0) { var selected = document.getElementById(selectname).options[cursel].value; document.getElementById('edit').contentWindow.document.execCommand(selectname, false, selected); document.getElementById(selectname).selectedIndex = 0; } document.getElementById("edit").contentWindow.focus(); } function dismisscolorpalette() { document.getElementById("colorpalette").style.visibility="hidden"; } function Start() { document.getElementById('edit').contentWindow.document.designMode = "on"; try { document.getElementById('edit').contentWindow.document.execCommand("undo", false, null); } catch (e) { alert("This demo is not supported on your level of Mozilla."); } InitToolbarButtons(); document.addEventListener("mousedown", dismisscolorpalette, true); document.getElementById("edit").contentWindow.document.addEventListener("mousedown", dismisscolorpalette, true); document.addEventListener("keypress", dismisscolorpalette, true); document.getElementById("edit").contentWindow.document.addEventListener("keypress", dismisscolorpalette, true); } </SCRIPT> <META content="MSHTML 6.00.2800.1141" name=GENERATOR></HEAD> <BODY onload=Start()> <H2>Please note that the changing of text format (Heading, Paragraph, etc.) will only function properly on a 1.3b build dated after January 26, 2003. Thanks.</H2> <TABLE id=toolbar1 bgColor=#c0c0c0> <TBODY> <TR> <TD> <DIV class=imagebutton id=cut><IMG class=image title=Cut alt=Cut src="Midas Demo-Dateien/cut.gif"></DIV></TD> <TD> <DIV class=imagebutton id=copy><IMG class=image title=Copy alt=Copy src="Midas Demo-Dateien/copy.gif"></DIV></TD> <TD> <DIV class=imagebutton id=paste><IMG class=image title=Paste alt=Paste src="Midas Demo-Dateien/paste.gif"></DIV> <TD></TD> <TD></TD> <TD> <DIV class=imagebutton id=undo><IMG class=image title=Undo alt=Undo src="Midas Demo-Dateien/undo.gif"></DIV></TD> <TD> <DIV class=imagebutton id=redo><IMG class=image title=Redo alt=Redo src="Midas Demo-Dateien/redo.gif"></DIV></TD> <TD></TD> <TD> <DIV class=imagebutton id=createlink style="LEFT: 10px"><IMG class=image title="Insert Link" alt="Insert Link" src="Midas Demo-Dateien/link.gif"></DIV></TD> <TD></TD> <TD> <DIV class=imagebutton id=createtable style="LEFT: 10px"><IMG class=image title="Insert Table" alt="Insert Table" src="Midas Demo-Dateien/table.gif"></DIV></TD></TR></TBODY></TABLE><BR> <TABLE id=toolbar2 bgColor=#c0c0c0> <TBODY> <TR> <TD><SELECT id=formatblock onchange=Select(this.id);> <OPTION value="<p>" selected>Normal</OPTION> <OPTION value="<p>">Paragraph</OPTION> <OPTION value="<h1>">Heading 1</OPTION> <OPTION value="<h2>">Heading 2</OPTION> <OPTION value="<h3>">Heading 3</OPTION> <OPTION value="<h4>">Heading 4</OPTION> <OPTION value="<h5>">Heading 5</OPTION> <OPTION value="<h6>">Heading 6</OPTION> <OPTION value="<address>">Address <ADDR></OPTION> <OPTION value="<pre>">Formatted</OPTION></SELECT> </TD> <TD><SELECT id=fontname onchange=Select(this.id);> <OPTION value=Font selected>Font</OPTION> <OPTION value=Arial>Arial</OPTION> <OPTION value=Courier>Courier</OPTION> <OPTION value="Times New Roman">Times New Roman</OPTION></SELECT> </TD> <TD><SELECT id=fontsize onchange=Select(this.id); unselectable="on"> <OPTION value=Size selected>Size</OPTION> <OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> <OPTION value=5>5</OPTION> <OPTION value=6>6</OPTION> <OPTION value=7>7</OPTION></SELECT> </TD> <TD> <DIV class=imagebutton id=bold><IMG class=image title=Bold alt=Bold src="Midas Demo-Dateien/bold.gif"></DIV></TD> <TD> <DIV class=imagebutton id=italic><IMG class=image title=Italic alt=Italic src="Midas Demo-Dateien/italic.gif"></DIV></TD> <TD> <DIV class=imagebutton id=underline><IMG class=image title=Underline alt=Underline src="Midas Demo-Dateien/underline.gif"></DIV></TD> <TD></TD> <TD> <DIV class=imagebutton id=forecolor style="LEFT: 10px"><IMG class=image title="Text Color" alt="Text Color" src="Midas Demo-Dateien/forecolor.gif"></DIV></TD> <TD> <DIV class=imagebutton id=hilitecolor style="LEFT: 40px"><IMG class=image title="Background Color" alt="Background Color" src="Midas Demo-Dateien/backcolor.gif"></DIV></TD> <TD></TD> <TD> <DIV class=imagebutton id=justifyleft style="LEFT: 10px"><IMG class=image title="Align Left" alt="Align Left" src="Midas Demo-Dateien/justifyleft.gif"></DIV></TD> <TD> <DIV class=imagebutton id=justifycenter style="LEFT: 40px"><IMG class=image title=Center alt=Center src="Midas Demo-Dateien/justifycenter.gif"></DIV></TD> <TD> <DIV class=imagebutton id=justifyright style="LEFT: 70px"><IMG class=image title="Align Right" alt="Align Right" src="Midas Demo-Dateien/justifyright.gif"></DIV></TD> <TD></TD> <TD> <DIV class=imagebutton id=insertorderedlist style="LEFT: 10px"><IMG class=image title="Ordered List" alt="Ordered List" src="Midas Demo-Dateien/orderedlist.gif"></DIV></TD> <TD> <DIV class=imagebutton id=insertunorderedlist style="LEFT: 40px"><IMG class=image title="Unordered List" alt="Unordered List" src="Midas Demo-Dateien/unorderedlist.gif"></DIV></TD> <TD></TD> <TD> <DIV class=imagebutton id=outdent style="LEFT: 10px"><IMG class=image title=Outdent alt=Outdent src="Midas Demo-Dateien/outdent.gif"></DIV></TD> <TD> <DIV class=imagebutton id=indent style="LEFT: 40px"><IMG class=image title=Indent alt=Indent src="Midas Demo-Dateien/indent.gif"></DIV></TD></TR></TBODY></TABLE><BR><IFRAME id=edit src="about:blank" width="100%" height=200></IFRAME><IFRAME id=colorpalette style="VISIBILITY: hidden; POSITION: absolute" src="Midas Demo-Dateien/colors.htm" width=250 height=170></IFRAME></IFRAME> <SCRIPT> function viewsource(source) { if (source) { var html = document.createTextNode(document.getElementById('edit').contentWindow.document.body.innerHTML); document.getElementById('edit').contentWindow.document.body.innerHTML = ""; document.getElementById('edit').contentWindow.document.body.appendChild(html); document.getElementById("toolbar1").style.visibility="hidden"; document.getElementById("toolbar2").style.visibility="hidden"; } else { var html = document.getElementById('edit').contentWindow.document.body.ownerDocument.createRange(); html.selectNodeContents(document.getElementById('edit').contentWindow.document.body); document.getElementById('edit').contentWindow.document.body.innerHTML = html.toString(); document.getElementById("toolbar1").style.visibility="visible"; document.getElementById("toolbar2").style.visibility="visible"; } } function usecss(source) { document.getElementById('edit').contentWindow.document.execCommand("useCSS", false, !(source)); } function readonly(source) { document.getElementById('edit').contentWindow.document.execCommand("readonly", false, !(source)); } </SCRIPT> <INPUT onclick=viewsource(this.checked) type=checkbox> View HTML Source</INPUT> <INPUT onclick=usecss(this.checked) type=checkbox CHECKED> Use CSS</INPUT> <INPUT onclick=readonly(this.checked) type=checkbox> Read only</INPUT> </BODY></HTML> --- NEW FILE: Converting an app using document_designMode from IE to Midas.htm --- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0043)http://www.mozilla.org/editor/ie2midas.html --> <HTML><HEAD><TITLE>Converting an app using document.designMode from IE to Midas.</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"><LINK href="Converting an app using document_designMode from IE to Midas-Dateien/persistent-style.css" type=text/css rel=stylesheet><LINK href="../images/mozilla-16.png" type=image/png rel=icon> <META content="MSHTML 6.00.2800.1141" name=GENERATOR></HEAD> <BODY> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=bannercell vAlign=top><A class=bannerlink href="http://www.mozilla.org/"><IMG class=mozillaorgbanner height=58 alt="" src="Converting an app using document_designMode from IE to Midas-Dateien/mozilla-banner.gif" width=600> </A></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=3 width="100%" border=0> <TBODY> <TR> <TD vAlign=top> <TABLE class=outersidebar border=0> <TBODY> <TR> <TD class=bordercell vAlign=top> <TABLE class=middlesidebar cellSpacing=3 border=0> <TBODY> <TR> <TD class=titlecell vAlign=top> <TABLE class=innersidebar cellSpacing=3 cellPadding=0 border=0> <TBODY> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/"><B>The Mozilla<BR>Organization</B></A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/mozorg.html">At A Glance</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/feedback.html">Feedback</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/get-involved.html">Get Involved</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/community.html">Newsgroups</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/MPL/">License Terms</A></TD></TR> <TR> <TD class=spacercell></TD></TR> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/catalog/"><B>Developer Docs</B></A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/roadmap.html">Roadmap</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/projects/">Projects</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/ports/">Ports</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/owners.html">Module Owners</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/hacking/">Hacking</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/source.html">Get the Source</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/build/">Build It</A></TD></TR> <TR> <TD class=spacercell></TD></TR> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/quality/"><B>Testing</B></A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/releases/">Download</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Report A Bug</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/bugs/">Bugzilla</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://www.mozilla.org/quality/bug-writing-guidelines.html">Bug Writing</A></TD></TR> <TR> <TD class=spacercell></TD></TR> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/tools.html"><B>Tools</B></A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://lxr.mozilla.org/seamonkey/">View Source</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://tinderbox.mozilla.org/showbuilds.cgi?tree=SeaMonkey">Tree Status</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://bonsai.mozilla.org/cvsquery.cgi?treeid=default&module=SeaMonkeyAll&branch=HEAD&branchtype=match&dir=&file=&filetype=match&who=&whotype=match&sortby=Date&hours=2&date=day&mindate=&maxdate=&cvsroot=%2Fcvsroot">New Checkins</A></TD></TR> <TR> <TD></TD> <TD class=linkcell><A href="http://bugzilla.mozilla.org/">Submit A Bug</A></TD></TR> <TR> <TD class=spacercell></TD></TR> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/faq.html"><B>FAQ</B></A></TD></TR> <TR> <TD class=linkcell colSpan=2><A href="http://www.mozilla.org/search.html"><B>Search</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD> <TD vAlign=top> <H2>Converting an app using document.designMode from IE to Midas. </H2> <P>This document provides an overview of porting an application using Internet Explorer's <SPAN style="FONT-FAMILY: monospace">document.designMode="on"</SPAN> functionality over to the new Mozilla Midas API. The first version of Mozilla that supports Midas fully is 1.3b. Note <SPAN style="FONT-FAMILY: monospace">contenteditable</SPAN> is not supported by Mozilla at this time. <P>A demo of basic Midas functionality is available at <A href="http://www.mozilla.org/editor/midasdemo">http://www.mozilla.org/editor/midasdemo</A>. 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 Midas functionality that goes beyond what IE provides. This will be documented elsewhere. </P> <P></P> <P>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. </P> <OL> <LI> <P>All instances of <SPAN style="FONT-FAMILY: monospace">document.all.element</SPAN> must be replaced by <SPAN style="FONT-FAMILY: monospace">document.getElementById('element')</SPAN>. When you do this, you must make sure that all your elements actually have an "id" attribute, since <SPAN style="FONT-FAMILY: monospace">document.all</SPAN> works with both "id" and "name" attributes. </P> <P>In addition, any places where you reference elements directly by name must be changed to use <SPAN style="FONT-FAMILY: monospace">getElementById</SPAN> as well. For example, IE allows you to reference the style of a table element by using <SPAN style="FONT-FAMILY: monospace">tablecell.style</SPAN> - with Mozilla, you must use <SPAN style="FONT-FAMILY: monospace">document.getElementById('tablecell').style</SPAN>.</P> <P>Finally, IE provides different arrays such as frames, so that you can use <SPAN style="FONT-FAMILY: monospace">frames.iframename</SPAN>. For Mozilla, you must use <SPAN style="FONT-FAMILY: monospace">document.getElementById</SPAN> to reference the iframe. </P> <LI> <P>IE allows the <SPAN style="FONT-FAMILY: monospace">focus()</SPAN> 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 <SPAN style="FONT-FAMILY: monospace">iframe.focus()</SPAN> and will work with IE and Mozilla.</P><PRE>document.getElementById("iframe").contentWindow.focus() </PRE> <LI> <P>Setting <SPAN style="FONT-FAMILY: monospace">document.designMode</SPAN> <STRONG>must NOT</STRONG> be done in the <SPAN style="FONT-FAMILY: monospace">script</SPAN> section of the <SPAN style="FONT-FAMILY: monospace">head</SPAN>. We suggest the onLoad function for the body where the iframe is contained.</P> <LI> <P>On IE, the document is obtained like this: <SPAN style="FONT-FAMILY: monospace">iframename.document</SPAN>. This is then used to do things like execCommand, etc. This does not work on Mozilla. You must use <SPAN style="FONT-FAMILY: monospace">document.getElementById("iframename").contentWindow.document</SPAN>. This method works on IE as well. </P> <LI> <P>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: <A href="http://www.hixie.ch/advocacy/alttext">http://www.hixie.ch/advocacy/alttext</A>. </P> <LI> <P>Currently, the command "createlink" does not support displaying a user interface. You use Javascript to query the URL from the user. For instance: <PRE>var szURL = prompt("Enter the URL", ""); . . . getDocument().execCommand('createlink',false,szURL); </PRE> <P></P> <LI> <P>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. </P> <LI> <P>In researching the parameters to <SPAN style="FONT-FAMILY: monospace">formatblock</SPAN> 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. </P> <P>Here is the mapping: </P> <TABLE border=1> <TBODY> <TR> <TD>Localized Version</TD> <TD>Equivalent</TD></TR> <TR> <TD>Normal</TD> <TD><P></TD></TR> <TR> <TD>Heading 1</TD> <TD><H1></TD></TR> <TR> <TD>Heading 2</TD> <TD><H2></TD></TR> <TR> <TD>Heading 3</TD> <TD><H3></TD></TR> <TR> <TD>Heading 4</TD> <TD><H4></TD></TR> <TR> <TD>Heading 5</TD> <TD><H5></TD></TR> <TR> <TD>Heading 6</TD> <TD><H6></TD></TR> <TR> <TD>Paragraph</TD> <TD><P></TD></TR> <TR> <TD>Preformatted</TD> <TD><PRE></TD></TR> <TR> <TD>Address</TD> <TD><ADDRESS></TD></TR></TBODY></TABLE> <LI> <P>View source must be done differently for Mozilla. Here is a mapping between the two methods. </P> <P>IE method to switch to source view: </P><PRE>iHTML = getDocument().body.innerHTML; getDocument().body.innerText = iHTML; </PRE> <P>Mozilla method to switch to source view: </P><PRE>var html = document.createTextNode(getDocument().body.innerHTML); getDocument().body.innerHTML = ""; getDocument().body.appendChild(html); </PRE> <P>IE method to switch back to regular view: </P><PRE>iText = getDocument().body.innerText; getDocument().body.innerHTML = iText; </PRE> <P>Mozilla method to switch back to regular view: </P><PRE>var html = getDocument().body.ownerDocument.createRange(); html.selectNodeContents(getDocument().body); getDocument().body.innerHTML = html.toString(); </PRE> <P></P> <LI> <P>Inserting arbitrary HTML is not supported at this time. For an example of how to insert a table, plese see the demo at <A href="http://www.mozilla.org/editor/midasdemo">http://www.mozilla.org/editor/midasdemo</A> </P> <LI>The <SPAN style="FONT-FAMILY: monospace">print</SPAN> option to execCommand does not work with Mozilla. To print the document, simply call the <SPAN style="FONT-FAMILY: monospace">print()</SPAN> function on contentWindow. For example: <PRE>document.getElementById("iframe").contentWindow.print(); </PRE> <LI>The <SPAN style="FONT-FAMILY: monospace">backcolor</SPAN> 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 <SPAN style="FONT-FAMILY: monospace">hilitecolor</SPAN>. <LI> <P>If you would like to detect whether or not the version of Mozilla that is being used support Midas at all, you can use this code snippet:</P><PRE>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."); } </PRE></LI></OL></TD></TR> <TR> <TD vAlign=top align=right colSpan=2> <DIV class=documentinfo>Copyright © 1998-2003 The Mozilla Organization. <BR>Last modified January 30, 2003. <BR><A href="http://www.mozilla.org/webtools/bonsai/cvslog.cgi?file=mozilla-org/html/editor/ie2midas.html&rev=&root=/cvsroot/">Document History</A>. <BR><A href="http://doctor.mozilla.org/?file=mozilla-org/html/editor/ie2midas.html">Edit this Page</A>. </DIV></TD></TR></TBODY></TABLE></BODY></HTML> --- NEW FILE: .DS_Store --- (This appears to be a binary file; contents omitted.) |
