如何使 xul 文件中的 div 内容可编辑（Firefox 扩展）？

Question

这是我在 stackoverflow 上遇到的第一个问题，但我已经多次来这里解决其他问题，但我找不到这个问题的答案：How do I make a div contentEditable in an x​​ul file for a Firefox Extension ？

-以下是我的 .xul 文件的一部分，其中包含我想要内容可编辑的 div：

<page id="sbEmptySidebar" title="&emptysidebar.title;"
     xmlns:html="http://www.w3.org/1999/xhtml">
<vbox flex="1">
<label id="atest" value="&emptysidebar.title;" />
</vbox>
<html:div contentEditable value="Tryitout" style="width:150px;height:200px"/>
<html:input type="button" value="Bold" onclick="document.execCommand('bold',false,null);"/>
</page>

当我这样做时，我在扩展的侧栏中收到以下错误：

XML Parsing Error: not well-formed<br/>
Location: chrome://emptysidebar/content/emptysidebar.xul<br/>
Line Number 41, Column 29:<br/>
`<html:div contentEditable value="Tryitout"style="width:150px;height:200px"/>
-------------------------------^`

我发现了一些 div 是这样完成的示例，这里不只是说 contentEditable，而是说 contentEditable="true":

<page id="sbEmptySidebar" title="&emptysidebar.title;"
xmlns:html="http://www.w3.org/1999/xhtml">
<vbox flex="1">
<label id="atest" value="&emptysidebar.title;" />
</vbox>
<html:div contentEditable="true" value="Tryitout" style="width:150px;height:200px"/>
<html:input type="button" value="Bold" onclick="document.execCommand('bold',false,null);"/>
</page>

当我这样做时，我没有收到任何错误，但除了一个空白的 150x200 像素框之外什么也没有显示。我是否遗漏了一些东西，使 Firefox 扩展的 xul 文件中的 contentEditable div 成为可能？

Answer 1

您在这里使用的是 XHTML，而不是 HTML。它必须遵循 XML 规则，并且 XML 不支持属性最小化，请参阅 http: //www.w3.org/TR/xhtml1/#h-4.5。您应该使用完整的形式：

<html:div contentEditable="contentEditable" ...

也就是说，如果 contentEditable 在 XUL 中无法正常工作，我不会感到惊讶 - XUL 中嵌入的 HTML 通常不会执行预期的操作。最好使用 标记，将 HTML 文件加载到其中（例如 about:blank）并设置 document.designMode = "on “ 在本文档中。