我需要为我正在从事的项目构建一个所见即所得的编辑器，并且需要一些指导。我的一些主要困惑点如下:
iframe 文档与 contenteditable div:我应该使用哪一个，为什么？我讨厌 iframe，使用 iframe 有明显的优势吗？
跨浏览器样式:execCommand 似乎在不同的浏览器中应用不同的样式。有没有什么技巧可以使这个跨浏览器兼容？我是否应该根本不使用 execCommand 而应用我自己的样式？
将项目添加到撤消链:如何运行我自己的脚本，例如插入图像，并允许 cntrl+z(撤消)删除它？是否有一组撤消/重做项目可用于我可以将项目插入的 contenteditable？
保持文本选择:如何在进行选择字体样式等操作时保持文本选择，焦点将离开并删除我的选择。 Rangy ？ Google closure ？还有其他值得一看的范围/选择库吗？
任何有关这些项目的提示或与构建富文本编辑器相关的任何其他内容，我们将不胜感激!
最佳答案
根据个人经验，我建议不要这样做，除非您的目标是提供非常有限的功能。浏览器的大量差异及其解决方法的复杂性使这成为一项非常棘手且耗时的任务(如果您想做好的话)。
如果这还没有让您失望，以下是我对您的个人问题的看法:
iframe 文档与 contenteditable div
我推荐 iframe 方法，主要有两个原因:
- 您可以完全控制 iframe 中的文档类型、CSS 和脚本。如果您想要一致的行为和外观并希望在不同的页面中使用您的编辑器，这是必不可少的。
- 尤其是 Firefox 的
contenteditable元素有很多错误，他们最近才引入这些元素(3.0 版)，而 designMode 已经在文档中存在多年(从 pre-1.0 开始；大约 0.6，如果内存服务)并且工作得很好。
跨浏览器样式
如果在不同的浏览器中应用样式获得统一的结果对您很重要，那么通常您需要编写自己的样式代码。但是，这样做会破坏内置的撤消堆栈，您将需要实现自己的撤消/重做系统。
添加项目到撤销链
没有编程方式可以与内置浏览器撤消堆栈进行交互。您需要自己编写。
2012 年 11 月更新
有一个spec in the works对于自定义撤消/重做，所以这最终可能成为可能。以下是 Mozilla 的相关错误和 WebKit .
保持文本选择
我必须在这里声明我的利益，因为我写了Rangy .我认为没有更好的图书馆可以完成类似的工作； Google Closure 确实有一个范围/选择 API，但我认为它使用他们自己的专有接口(interface)而不是模拟 DOM 范围和常见的浏览器选择对象。 IERange是另一个在思想上与 Rangy 相似但没有完全实现并且似乎在其作者发布后立即放弃的库。
关于javascript - 构建一个所见即所得的编辑器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4426478/