Question

我正在使用Firefox中的Javascript WYSIWYG编辑器。我使用div将contenteditable属性设置为true以实现此目的（我不能为这个特定项目使用contenteditable iframe）。这个令人满意的div嵌套在另一个不满足的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。单击“粗体”按钮并开始键入。用空格键入几个单词。这将证明第二个错误。

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

Answer 1

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

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

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

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

在Firefox中满足的问题

1 个答案: