通过<editor>元素在XUL中的Midas(Gecko Rich Text Editor)无法启用</editor>

时间:2011-07-12 15:01:14

标签: javascript xul midas-editor

我正按照Midas的说明,尝试在 element的XUL中使用this article。到目前为止,我有以下代码:

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

但是,当我点击“粗体”按钮并在<editor>中选择了一些文本时,文本不会被更改,并且JS控制台会出现以下错误:

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]

这对我没有意义,因为我已启用编辑模式:

editor.contentDocument.designMode = 'on';

另外,如果我只更改行

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

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

我可以编辑和格式化iframe中的文本(但我更喜欢使用编辑器)。

我忘记了什么吗?

1 个答案:

答案 0 :(得分:3)

经过长时间的研究,似乎问题是bug in Gecko - 一个经常性的问题,BTW。显然,终于 solved.

在我们等待公共构建时(或者如果您不能使用未来较新版本的XULRunner或Firefox),您可以使用编辑器的commandManager property作为解决方法。此对象提供了一个名为doCommand()的方法,可用于格式化文本。这个方法有三个参数:一个表示命令的字符串(与execCommand()接受的字符串不同),一个param对象(获取但是可以忽略一段时间非常麻烦)和{{1}编辑。

如果你想要,例如要使选择变粗,只需使用此方法:

contentWindow

但是,如果你的命令需要params,它可能会变得有点复杂。首先,您需要一个nsICommandParams interface的实例(它将是一个由JavaScript对象包装的C ++对象)。获取此对象涉及一些非常深奥的代码,显然涉及XPCOM或诸如此类的东西:

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

在此对象中,我们将命令的参数设置为键值对。 There我们有一个所有命令都接受的参数列表。不要害怕这个页面引用C ++代码的事实 - 你可以直观地将它映射到JavaScript。此外,希望似乎所有命令只接收一个参数var commandParams = Components.classes['@mozilla.org/embedcomp/command-params;1'].getService(Components.interfaces.nsICommandParams); 。例如,如果我们要设置color of a text,我们在param对象中以这种方式设置参数:

"state_attribute"

然后你“只是”这次使用参数调用commandParams.setCStringValue("state_attribute", "#FF0000");

doCommand()

下面的代码是使用带有和不带参数的editor.commandManager.doCommand("cmd_fontColor", commandParams, editor.contentWindow); 的工作示例:

doCommand()

此外,page可以提供帮助,this one更有帮助(虽然部分用法语写的!)。