Javascript 在所见即所得编辑器的div上使用contenteditable的可靠性如何？

我相信这个标题是不言自明的，但是，也许，我应该详细问一下。我正在建立一个所见即所得编辑器，我真的处于它的开始。所以，我意识到，也许知道正反两方面的情况会对我有所启发。基本上，我的问题是，既然我想要一个在所有主要浏览器中都能工作90%以上的编辑器，那么在div中使用contenteditable还有多大的发展空间？与designMode和iframe相比，使用contenteditable有什么利弊？而且，在研究的过程中我发现。我相信它没有使用任何这些属性，它正在移动textarea的位置。这是更好的方法吗？嗯，我知道有很多因素会影响最后一个问题的答案，但正如我提到的，我在编辑器中查找到的最重要的事情是，90%的用户都可以使用它。注意：我不想使用任何第三方库

designMode

和

contentEditable

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

---

Mark Finkle写了一篇不错的文章，后来又加了一篇。

对于大多数应用，我还是喜欢在大多数浏览器上使用带有

designMode

的iframe，在IE中使用contenteditable

元素，这样更容易使用。原因是:

• 将可编辑内容放在iframe中可以有效地对其进行沙盒处理，并允许您将编辑器放入任何页面，确信页面的CSS和DOM事件不会影响可编辑内容

• designMode

  在Firefox中更可靠。我看到了一些

  contenteditable

  的bug，它们在

  designMode

  中并不存在，这可能是因为contenteditable是最近添加到Firefox的，而designMode是在2003年左右出现的

---

至于ACE，它的textarea方法很聪明，有很多优点，但我怀疑这种方法仅限于单间距字体。同样，但也同样限于单间距字体。

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

触发了臭名昭著的。

---

除此之外，一切都很顺利。

谢谢蒂姆。唯一让我坚持使用contentEditable的是我不喜欢使用iframe。可能是因为几年前我在这个标签上读过。或者可能是误会。我相信使用div比iframe更有效。这只是一个信念，我没有做研究：）至于FF，我知道contenteditable在Firefox2中不受支持，但在做了一点研究后，我发现ff2在主要浏览器中甚至还没有占到1%的份额。那么，你认为一个好的所见即所得编辑器（至少90%的目标用户）可以使用contentEditable吗？@Shaokan:是的，我认为contentEditable是可用的。不过iframe并没有什么无效之处，至少有两个主要的所见即所得编辑器（TinyMCE和CKEditor）使用它们；页面的CSS不会影响您正在编辑的内容。这实际上是我使用CKEditor的最大问题：人们看不到他们在做什么，因为编辑器CSS与真实页面CSS不同，换句话说，编辑器不是所见即所得。@Alexiswike:Fair point，但它取决于上下文。如果编辑器不在正在编辑的页面中（例如，在内容管理系统中的某种页面编辑表单中），则不希望可编辑区域从当前页面继承其CSS。顺便说一句，CKEditor 4现在有一个内联模式：您提到的编辑器不是所见即所得编辑器，只是一个带有highlightinghmm的纯文本编辑器，我不知道，非常感谢！你预先警告我可能有问题：）