构建所见即所得的编辑器

Question

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

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

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

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

保持文本选择：如何在进行诸如选择字体样式、焦点离开和删除我的选择等操作时保持文本选择。 Rangy? Google closure?还有其他值得一看的范围/选择库吗？

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

Answer 1

根据个人经验，我建议不要这样做，除非您的目标是提供非常有限的功能。如果您想把它做好，浏览器差异的数量及其变通方法的复杂性使这成为一项非常棘手且耗时的任务。

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

iframe 文档与 contenteditable div

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

• 您可以完全控制 iframe 中的文档类型、CSS 和脚本。如果您想要一致的行为和外观并且想要在不同页面中使用您的编辑器，这一点至关重要。
• 特别是 Firefox 的 contenteditable 元素有很多错误，它们是最近才引入的（版本 3.0），而 designMode 在文档中已经存在多年（从 1.0 之前；大约 0.6，如​​果有记忆的话）并且工作得很好好吧。

跨浏览器样式

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

将项目添加到撤消链

没有与内置浏览器撤消堆栈交互的编程方式。您需要自己编写。

2012 年 11 月更新

有一个spec in the works 用于自定义撤消/重做，因此这很可能最终成为可能。以下是Mozilla 和WebKit 的相关错误。

保留文本选择

我必须在这里声明我的兴趣，因为我写了Rangy。我认为没有更好的图书馆可以做类似的工作。 Google Closure 确实有一个范围/选择 API，但我认为它使用自己的专有接口，而不是模拟 DOM Range 和常见的浏览器选择对象。 IERange 是另一个库，在想法上与 Rangy 相似，但没有完全实现，并且在其作者发布后似乎立即被放弃。

Answer 2

不要，真的不要。

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

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