Midas (Gecko Rich Text Editor) in XUL through the <editor> element cannot be enabled

I am trying to use Midas through the element of XUL following the instructions of this article. So far I have the code below:

<window id="main" title="Anunciador Blog Editor" width="300" height="300"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <script type="application/x-javascript">
    <![CDATA[ 
    var editor = null;
    function onLoad() {
        editor = document.getElementById('editor');
        editor.contentDocument.designMode = 'on';
    }

    function o开发者_开发知识库nBoldButtonCommand() {
        editor.contentDocument.execCommand('bold', false, null);
    }

    window.addEventListener("load", onLoad, false);
    ]]>
    </script>
    <button label="Bold" oncommand="onBoldButtonCommand();" />
    <editor id="editor" type="content-primary" editortype="html" src="about:blank" flex="1" />
</window>

However, when I click in the "Bold" button with some text selected in the <editor>, the text is not altered and the JS console presents the following error:

Error: uncaught exception: [Exception... "Component returned failure code: 0x80004005
(NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.execCommand]"  nsresult: "0x80004005
(NS_ERROR_FAILURE)"  location: "JS frame :: chrome://anunciador/content/main.xul :: 
onBoldButtonCommand :: line 14"  data: no]

That does not make sense to me because I have enabled the edit mode with:

editor.contentDocument.designMode = 'on';

Also, if I only change the line

<editor id="editor" type="content-primary" editortype="html" src="about:blank" flex="1" />

to

<xhtml:iframe id="editor" src="about:blank"></xhtml:iframe>

I can edit and format the text in the iframe (but I really prefer to use editor).

Did I forget something?

After a long research, it seems that the problem is a bug in Gecko - a recurrent one, BTW. Apparently, it is finally solved..

While we wait for a public build (or if you cannot use the future newer version of XULRunner or Firefox), you can use the commandManager property of the editor as a workaround. This object provides a method called doCommand() which can be used for formatting text. This method has three parameters: a string representing the command (which is different from the one accepted by execCommand(), a param object (which is REALLY cumbersome of obtaining but can be ignored for some time) and the contentWindow of the editor.

If you want e.g. to make the selection bold, just use this method this way:

function onBoldButtonCommand() {
    editor.commandManager.doCommand("cmd_bold", {}, editor.contentWindow)
}

If your command needs params, however, it can become a bit more complicated. First, you will need an instance of the nsICommandParams interface (which will be a C++ object wrapped by JavaScript object). Obtaining this object involves some very esoteric code, apparently involving something like XPCOM or whatnot:

var commandParams = Components.classes['@mozilla.org/embedcomp/command-params;1'].getService(Components.interfaces.nsICommandParams);

In this object we will set the parameters of the command as key-value pairs. There we have a list of parameters accepted by all commands. Do not be afraid of the fact of this page refers to C++ code - you can map it to JavaScript intuitively. Also, hopefully it seems that all commands receive only one param, "state_attribute". If we want to set the color of a text, for example, we set the parameter this way in the param object:

commandParams.setCStringValue("state_attribute", "#FF0000");

Then you "just" call doCommand() using the parameter this time:

editor.commandManager.doCommand("cmd_fontColor", commandParams, editor.contentWindow);

The code below is a working example of using doCommand() both with and without parameters:

<window id="main" title="Anunciador Blog Editor" width="300" height="300"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <script type="application/x-javascript">
   <![CDATA[
   var editor = null;
   function onLoad() {
       editor = document.getElementById('editor');
       editor.contentDocument.designMode = 'on';
   }

   function onBoldButtonCommand() {
       editor.commandManager.doCommand("cmd_bold", {}, editor.contentWindow)
   }

    function onRedTextCommand() {
        var commandParams = Components.classes['@mozilla.org/embedcomp/command-params;1'].getService(Components.interfaces.nsICommandParams);
        commandParams.setCStringValue("state_attribute", "#FF0000");
        editor.commandManager.doCommand("cmd_fontColor", commandParams, editor.contentWindow)
    }

   window.addEventListener("load", onLoad, false);
   ]]>
   </script>
   <toolbar>
       <button label="Bold" oncommand="onBoldButtonCommand();" />
       <button label="Red" oncommand="onRedTextCommand();" />
   </toolbar>
   <editor id="editor" type="content-primary" editortype="html" src="about:blank" flex="1" />
</window>

Also, this page can be helpful and this one yet more helpful (although partly written in French!).