Question

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

Answer 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。除此之外，一切都运作良好。

Answer 2

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

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

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

Answer 3

对于大多数用途，我的偏好仍然是大多数浏览器上带有designMode的iframe，IE中带有可疑的<body>元素，这样可以更轻松地使用它。原因：

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

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

WYSIWYG编辑器在div上使用contenteditable的可靠性如何？

3 个答案: