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

Question

我需要为我正在进行的项目构建一个所见即所得的编辑器并需要一些指导。我的一些主要困惑点如下：

iframe docs与contenteditable div ：我应该使用哪一个？为什么？我讨厌iframe，使用iframe有明显优势吗？

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

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

保持文本选择：如何在进行操作时保持文本选择，例如选择字体样式，焦点将离开并删除我的选择。 Rangy？ Google closure？是否还有值得关注的其他范围/选择库？

有关这些项目的任何提示或与构建富文本编辑器相关的任何其他内容都将非常感谢！

Answer 1

根据个人经验，我建议不要这样做，除非您的目标是提供非常有限的功能。浏览器差异的绝对数量以及解决方案的复杂性使得如果您想要做得好，这将是一项非常棘手且耗时的任务。

如果这还没有让你失望，那就是我对你个人问题的看法：

iframe docs与contenteditable divs

我推荐使用iframe方法，主要有两个原因：

• 您可以完全控制iframe中的文档类型，CSS和脚本。如果您想要一致的行为和外观并希望在不同的页面中使用您的编辑器，这是必不可少的。
• Firefox尤其是contenteditable元素，它们最近才引入（3.0版本），而designMode已存在于文档多年（从1.0之前开始;大约0.6，如​​果内存服务）和效果很好。

跨浏览器样式

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

将项目添加到撤消链

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

2012年11月更新

自定义撤消/重做有一个spec in the works，所以最终可能会这样做。以下是Mozilla和WebKit的相关错误。

保持文本选择

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

Answer 2

不要，严重不要。

您的建议是一项重大任务。你真的应该关注TinyMCE，http://tinymce.moxiecode.com/或CKEditor，http://ckeditor.com/。获得你所追求的是为一个浏览器的一个版本工作所需的大量努力，使其便携将需要多年的投资。

更好的解决方案是查看TinyMCE的插件http://tinymce.moxiecode.com/plugins.php等内容。您可以获得基础知识（以及免费的可移植性），并专注于添加您需要的特定增值项目。