WYSIWYG编辑器在div上使用contenteditable的可靠性如何？
[英]How reliable is using contenteditable on a div for a WYSIWYG editor?
问题描述
I believe the title is pretty self-explanatory but still, maybe, I should ask in detail. 
我相信这个标题非常明显，但是，我可能会详细询问。 I'm building a WYSIWYG editor and I'm really at the beginning of it. 我正在构建一个WYSIWYG编辑器，我真的就在它的开头。 So, I realized that maybe knowing the pros and cons would enlighten me. 所以，我意识到也许知道利弊会启发我。 Basically, my question is, since I want an editor that would work at least with 90% in all major browsers, how further I can go using contenteditable within a div and what are the cons and pros of using contenteditable when compared with designMode and iframe? 基本上，我的问题是，因为我想要一个在所有主流浏览器中至少可以使用90％的编辑器，我可以在div中使用contenteditable进一步使用，与designMode和iframe相比，使用contenteditable有什么缺点和优点？ Also, while researching I've found this editor . 此外，在研究我发现这个编辑器 。 I believe it is not using any of these attributes and it's moving the location of textarea. 我相信它没有使用任何这些属性，它正在移动textarea的位置。 Is this a better approach? 这是一种更好的方法吗？ Well, I know that there are lots of factors that influence the answer on the last question, but as I mentioned, the most important thing I look up in the editor is that it can be used by the 90% of the users. 好吧，我知道有很多因素会影响最后一个问题的答案，但正如我所提到的，我在编辑器中查找的最重要的事情是它可以被90％的用户使用。 NB: I do not want to use any third party libraries. 注意：我不想使用任何第三方库。
3 个解决方案
解决方案1
4 2011-04-16 13:12:56
contentEditable does not work with floats in IE: 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>
This is because contentEditable triggers the infamous hasLayout . 这是因为contentEditable触发了臭名昭着的hasLayout 。 Other than that, everything works pretty well. 除此之外，一切都很好。
解决方案2
2 2011-04-16 09:32:58
The
designModeandcontentEditableattributes, and the APIs that drive rich text editors, are implemented in all major browsers, including Firefox, Opera, Safari, Google Chrome, and of course Internet Explorer.designMode和contentEditable属性以及驱动富文本编辑器的API在所有主流浏览器中实现，包括Firefox，Opera，Safari，Google Chrome，当然还有Internet Explorer。
http://blog.whatwg.org/the-road-to-html-5-contenteditable http://blog.whatwg.org/the-road-to-html-5-contenteditable
Mark Finkle wrote a nice high-level summary of designMode , and later added a post about contentEditable . Mark Finkle写了一篇很好的关于designMode的高级摘要 ，后来添加了一篇关于contentEditable的帖子 。
解决方案3
2 已采纳 2011-04-16 11:09:15
For most uses, my preference is still for an iframe with designMode on most browsers and a contenteditable <body> element in IE, which makes it easier to work with. 对于大多数用途，我的偏好仍然是在大多数浏览器上使用带有designMode的iframe，在IE中使用了一个designMode <body>元素，这使得它更容易使用。 The reasons: 原因：
- Having the editable content in an iframe effectively sandboxes it and allows you to drop the editor into any page with confidence that the page's CSS and DOM events cannot affect the editable content 将iframe中的可编辑内容有效地沙盒化，并允许您将编辑器放入任何页面，并确信页面的CSS和DOM事件不会影响可编辑内容
-
designModeis more reliable in Firefox.designMode在Firefox中更可靠。 I've seen several bugs withcontenteditablethat don't exist withdesignMode, which is probably because contenteditable was added to Firefox relatively recently whereas designMode has existed since around 2003.我已经看到了几个bug contenteditable不存在用designMode，这可能是因为CONTENTEDITABLE加入到Firefox相对近段时间以来，2003年左右，而将designMode一直存在。
As to ACE, its textarea approach is clever and has many advantages but I suspect the approach is limited to monospaced fonts. 至于ACE，它的textarea方法很聪明并且有很多优点，但我怀疑这种方法仅限于等宽字体。 Also, CodeMirror 2 uses a related approach but is similarly limited to monospaced fonts. 此外， CodeMirror 2使用相关方法，但同样限于等宽字体。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.