Firefox 中 contenteditable 的问题答案

【问题标题】：Problems with contenteditable in FirefoxFirefox 中 contenteditable 的问题
【发布时间】：2011-02-26 13:02:20
【问题描述】：

我正在开发 Firefox 中的 Javascript WYSIWYG 编辑器。我正在使用将 contenteditable 属性设置为 true 的 div 来完成此操作（我不能为这个特定项目使用 contenteditable iframe）。此 contenteditable div 嵌套在另一个不可 contenteditable 的 div 中。我在使用 execCommand 应用格式时遇到以下两个问题，包括字体样式和大小，以及粗体、斜体和下划线：

当 div 中的所有文本都被选中时，execCommand 根本不起作用。 execCommand 在仅选择部分文本时工作正常，但在选择所有文本时不执行任何操作。
在未选择文本的情况下应用格式会产生意外结果。例如，在没有选择文本的情况下调用 execCommand('bold') 然后键入会导致键入粗体文本，直到插入空格键，此时粗体格式丢失（直到插入另一个空格，有趣的是；然后文本再次变为粗体）。

要明白我的意思，请尝试在 Firefox 3 中运行以下 HTML 代码：

<html>
<head><title></title></head>
<body>
<button onClick="execCommand('bold', false, null);">Bold</button>
<div style="width: 300px; border: 1px solid #000000;">
<div contenteditable="true">Some editable text</div>
</div>
</body>
</html>

请尝试以下方法：

仅选择“一些”一词。单击粗体按钮。正如预期的那样，这将使文本变为粗体。
选择整个短语“一些可编辑的文本”（手动或使用 CTRL-A）。单击粗体按钮。什么都没发生。这演示了上面显示的第一个错误。
按退格键清除 div。单击粗体按钮并开始输入。键入几个带空格的单词。这将演示第二个错误。

任何关于可能导致这些问题的原因以及如何解决这些问题的想法都将不胜感激！

【问题讨论】：

我忘了注意的一件事-上述问题仅在Firefox中； Safari 和 IE 似乎没有这些问题。

标签： javascript html firefox wysiwyg contenteditable

【解决方案1】：

有趣。在 Firefox 3.6.3 中，我无法复制第一个问题：选择所有可编辑文本并按下按钮会按预期切换粗体。但是，我确实看到了其他两个问题。它们将是 Mozilla 的 contenteditable 实现中的错误。

有趣的是，如果您使用designMode 而不是contenteditable，则不会出现备用单词粗体问题。我怀疑它也会解决你的其他问题。这涉及使整个文档可编辑，而不仅仅是其中的元素：

window.onload = function() {
    document.designMode = "on";
};

如果这不是一个选项，并且您需要contenteditable 提供的精细控制，则需要使用 DOM 操作和范围来实现您自己的粗体命令版本。这将涉及到在 IE 和非 IE 浏览器中工作。

【讨论】：

感谢您的建议。我把火狐从 3.5.9 更新到 3.6.3，第一个 issue 没了！他们一定已经发现并纠正了这个错误。不幸的是，设计模式不是我的选择。这仅在可编辑区域是 iframe 时才有效，但我正在使用 div。打开设计模式使整个文档可编辑。必须有另一种解决方法，因为不使用 iframe 的 Nicedit (nicedit.com/demos.php) 没有粗体问题。我可能只需要检查 Nicedit 源代码，除非其他人对如何使这项工作有任何想法......
哎呀！我错过了关于编写自定义粗体命令的最后几句话。我可能会这样做；唯一导致问题的浏览器是 FF，所以我的替代解决方案只需编写为与 FF 兼容。再次感谢你的帮助！非常感谢！
这是一个奇怪的错误。无论如何，在尝试了更多之后，我能够通过在 execCommand 调用之前在 contenteditable div 上调用 focus() 来修复它。它现在可以正常工作了。