我正在 Firefox 中使用 Javascript 所见即所得编辑器。我正在使用一个将 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>
请尝试以下操作:
- 仅选择“一些”一词。单击粗体按钮。正如预期的那样，这将使文本变为粗体。
- 选择整个短语“Some editable text”(手动或使用 CTRL-A)。单击粗体按钮。什么都没发生。这演示了上面显示的第一个错误。
- 按退格键清除 div。单击粗体按钮并开始键入。键入几个带空格的单词。这将演示第二个错误。
对于可能导致这些问题的原因以及如何解决这些问题的任何想法，我们将不胜感激!
最佳答案
很有趣。在 Firefox 3.6.3 中，我无法重现第一个问题:选择所有可编辑文本并按下按钮会按预期切换粗体。但是，我确实看到了其他两个问题。它们将是 Mozilla 的 contenteditable 实现中的错误。
有趣的是，如果您使用 designMode 而不是 contenteditable，则不会发生 alternate-words-bold 问题。我怀疑它也会解决你的其他问题。这涉及使整个文档可编辑，而不仅仅是其中的元素:
window.onload = function() {
document.designMode = "on";
};
如果这不是一个选项并且您需要 contenteditable 提供的精细控制，您将需要使用 DOM 操作和范围来实现您自己的 bold 命令版本。这将涉及在 IE 和非 IE 浏览器中工作。
关于javascript - Firefox 中 contenteditable 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2953124/