javascript - 是否有 document.execCommand 的替代品？ (或者使用 document.execCommand 是否安全？)

Question

我正在使用 vanilla JavaScript 构建一个业余的富文本编辑器，document.execCommand() 对于启用文本编辑器的核心功能至关重要。

例如粗体、斜体和无序列表命令:

Array.from(toolbarBtn).forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    if (e.target.id === "toolbar__btn--bold") {
      format('bold');
    }
    if (e.target.id === "toolbar__btn--italic") {
      format('italic');
    }
    if (e.target.id === "toolbar__btn--unorderedlist") {
      format('insertunorderedlist');
    }
});
});

但是，在 MDN Web Docs 上查找此命令时，我看到此命令被认为已过时:

Obsolete This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

所以，我想知道 vanilla JavaScript 中是否有任何替代方法，可以创建像 execCommand() 这样的所有富文本编辑器功能？

谷歌搜索没有给我任何结果，所以同时我想知道，该方法怎么可能被宣布过时，但没有建议替代方案。

Answer 1

两者都更改为 MDN 标记 document.execCommand()在 https://github.com/mdn/browser-compat-data/commit/2d3890a 上作为过时和相关更改部分原因是 https://w3c.github.io/editing/ActiveDocuments/execCommand.html带有以下语句的大红色警告:

This spec is incomplete and it is not expected that it will advance beyond draft status. Authors should not use most of these features directly, but instead use JavaScript editing libraries. The features described in this document are not implemented consistently or fully by user agents, and it is not expected that this will change in the foreseeable future.

至于 vanilla JavaScript 中的任何替换方法，相同的警告框说它是:

predicted that in the future both specs will be replaced by Content Editable and Input Events

......但遗憾的是，我们还没有到那里。所以目前不幸的情况是，即使我们还没有替代品，我们知道 document.execCommand()原样现在不能跨浏览器互操作地工作——浏览器项目也不会修复它。这就是为什么 MDN 警告说:

its use is discouraged… Try to avoid using it.

所以，正如上面的评论所说，它类似于拖放的情况:众所周知，它会以多种方式被破坏，而且这种方式已经存在很长时间了，因为修复它基本上不切实际。

这就是为什么规范中的红色警告框还说开发人员和作者:

should not use most of these features directly, but instead use JavaScript editing libraries

在线富文本编辑器工具(如 CKEditor 和 TinyMCE)中可用的 JavaScript 编辑库“覆盖”了 document.execCommand() 中的所有潜在缺陷为你。如果您要尝试为 document.execCommand() 编写自己的健壮处理在从头开始的 vanilla JavaScript 中，你基本上——经过大量的工作和时间——最终会重复为创建这些工具底层的 JavaScript 库所做的工作。

所以底线是:为了节省大量时间和工作，请使用可用的库之一。