execCommand（） 现在已经过时了，还有什么替代方案呢？

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

此外，我必须征服的最昂贵的时间错误是Gecko / Presto错误，其中视觉和技术选择（为什么它们不是一回事，不要问我）将导致DOM的一部分被用户无意地更改，这将归结为每个字符的像素数很少，所以如果Rich Editor不尊重视觉选择，用户会很快走开。这需要四个月的时间才能征服，还有其他错误。

最终，这是一项艰巨但可以实现的努力，尽管如果您打算像我一样构建一个HTML / XML编辑器，那么如果您计划不仅要正确完成它，还要对其进行测试，直到讨厌蛋糕，然后才有人过来指出另一个错误，那么您应该至少计划六个月。

JavaScript的主要关注点应该是以下几点：

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

为了代替使用来自不同浏览器生成的不一致的代码（通常设置内联样式，如果不完全否定它，这将使您网站的CSS复杂化），您应该坚持使用以下元素，尽管这些元素与屏幕阅读器兼容，但您不仅可以控制这些元素：execCommand()

• em用于强调（或“斜体”，已弃用）。<i>
• strong对于强烈阅读的文本（或“粗体”，已弃用）。<b>
• u用于下划线（请确保您的锚点样式与u元素区分开来; 可能被认为是“已弃用的”，尽管我将在未来十年左右修复标准时扭转这一点，并适当地使用它）。u
• sub用于垂直显示的子行文本，其垂直方向低于普通文本。
• sup用于垂直显示高于普通文本的晚餐行文本。
• 不要使用该元素专门添加这些样式，因为屏幕阅读器将无法理解或揭示错误行为;如果使用得当，它仍然是一个有效的通用内联元素。<span>

实际上，我一直打算修改我的Rich Editor（它已被修补，但尚未正确重写），尽管欢迎您在我的个人资料中链接的网站的博客页面上加载源代码时查看源代码。最初的项目花了我11个月的时间，尽管现在我的经验，我认为大约需要三到四个月。如果你是认真的，我强烈建议你远离框架和库。“但是...但是，它们使生活更轻松！直到您想要使用新版本并且必须重写整个项目。第一次使用纯JavaScript，并消除毫无意义的维护。祝你好运！

2021-09-24：我最终恢复了大约一年前的Rich Editor II的工作，并设法将样式从100，515个字符更改为〜6，000的代码，并将文件请求（压缩后的有效带宽）减少了整整三分之一。以下是成功的关键部分：

1. 和 可以根据您选择从左到右还是从右到左进行切换。因为我找不到任何理由来解释为什么这很重要（对于我的平台），我把对象（for）放在左边，对象（for）总是在右边。anchorNodefocusNodeananchorNodefnfocusNode

2. 我用大约1，700个字符解决了Gecko / Presto问题;您可以先在网站上找到它（访问具有丰富表单的页面）。

3. 为了解决通过 、 、 等进行大量交换进行选择的问题（您必须测试简单和非常复杂的示例），我最终使用了 ，然后在处理之前，剥离了未包含在选择中的内容。然后，我只是简单地删除了选择并将其替换为新的样式元素，通过该元素，我可以很容易地将选择并插入到。<s><sub><sup><u>window.getSelection().getRangeAt(0).commonAncestorContainercloneNodewindow.getSelection().deleteFromDocument();document.createElementappendChildwindow.getSelection().getRangeAt(0).insertNode(id_('editor_rich_text').firstChild);

Gecko浏览器，如Waterfox，Pale Moon和现在完全被摧毁的Firefox，允许您选择多个文本实例。为此，只需按住键即可创建额外的选择。由于它并没有真正以任何有意义的方式提供帮助（而且这些东西已经足够复杂了），所以我在这个时候并没有特意支持它。Control

我将在今天或本周末（截至本文编辑时）更新我的平台，以反映新的变化。由于Gecko浏览器的许多问题，我保留了很多旧代码。我已经扩展了功能并解决了许多错误，并且不必诉诸任何黑客攻击，并且像往常一样没有车库（框架或库）。

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

2022年的答案：官方已过时/弃用，但别无选择。因此，如果您必须具有富文本支持，则必须继续使用并弄清楚自己实际上适用于要支持的浏览器。execCommand()execCommand()

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

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

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