对于所见即所得的编辑器，在 div 上使用 contenteditable 有多可靠？答案

【问题标题】：How reliable is using contenteditable on a div for a WYSIWYG editor?对于所见即所得的编辑器，在 div 上使用 contenteditable 有多可靠？
【发布时间】：2011-04-16 09:22:44
【问题描述】：

我相信标题是不言自明的，但也许我应该详细询问一下。我正在构建一个所见即所得的编辑器，而我真的处于起步阶段。所以，我意识到，也许知道利弊会启发我。基本上，我的问题是，因为我想要一个在所有主要浏览器中至少可以使用 90% 的编辑器，所以我可以在 div 中使用 contenteditable 以及与 designMode 和 iframe 相比使用 contenteditable 的优缺点是什么?另外，在研究时我发现了this editor。我相信它没有使用任何这些属性，它正在移动 textarea 的位置。这是更好的方法吗？嗯，我知道有很多因素会影响最后一个问题的答案，但是正如我所提到的，我在编辑器中查找的最重要的是它可以被 90% 的用户使用。注意：我不想使用任何第三方库。

【问题讨论】：

你说的那个编辑器不是所见即所得的编辑器，只是一个带高亮的纯文本编辑器

标签： javascript cross-browser wysiwyg contenteditable

【解决方案1】：

contentEditable 不适用于 IE 中的浮点数：

<p>
  <img style="float:left" src="foo">
  <p contentEditable="true">very long text here ...
    ... this text won't flow round the image</p>
</p>

这是因为contentEditable 触发了臭名昭著的hasLayout。除此之外，一切都很好。

【讨论】：

嗯我不知道，非常感谢！哟预先警告我一个可能的问题:)

【解决方案2】：

对于大多数用途，我的偏好仍然是在大多数浏览器上使用带有 designMode 的 iframe，在 IE 中使用可内容编辑的 <body> 元素，这样更易于使用。原因：

在 iframe 中包含可编辑内容可以有效地将其沙箱化，并允许您将编辑器拖放到任何页面中，并确信页面的 CSS 和 DOM 事件不会影响可编辑内容
designMode 在 Firefox 中更可靠。我已经看到了 contenteditable 的几个错误，而 designMode 不存在这些错误，这可能是因为 contenteditable 是最近才添加到 Firefox 中的，而 designMode 是从 2003 年左右开始存在的。

对于 ACE，它的 textarea 方法很聪明并且有很多优点，但我怀疑这种方法仅限于等宽字体。此外，CodeMirror 2 uses a related approach 但同样仅限于等宽字体。

【讨论】：

感谢蒂姆。唯一让我无法使用 contentEditable 的是我不喜欢使用 iframe。可能是因为我多年前在这个标签上所做的以前的阅读。又或许是误会。我相信使用 div 比 iframe 更有效。这只是一个信念，我没有进行研究:) 至于 FF，我知道 Firefox 2 不支持 contenteditable，但是在做了一些研究之后，我发现 ff2 在主流浏览器。那么，您是否认为使用 contentEditable 可以实现出色的 WYSIWYG 编辑器（至少 90% 的目标用户）？
@Shaokan：是的，我认为 contenteditable 是可以使用的。不过 iframe 并没有什么无效的，至少有两个主要的 WYSIWYG 编辑器（TinyMCE 和 CKEditor）使用它们。
我会反驳你的第一个论点；页面的 CSS 不会影响您正在编辑的内容。这实际上是我使用 CKEditor 最大的问题：人们看不到他们在做什么，因为编辑器 CSS 与真实页面 CSS 不同，换句话说，那个编辑器不是 WYSIWYG。
@AlexisWilke：公平点，但这取决于上下文。如果编辑器位于正在编辑的页面之外的页面中（例如，在内容管理系统中的某种页面编辑表单中），您不希望可编辑区域从当前页面继承其 CSS。 CKEditor 4 现在有一个内联模式，顺便说一句：ckeditor.com/demo#inline

【解决方案3】：

designMode 和 contentEditable 属性以及驱动富文本编辑器的 API 已在所有主流浏览器中实现，包括 Firefox、Opera、Safari、Google Chrome，当然还有 Internet Explorer。

http://blog.whatwg.org/the-road-to-html-5-contenteditable

Mark Finkle 写了一个不错的high-level summary of designMode，后来又加了a post about contentEditable。

【讨论】：