有啥比 document.execCommand 更好的吗？

Posted 2023-02-16

【中文标题】有啥比 document.execCommand 更好的吗？

【英文标题】：Is there something better than document.execCommand?有什么比 document.execCommand 更好的吗？

【发布时间】：2012-08-28 09:55:16

【问题描述】：

在实现基于 Web 的富文本编辑器时，我读到 document.execCommand 可用于对 html 文档执行操作（例如使选择变为粗体）。但是，我需要一些更好的东西。具体来说，我需要确切地知道从 innerHTML 中添加或删除了哪些文本，以及在什么位置（作为整个文档的 HTML 表示的偏移量）。

我考虑在 DOM4 的变异观察器旁边使用内置的 document.execCommand，但 execCommand 似乎不能胜任这项任务：

我看不到“取消粗体”选择的方法 生成的 html 似乎因浏览器而异。 （我希望 标签不是 ，但一致性更重要） 并且没有关于它如何处理冗余嵌套/相邻的 标签的信息。

另外，根据我的需要，使用变异观察器似乎有点过头了。

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

注意：执行文本比较不是一个选项，因为它在非常大的文档上性能很差。

否则，我并不害怕尝试写出这样的东西。 DOM 的范围对象提供的方法将处理大量繁重的工作。我也很感谢有关这种可能性的建议。

【问题讨论】：

execCommand 是那些在所有浏览器中永远无法正常工作的东西之一（纯粹是由于它的产生方式），与选择处理相同。因此，如果这个项目是针对内部系统的，我建议选择一个目标浏览器并为此构建......它会让您的任务变得更加简单。但是，如果这不是一个选项，那么您将获得乐趣.. ;) 您是否可以将编辑锁定为每行修改，然后对其运行文本差异？或者也许每段？如果是我，这就是我会去的方式......

这是一个可公开访问的网站。减少差异的范围是一个有趣的想法，但我不确定。我可以确定选择范围边界的最近的共同祖先，并且只检查其中的修改......虽然有一些警告。它不处理撤消/重做所做的更改，并且可能有一个不包含标签的文档 - 只是一堵纯文本墙，不会从优化中受益。顺便说一句，我总是很开心。 :)

+1 总是玩得开心...啊，好吧，我想更多的是用户选择只读文档的一部分或区域。然后该区域变得可编辑。一旦他们满意，他们点击保存，然后计算差异并将其写入服务器。这样，如果您将每个区域视为几乎是“单独的文档”，那么撤消/重做应该不会有任何问题。然而，这在很大程度上取决于那些将使用该系统的人的能力（以及您的 UI 设计技能）。对于期望“Word 样式”编辑的用户来说，这可能太笨重了。

明白了。这可能听起来......很奇怪（即使是不明智的，但相信我）。我正在研究的界面范例甚至没有真正的“保存”概念。我会分享更多，但这是一个秘密，哈哈。 （而且 SO 没有 PM 系统？）

你可以在这里查看我的答案***.com/a/12166267/1464696 - 我在 CKEditor 中描述了我们是如何做到这一点的，但我担心你将无法参与其中的某些部分。 AFAIK 如果您还没有购买它，它就违反了许可证，我猜它根本不可行 - 对于这个“简单”的工作，您必须占用 CKEditor 的 75% 的核心：P。

【参考方案1】：

还有一种使用 execCommand 的替代方法 - 实现编辑器的整个交互，包括光标的闪烁。它已经完成了。谷歌在文档中这样做，但也有一些免费和开源的东西。 Cloud9 IDE http://c9.io 有一个实现。 AFAIK，github 使用该编辑器已有一段时间了。你当然可以在此基础上做任何事情，因为不涉及本机代码——比如在 execCommand 中

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

另外 - dom 突变事件已被弃用。如果您可以放弃对旧浏览器的支持，请尝试mutation observer。如果没有 - 尽量避免检测 DOM 更改并拦截编辑器实现中的更改。这可能也是新浏览器的必经之路。

【讨论】：

谢谢。我会调查一下，看看它是否适合我的需要。另外，老实说，我的意思是突变观察者！我猜很容易误用行话。 ^^

终于有时间看看这个了。 cloud9 的编辑器 ACE 不具备富文本编辑功能。这是个好主意，但我必须编写一个渲染器。我认为最好的办法是使用浏览器作为渲染器，并通过 DOM 与它“对话”。

这确实更容易，但会带走一些控制权。如果您成功后在这里发布另一个答案，那就太好了。

好吧，我已经实现了 DOM Level 2 Core 的一半。我找到了一个简单的 HTML 解析器（不需要太高级的东西，因为无论如何都会生成 HTML）。实现我需要的部件 DOM 操作，然后制作一个编辑器，该编辑器具有用于在源 HTML 上插入和删除的钩子。我可能会使其成为 LGPL 或其他东西。

不妨更新一下。我从来没有解决问题。事实上，它扼杀了我的整个项目。令人失望的是，这样的事情竟然这么难。

【参考方案2】：

有Trix 富文本编辑器，从他们的描述看来，避免不一致的 execCommand 是项目的重点。

【讨论】：

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

【参考方案3】：

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