2

我正在 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。单击粗体按钮并开始输入。键入几个带空格的单词。这将演示第二个错误。

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

4

1 回答 1

2

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

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

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

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

于 2010-06-01T23:55:19.917 回答