Firefox 中的 contenteditable 问题
我正在 Firefox 中开发 Javascript WYSIWYG 编辑器。我使用将 contenteditable 属性设置为 true 的 div 来实现此目的（我无法在该特定项目中使用 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>
请尝试以下操作：
- 仅选择单词“Some”。单击粗体按钮。这将使文本变为粗体，如预期的那样。
- 选择整个短语“Some editable text”（手动或使用 CTRL-A）。单击粗体按钮。什么也没发生。这演示了上面显示的第一个错误。
- 按退格键清除 div。单击粗体按钮并开始输入。输入几个带有空格的单词。这将演示第二个错误。
任何有关可能导致这些问题的原因以及如何解决这些问题的想法将不胜感激！
I am working on a Javascript WYSIWYG editor in Firefox. I am using a div with the contenteditable attribute set to true in order to accomplish this (I cannot use a contenteditable iframe for this particular project). This contenteditable div is nested in another div that is not contenteditable. I am encountering the following two problems when using execCommand to apply formatting, including font style and size, as well as bold, italic, and underline:
- When all text in the div is selected, execCommand simply does not work. execCommand works fine when only part of the text is selected, but does nothing when all of the text is selected.
- Applying formatting with no text selected yields unexpected results. For example, when calling execCommand('bold') with no text selected and then typing results in bold text being typed until a spacebar is inserted, at which point the bold formatting is lost (until another space is inserted, interestingly enough; then the text becomes bold again).
To see what I mean, please try running the following HTML code in Firefox 3:
<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>
Please try the following:
- Select the word "Some" only. Click the Bold button. This will make the text bold, as expected.
- Select the entire phrase "Some editable text" (either manually or using CTRL-A). Click the Bold button. Nothing happens. This demonstrates the first bug shown above.
- Hit the backspace key to clear the div. Click the Bold button and begin typing. Type a few words with spaces. This will demonstrate the second bug.
Any ideas on what could be causing these problems and how to work around them would be greatly appreciated!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
有趣的。在 Firefox 3.6.3 中，我无法复制第一个问题：选择所有可编辑文本并按按钮按预期切换粗体。然而，我确实看到了另外两个问题。它们将是 Mozilla 的
contenteditable实现中的错误。有趣的是，如果您使用
designMode而不是contenteditable，则不会发生替代词粗体问题。我怀疑它也能解决你的其他问题。这涉及到使整个文档可编辑，而不仅仅是其中的元素：如果这不是一个选项，并且您需要
contenteditable提供的精细控制，则需要实现您自己的版本使用 DOM 操作和范围的粗体命令。这对于在 IE 和非 IE 浏览器中工作非常困难。Interesting. In Firefox 3.6.3, I can't replicate the first problem: selecting all of the editable text and pressing the button toggles boldness as expected. However, the other two issues I do see. They'll be bugs in Mozilla's implementation of
contenteditable.Interestingly, the alternate-words-bold problem doesn't happen if you use
designModerather thancontenteditable. I suspect it will solve your other problem too. This involves making the whole document editable, rather than just elements within it:If this isn't an option and you need the fine control that
contenteditableprovides, you'll need to implement your own version of the bold command using DOM manipulation and Ranges. This will be quite involved to get working in IE and non-IE browsers.