有比document.execCommand更好的选择吗？（这是一个关于IT技术的提问标题）

Question

实现基于Web的富文本编辑器时，我了解到document.execCommand可用于在HTML文档上执行操作（例如使选择变粗）。但是，我需要一些更好的东西。特别地，我需要知道添加或删除的确切文本以及所在位置（作为整个文档HTML表示的偏移量）。

我考虑同时使用内置的document.execCommand和DOM4的mutation observer，但execCommand似乎无法胜任：

• 我没有看到取消选定内容的方法
• 生成的HTML似乎因浏览器而异。（我想使用<span>标签而不是<b>，但一致性更重要）
• 并没有关于如何处理冗余嵌套/相邻的<span>标记的信息。

此外，根据我的需求，使用mutation observer似乎有些过度。

我的动机：我正在尝试定期向服务器发送文档更改，而不重新传输整个文档。我将数据作为插入和删除的HTML表示集合发送。如果有人知道如何从CKEditor中获得此功能（这样我就不必从头开始），那么我会永远感激你。

注：由于大型文档性能差，无法进行文本差异检测。

否则，我并不害怕尝试编写能够实现此功能的东西。DOM范围对象提供的方法将处理大部分繁重工作。我也希望得到关于这种可能性的建议。

- Brent

---

execCommand是那种在所有浏览器上永远无法以相同方式工作的东西（纯粹是由于它的产生方式），选择处理也是一样。因此，如果这个项目是用于内部系统，我建议选择一个目标浏览器并为其构建... 这将使您的任务变得简单得多。但是，如果这不是可选项，那么你会有一些乐趣.. ;) 你可能可以将编辑锁定到每行修改，然后对其运行文本差异吗？或者每段落进行操作？如果是我的话，我会这样做... - Pebbl

这是一个公开访问的网站。减少差异范围的想法很有趣，但我不确定。我可以确定选择范围边界的最近公共祖先，并仅检查其中的修改……但这有一些注意事项。它无法处理撤消/重做所做的更改，并且可能存在只包含纯文本墙的文档，这将无法从优化中受益。顺便说一下，我总是很开心。 :) - Brent

+1 永远保持乐趣...啊，好的，我想更多地考虑用户选择只读文档的某个部分或区域。该区域随后变为可编辑状态...一旦他们满意，他们点击保存，然后计算差异并写入服务器。这样，如果您将每个区域视为“单独的文档”，就不应该有撤消/重做的任何问题。但是，这在很大程度上取决于将使用该系统的人的能力（以及您的UI设计技能）。对于期望“Word风格”编辑的用户来说，可能会太笨重了。 - Pebbl

明白了。这可能听起来很奇怪（甚至是不明智的，但请相信我）。我正在开发的界面范例甚至没有“保存”这个概念。我想分享更多，但这是一个秘密，哈哈。（SO没有私信系统吗？） - Brent

你可以在这里检查我的答案https://dev59.com/M2fWa4cB1Zd3GeqPkccW#12166267 - 我描述了我们在CKEditor中如何做到这一点，但我担心你无法使用某些实现。据我所知，如果您没有购买许可证，则违反许可证，而且我认为根本不可能完成 - 您将不得不使用CKEditor的75％核心来完成这个“简单”的工作:P。 - Reinmar

Answer 1

使用execCommand的另一种选择是实现整个编辑器的交互，包括光标闪烁。这已经被完成了。Google在文档中使用它，但也有一些免费且开源的替代品。Cloud9 IDE http://c9.io就是其中一个实现。

据我所知，github已经使用该编辑器有一段时间了。而且你可以在其中做任何事情，因为没有涉及原生代码——就像execCommand一样。

该仓库在这里：https://github.com/ajaxorg/cloud9（它包含整个IDE，你需要找到编辑器的代码。）

此外，DOM变异事件已经被废弃。如果可以放弃对旧浏览器的支持，请尝试使用MutationObserver。如果不行，请尽量避免检测DOM变化，并拦截编辑器实现中的更改。这可能也是新浏览器的解决方式。

- naugtur

---

谢谢你。我会研究一下并看看它是否适合我的需求。还有，我实际上是指“变异观察器”！使用行话很容易被误解。^^ - Brent

终于有时间来看一下这个了。ACE是cloud9的编辑器，不适用于富文本编辑。这是一个很好的想法，但我得编写一个渲染器。我认为最好的方法是使用浏览器作为渲染器，并通过DOM“交流”它。 - Brent

这样做确实更容易，但会失去一些控制。如果您成功了，发表另一个答案会很好。 - naugtur

好的，我已经实现了DOM Level 2 Core的一半。我找到了一个简单的HTML解析器（因为HTML是生成的，所以不需要太高级的东西）。实现我需要的DOM操作部分，然后制作一个编辑器，在源HTML上插入和删除钩子。我可能会将它设置为LGPL或其他什么许可证。 - Brent

不如更新一下。我从来没有解决这个问题。事实上，它毁了我的整个项目。令人失望的是，像这样的事情应该如此困难。 - Brent

这是CKEditor和许多其他工具的整个商业模型。顺便说一句，如果你喜欢使用JS调整代码编辑器，请看看编写brackets编辑器插件。看起来很舒服。 - naugtur

Answer 2

有一个名为Trix的富文本编辑器，从他们的描述中可以看出，避免不一致的execCommand是该项目的重点。

- user

---

Trix看起来真的很棒 - 我在15分钟内将其集成到了我的项目中！截至今天，它不支持内联图像或图像调整大小。不幸的是，我需要这两个功能。 - Martin Meeser

Answer 3

看起来新标准将会是Input Events Level 2。在我看来，它似乎是execCommand的修订和改进版本。

- Martin Meeser