我创建富编辑器是为了我的平台的XML(HTML5+XHTML)编辑目的。我不会说document.execCommand()完全死了，因为它的某些部分仍然工作得很好。不幸的是，对我来说，主要的问题是浏览器使用了很多不同的代码来生成那些盲人或接近盲人的人使用的屏幕阅读器无法识别的样式。

此外，我必须克服的最昂贵的时间错误是Gecko/Presto错误，其中视觉和技术选择(为什么它们不是一回事，不要问我)会导致DOM的一部分被更改，这是用户不想要的，这将归结为这样一个事实，即每个字符的像素数很低，所以如果富编辑器不支持视觉选择，用户很快就会离开。这需要四个月的时间才能攻克，而且还有其他漏洞。

归根结底，这是一项艰苦但可以实现的工作，但如果您打算像我一样构建一个HTML/XML编辑器，那么您应该至少计划六个月，如果您计划不仅要正确地做它，而且测试它到了讨厌蛋糕的地步，然后才会有人出现并指出另一个错误。

您的主要焦点应放在以下方面：

• window.createRange()
• window.createRange().surroundContents()
• Node.cloneNode()
• window.getSelection()
• window.getSelection().getRangeAt(0).commonAncestorContainer
• appendChild
• insertBefore
• insertBefore+nextSibling
• replaceChild

与从不同浏览器使用execCommand()生成的不一致代码不同(通常设置内联样式，如果不直接否定它，这将使您的站点的CSS复杂化)，您应该坚持使用以下元素，这些元素您不仅可以控制，而且与屏幕阅读器兼容：

• em用于强调(或“斜体”，不推荐使用<i>)。
• strong用于强阅读文本(或“粗体”，不推荐使用<b>)。
• u用于下划线(确保您的锚的样式与u元素不同；u可能被认为是“不推荐的”，尽管我会在未来十年左右修复标准时逆转这一点，适当地使用它)。
• sub用于垂直位置低于正常文本的副行文本。
• sup用于垂直位置高于正常文本的超行文本。
• 不要使用<span>元素专门添加这些样式，因为屏幕阅读器将不会理解或揭示错误行为；如果使用得当，它仍然是有效的通用内联元素。

我实际上一直打算修改我的Rich Editor(它已经打了补丁，但还没有正确地重写)，尽管欢迎你在我个人资料中链接的网站的博客页面上查看它的源代码。最初的项目花了我11个月的时间，但根据我现在的经验，我认为大约需要3到4个月的时间。如果您是认真的，我强烈建议您远离框架和库。“但是……但是，它们让生活变得更容易！”……直到您想要使用新版本并不得不重写整个项目。第一次使用纯JavaScript，避免毫无意义的维护。祝好运!

2021-09-24：大约一年前，我重新开始了Rich Editor II的工作，并设法将将样式从100,515个字符转换为~6,000个字符的代码转换为大约6,000个字符，并将文件请求(压缩后的有效带宽)减少了整整三分之一。以下是成功的关键部分：

1.anchorNode和focusNode可以根据您选择从左到右还是从右到左进行切换。因为我找不到任何理由说明为什么这对我的平台很重要，所以我将an对象(对于anchorNode)放在左边，fn对象(对于focusNode)总是放在右边。
1.我用了大约1700个字符解决了Gecko/Presto问题；您可以首先在网站上找到它(访问一个具有丰富表单的页面)。
1.为了解决通过<s>、<sub>、<sup>、<u>等交换进行选择的问题(您必须测试简单和复杂的示例)，我最终使用了window.getSelection().getRangeAt(0).commonAncestorContainer和cloneNode，然后在处理之前*去掉了选择中未包含的内容。然后，我只需使用window.getSelection().deleteFromDocument();删除所选内容，并通过document.createElement将其替换为新的样式元素，这样我就可以轻松地将所选内容appendChild并将其插入window.getSelection().getRangeAt(0).insertNode(id_('editor_rich_text').firstChild);。

水狐、苍白月亮和现已被彻底摧毁的火狐等壁虎浏览器允许你选择多个文本示例。为此，只需按住Control键即可创建额外的选择。由于它并没有真正以任何有意义的方式提供帮助(而且这件事已经够复杂了)，所以我在这个时候没有特意去支持它。

我会在今天或这个周末更新我的平台(截至本帖编辑)，以反映新的变化。由于Gecko浏览器的许多问题，我保留了很多旧代码。我对功能进行了扩展，解决了许多错误，不必求助于任何黑客，也不必像往常一样没有车库(框架或库)。

2021-09-26：对于那些对重做/撤消功能感兴趣的人，您必须基本上保留您正在编辑的DOM部分的文本版本。当然，可能还有其他方法来实施它，尽管这些方法会非常复杂。基本上，您只需使用.cloneNode复制编辑器父元素，然后在内存中使用类似于while (e.firstChild) {xml += new XMLSerializer().serializeToString(e.firstChild);}的内容。因为您将把它存储为文本，所以它不会像DOM那样具有巨大的内存影响。实际上，您将在编辑器中替换整个DOM，并跟踪更改的每一次迭代，因此它仍然是一个繁重的项目。对于我的平台来说，现在没有必要，尽管我想像一些人在评论中提到的那样，讨论这一点。

2022年的答案：execCommand()正式过时/不推荐使用，但别无选择。因此，如果您必须支持富文本，您必须继续使用execCommand()，并弄清楚您想要支持的浏览器的实际工作方式。

请注意，现实世界中的用户代理(Chrome、Firefox和Safari等浏览器)不能放弃对execCommand()的支持，因为有太多服务需要对它的支持。令人遗憾的是，HTML5不能在这里说明任何共同点，因为浏览器供应商不同意execCommand()应该如何工作。因此，HTML5不能指定任何东西，它的总体目标是指定任何新浏览器进入市场所需的完全互操作性所需的所有东西--而且只是东西。然而，在我看来，HTML5在这里失败了，因为任何新浏览器进入市场实际上都需要兼容execCommand()，所以将至少一个特定于浏览器的实现标准化为官方实现是有意义的。

当前的所有标准化工作(输入事件2、剪贴板API)甚至无法尝试涵盖execCommand()实际执行的功能(例如，撤消/重做，实际上更改了选择范围内的内容)。

最难解决的部分是插入符号移动，选择文本，不同的输入法和处理本地剪贴板。根据浏览器和操作系统的不同，这些都会以不同的方式相互作用。例如，iOS Safari在iPad上的行为与Windows上带有泰语输入法的Firefox完全不同。由于所有可用的JSAPI都没有透露所有细节，因此对于大多数浏览器，您必须使用contenteditable，也可能使用execCommand()。还要注意的是，例如Android Gboard需要知道相同可编辑内容中的周围文本，因为它使用人工智能逻辑来正确地计算出在输入文本时应该向用户提供哪个单词建议，所以你不能在插入符号下使用一个看不见的区域来伪造这一点。

这种情况已经持续了五年多了，所以也不要指望会有任何快速的变化。

看起来替代方案将是Input Events Level 2。

虽然创建一个自制的所见即所得编辑器是非常诱人的，但我个人将坚持使用execCommand，直到新标准到来。因为我们都会自己编写一个完整的编辑器，而不是重复使用现有的工作解决方案。

您可以使用

navigator.clipboard.writeText('text to be copied');

它的功能与document.execCommand("copy");完全相同
希望这篇文章对你有帮助！

document.execCommand()的替代方案是剪贴板API，通过navigator.clipboard。每个MDN Web文档(https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)：
此API旨在取代使用Document.execCommand()访问剪贴板。

编辑：正如在上面的评论和引用的文本中提到的，这只满足了需求的一个子集(剪贴板访问)。

reference documentation说这是一个警告。
据预测，未来这两种规格都将被Content Editable和Input Events所取代。

正如每一个预测一样，只需等待确认即可。

这里的结论是，尽管w3C有关于execCommand()的警告，但它仍然在工作，即使现在到2022年也没有标准的替代方案，除非有人使用Java脚本版本库。

可以使用以下命令制作所见即所得编辑器

window.getSelection()

但目前继续使用execCommand并不是问题。