建立一个所见即所得的编辑器

Question

我需要为我正在开发的项目构建一个所见即所得的编辑器并需要一些指导.我的一些主要困惑点如下:

iframe docs与contenteditable divs:我应该使用哪一个？为什么？我讨厌iframe,使用iframe有明显的优势吗？

跨浏览器样式:execCommand似乎在不同的浏览器中应用不同的样式.是否有任何技巧可以使这种跨浏览器兼容？我根本不应该使用execCommand而是应用我自己的样式吗？

将项添加到撤销链:如何运行我自己的脚本,如插入图像,并允许cntrl + z(撤消)删除它？是否存在一系列可以推送项目的撤销/重做项目？

保持文本选择:如何在进行操作时保持文本选择,例如选择字体样式,焦点将离开的位置以及删除我的选择. 兰吉？ 谷歌关闭？是否还有值得关注的其他范围/选择库？

有关这些项目的任何提示或与构建富文本编辑器相关的任何其他内容将不胜感激!

Answer 1

根据个人经验,我建议不要这样做,除非您的目标是提供非常有限的功能.浏览器差异的绝对数量和他们的解决方法的复杂性使这是一个非常棘手和耗时的任务,如果你希望把它做好.

如果这还没有让你失望,这是我对你个人问题的看法:

iframe docs与contenteditable divs

我建议采用iframe方法,主要有两个原因:

• 您可以完全控制iframe中的文档类型,CSS和脚本.如果您想要一致的行为和外观并希望在不同的页面中使用您的编辑器,这是必不可少的.
• 火狐尤其是相当具有越野车contenteditable的元素,这是他们唯一的推出相对较晚(3.0版),同时将designMode已经很多年了文件存在(因为前1.0; 0.6左右,如果没有记错)和工作得很好.

跨浏览器样式

如果通过在不同浏览器中应用样式来获得统一结果非常重要,那么通常您需要编写自己的样式代码.但是,这样做会破坏内置的撤消堆栈,您需要实现自己的撤消/重做系统.

将项添加到撤消链

没有编程方式与内置浏览器撤消堆栈进行交互.你需要自己编写.

2012年11月更新

有一个规范在自定义撤消/重做的工作,所以这可能最终可能.以下是Mozilla和WebKit的相关错误.

保持文本选择

因为我写了Rangy,所以我必须在这里宣布我的兴趣.我不认为有一个更好的图书馆做类似的工作; 谷歌闭包确实有一个范围/选择API,但我认为它使用自己的专有接口,而不是模拟DOM范围和常见的浏览器选择对象.IERange是另一个与Rangy相似的图书馆,但在作者发布之后,它很少被完全实现并且似乎立即被遗弃.