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

【问题标题】：How do I make a div contentEditable in an xul file (Firefox Extension)?如何在 xul 文件（Firefox 扩展）中使 div 内容可编辑？
【发布时间】：2011-06-24 20:53:09
【问题描述】：

这是我关于 stackoverflow 的第一个问题，但我在这里做了很多次旅行以解决其他问题，但我找不到这个问题的答案：如何在 xul 文件中制作 div contentEditable for Firefox 扩展？

-以下是我的 .xul 文件的一部分，其中包含我想要 contentEditable 的 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 成为可能？

【问题讨论】：

标签： html xul

【解决方案1】：

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

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

也就是说，如果contentEditable 在 XUL 中不能正常工作，我不会感到惊讶——嵌入在 XUL 中的 HTML 通常没有达到预期的效果。最好使用<iframe> 标签，将 HTML 文件加载到其中（例如about:blank）并在此文档上设置document.designMode = "on"。

【讨论】：