Midas

  • Revision slug: Midas
  • Revision title: Midas
  • Revision id: 22491
  • Created:
  • Creator: Jonnyq
  • Is current revision? No
  • Comment

Revision Content

Introduction

Midas is the code name for Gecko's built-in rich text editor. Midas can be turned on via JavaScript on an HTML document. When Midas is turned on, the document becomed editable by the user. Scripting for Midas is based on the DHTML commands supported by Internet Explorer. Internet Explorer supports the ability to edit specific elements using the contentEditable attribute; Gecko does not support this. Internet Explorer supports the ability to make an entire document editable by setting the designMode property of the document object; this is how Midas is invoked in Gecko. Once Midas is invoked, a few more methods of the document object become available.

Properties

document.designMode
Midas is invoked by setting this property to "on".

Methods

document.execCommand()
Executes the given command.
document.queryCommandEnabled()
Determines whether the given command can be executed on the document in its current state.
document.queryCommandState()
Determines whether the given command has been executed on the current selection.
document.queryCommandValue()
Determines the current value of the document, range, or current selection for the given command.

Supported Commands

Command Value Description
backcolor This command will set the background color of the document.
bold If there is no selection, the insertion point will set bold for subsequently typed characters.

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.

contentReadOnly This command will make the editor readonly (true) or editable (false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.
copy If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen.

note: this command won't work without setting a pref or using signed JS. See: http://www.mozilla.org/editor/midasdemo/securityprefs.html

note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.

createlink 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.
cut 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.

note: this command won't work without setting a pref or using signed JS. See: http://www.mozilla.org/editor/midasdemo/securityprefs.html

note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.

decreasefontsize This command will add a tag around selection or at insertion point.
delete This command will delete all text and objects that are selected.
fontname This command will set the fontface for a selection or at the insertion point if there is no selection.
fontsize This command will set the fontsize for a selection or at the insertion point if there is no selection.
forecolor This command will set the text color of the selection or at the insertion point.
formatblock
heading
hilitecolor This command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.
increasefontsize This command will add a <big> tag around selection or at insertion point. </big>
indent Indent the block where the caret is located.
inserthorizontalrule This command will insert a horizontal rule (line) at the insertion point.

Does it delete the selection?

inserthtml This command will insert the given html into the <body> in place of the current selection or at the caret location.
insertimage This command will insert an image (referenced by url) at the insertion point.

Does it delete the selection?

insertorderedlist
insertunorderedlist
insertparagraph
italic If there is no selection, the insertion point will set italic for subsequently typed characters.

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.

justifycenter
justifyfull
justifyleft
justifyright
outdent Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen.

note: is an error thrown if no outdenting is done?

paste 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.

note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: http://www.mozilla.org/editor/midasdemo/securityprefs.html

note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.

redo This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect.

note: the shortcut key will automatically trigger this command (typically accel-shift-Z)

removeformat
selectall This command will select all of the contents within the editable area.

note: the shortcut key will automatically trigger this command (typically accel-A)

strikethrough If there is no selection, the insertion point will set strikethrough for subsequently typed characters.

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.

styleWithCSS This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate <b> if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.
subscript If there is no selection, the insertion point will set subscript for subsequently typed characters.

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.

superscript If there is no selection, the insertion point will set superscript for subsequently typed characters.

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.

underline If there is no selection, the insertion point will set underline for subsequently typed characters.

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.

undo This command will undo the previous action. If no action has occurred in the document, then this command will have no effect.

note: the shortcut key will automatically trigger this command (typically accel-Z)

unlink If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.
{{template.Deprecated_header()}}
readonly This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.
useCSS This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.

Revision Source

<p>
</p>
<h3 name="Introduction"> Introduction </h3>
<p>Midas is the code name for Gecko's built-in rich text editor.  Midas can be turned on via JavaScript on an HTML document.  When Midas is turned on, the document becomed editable by the user.  Scripting for Midas is based on the <a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/commandids.asp">DHTML commands</a> supported by Internet Explorer.  Internet Explorer supports the ability to edit specific elements using the <code>contentEditable</code> attribute; Gecko does not support this.  Internet Explorer supports the ability to make an entire document editable by setting the <code>designMode</code> property of the <a href="en/DOM/document">document</a> object; this is how Midas is invoked in Gecko.  Once Midas is invoked, a few more methods of the <code>document</code> object become available.
</p>
<h3 name="Properties"> Properties </h3>
<dl><dt><a href="en/Midas/designMode">document.designMode</a>
</dt><dd>Midas is invoked by setting this property to "on".
</dd></dl>
<h3 name="Methods"> Methods </h3>
<dl><dt><a href="en/Midas/execCommand">document.execCommand()</a>
</dt><dd> Executes the given command.
</dd><dt><a href="en/Midas/queryCommandEnabled">document.queryCommandEnabled()</a>
</dt><dd> Determines whether the given command can be executed on the document in its current state.
</dd><dt><a href="en/Midas/queryCommandState">document.queryCommandState()</a>
</dt><dd> Determines whether the given command has been executed on the current selection.
</dd><dt><a href="en/Midas/queryCommandValue">document.queryCommandValue()</a>
</dt><dd> Determines the current value of the document, range, or current selection for the given command.
</dd></dl>
<h3 name="Supported_Commands"> Supported Commands </h3>
<table class="standard-table">

<tbody><tr>
<td class="header">Command
</td><td class="header">Value
</td><td class="header">Description
</td></tr>

<tr>
<td>backcolor
</td><td>
</td><td>This command will set the background color of the document.
</td></tr>

<tr>
<td>bold
</td><td>
</td><td>If there is no selection, the insertion point will set bold for subsequently typed characters.
<p>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.
</p>
</td></tr>

<tr>
<td>contentReadOnly
</td><td>
</td><td>This command will make the editor readonly (true) or editable (false).  Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.
</td></tr>

<tr>
<td>copy
</td><td>
</td><td>If there is a selection, this command will copy the selection to the clipboard.  If there isn't a selection, nothing will happen.
<p>note: this command won't work without setting a pref or using signed JS.  See: http://www.mozilla.org/editor/midasdemo/securityprefs.html
</p><p>note:  the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.
</p>
</td></tr>

<tr>
<td>createlink
</td><td>
</td><td>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.
</td></tr>

<tr>
<td>cut
</td><td>
</td><td>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.
<p>note: this command won't work without setting a pref or using signed JS.  See: http://www.mozilla.org/editor/midasdemo/securityprefs.html
</p><p>note:  the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.
</p>
</td></tr>

<tr>
<td>decreasefontsize
</td><td>
</td><td>This command will add a <small> tag around selection or at insertion point.
</small></td></tr>

<tr>
<td>delete
</td><td>
</td><td>This command will delete all text and objects that are selected.
</td></tr>

<tr>
<td>fontname
</td><td>
</td><td>This command will set the fontface for a selection or at the insertion point if there is no selection.
</td></tr>

<tr>
<td>fontsize
</td><td>
</td><td>This command will set the fontsize for a selection or at the insertion point if there is no selection.
</td></tr>

<tr>
<td>forecolor
</td><td>
</td><td>This command will set the text color of the selection or at the insertion point.
</td></tr>

<tr>
<td>formatblock
</td><td>
</td><td>
</td></tr>

<tr>
<td>heading
</td><td>
</td><td>
</td></tr>

<tr>
<td>hilitecolor
</td><td>
</td><td>This command will set the hilite color of the selection or at the insertion point.  It only works with styleWithCSS enabled.
</td></tr>

<tr>
<td>increasefontsize
</td><td>
</td><td>This command will add a <big> tag around selection or at insertion point.
</big></td></tr>

<tr>
<td>indent
</td><td>
</td><td>Indent the block where the caret is located.
</td></tr>

<tr>
<td>inserthorizontalrule
</td><td>
</td><td>This command will insert a horizontal rule (line) at the insertion point.
<p>Does it delete the selection?
</p>
</td></tr>

<tr>
<td>inserthtml
</td><td>
</td><td>This command will insert the given html into the &lt;body&gt; in place of the current selection or at the caret location.
</td></tr>

<tr>
<td>insertimage
</td><td>
</td><td>This command will insert an image (referenced by url) at the insertion point.
<p>Does it delete the selection?
</p>
</td></tr>

<tr>
<td>insertorderedlist
</td><td>
</td><td>
</td></tr>

<tr>
<td>insertunorderedlist
</td><td>
</td><td>
</td></tr>

<tr>
<td>insertparagraph
</td><td>
</td><td>
</td></tr>

<tr>
<td>italic
</td><td>
</td><td>If there is no selection, the insertion point will set italic for subsequently typed characters.
<p>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.
</p>
</td></tr>

<tr>
<td>justifycenter
</td><td>
</td><td>
</td></tr>

<tr>
<td>justifyfull
</td><td>
</td><td>
</td></tr>

<tr>
<td>justifyleft
</td><td>
</td><td>
</td></tr>

<tr>
<td>justifyright
</td><td>
</td><td>
</td></tr>

<tr>
<td>outdent
</td><td>
</td><td>Outdent the block where the caret is located.  If the block is not indented prior to calling outdent, nothing will happen.
<p>note:  is an error thrown if no outdenting is done?
</p>
</td></tr>

<tr>
<td>paste
</td><td>
</td><td>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.
<p>note: this command won't work without setting a pref or using signed JS.
user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
See: http://www.mozilla.org/editor/midasdemo/securityprefs.html
</p><p>note:  the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.
</p>
</td></tr>

<tr>
<td>redo
</td><td>
</td><td>This command will redo the previous undo action.  If undo was not the most recent action, this command will have no effect.
<p>note:  the shortcut key will automatically trigger this command (typically accel-shift-Z)
</p>
</td></tr>

<tr>
<td>removeformat
</td><td>
</td><td>
</td></tr>

<tr>
<td>selectall
</td><td>
</td><td>This command will select all of the contents within the editable area.
<p>note:  the shortcut key will automatically trigger this command (typically accel-A)
</p>
</td></tr>

<tr>
<td>strikethrough
</td><td>
</td><td>If there is no selection, the insertion point will set strikethrough for subsequently typed characters.
<p>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.
</p>
</td></tr>

<tr>
<td>styleWithCSS
</td><td>
</td><td>This command is used for toggling the format of generated content.  By default (at least today), this is true.  An example of the differences is that the "bold" command will generate &lt;b&gt; if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.
</td></tr>

<tr>
<td>subscript
</td><td>
</td><td>If there is no selection, the insertion point will set subscript for subsequently typed characters.
<p>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.
</p>
</td></tr>

<tr>
<td>superscript
</td><td>
</td><td>If there is no selection, the insertion point will set superscript for subsequently typed characters.
<p>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.
</p>
</td></tr>

<tr>
<td>underline
</td><td>
</td><td>If there is no selection, the insertion point will set underline for subsequently typed characters.
<p>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.
</p>
</td></tr>

<tr>
<td>undo
</td><td>
</td><td>This command will undo the previous action.  If no action has occurred in the document, then this command will have no effect.
<p>note:  the shortcut key will automatically trigger this command (typically accel-Z)
</p>
</td></tr>

<tr>
<td>unlink
</td><td>
</td><td>If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.
</td></tr>
<tr>
<td colspan="3">{{template.Deprecated_header()}}
</td></tr>

<tr>
<td>readonly
</td><td>
</td><td>This command has been replaced with contentReadOnly.  It takes the same values as contentReadOnly, but the meaning of true and false are inversed.
</td></tr>

<tr>
<td>useCSS
</td><td>
</td><td>This command has been replaced with styleWithCSS.  It takes the same values as styleWithCSS, but the meaning of true and false are inversed.
</td></tr>
</tbody></table>
<p>
</p>
Revert to this revision