有没有替代方案来替代document.execCommand？（或者说使用document.execCommand是否安全？）

Question

有没有替代方案来替代document.execCommand？（或者说使用document.execCommand是否安全？）

14

我正在使用原生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 上这个命令时，我看到这个命令被认为是过时的:

已过时此功能已过时。虽然它在某些浏览器中仍然可以工作，但由于它可能随时被删除，因此不建议使用它。尽量避免使用。

所以，我想知道是否有替代方法在普通 JavaScript 中能够创建所有 Rich Text Editor 功能，就像 execCommand() 这样做?

谷歌搜索没有给我任何结果，因此与此同时，我想知道，为什么这个方法被宣布为过时，却没有提供替代方案。

- Linas M.

1

你可以查看这个链接：https://dev59.com/VGct5IYBdhLWcg3wNq-v - Sifat Haque

2

我已经检查过了。那里提供的是富文本编辑器。与此同时，我想要构建自己的编辑器。因此，我正在寻找替换单个方法的方法。此外，这个问题已经存在将近8年了。 - Linas M.

2

execCommand的大部分功能可以用Selection和Range API来替代，但一些命令（如剪贴板命令和撤销命令）除外。 - Teemu

2

它不会被删除，只是还没有正确规定。然而，当前的HTML规范要求UA实现它：https://html.spec.whatwg.org/#editing-apis 那篇MDN文章可能需要更新（现在没时间自己做）。有趣的是，添加了这个通知的是一个SO用户。我知道他们经常参与whatwg github问题的讨论，所以他们可能会有一些意见，我会联系他们。 - Kaiido

1

这就像拖放一样，是个噩梦。 - Zoldszemesostoros

显示剩余4条评论

2个回答

6

看起来新的标准将会是Input Events Level 2。

依我之见，它试图解决execCommand的痛点。

- Martin Meeser

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sideshowbarker · Accepted Answer

为了部分应对 https://w3c.github.io/editing/ActiveDocuments/execCommand.html 上的大红色警告，MDN 标记 document.execCommand() 为过时，同时在 https://github.com/mdn/browser-compat-data/commit/2d3890a 中作出了相关更改。

这个规范是不完整的，也不会进入草案状态。作者不应直接使用这些特性，而是应该使用 JavaScript 编辑库。本文档描述的特性并未被用户代理程序一致或完全实现，预计在可预见的将来也不会改变。

就普通的 JavaScript 替代方法而言，在同一警告框中它表示：

预计在未来，两个规范都将被 Content Editable 和 Input Events 替代。

但很遗憾，我们还没有达到那个阶段。因此当前情况非常不利，尽管我们目前没有替代方法，但我们知道现有的 document.execCommand() 并不能跨浏览器互操作地工作，而且浏览器项目也不会修复它。这就是为什么 MDN 警告说：

强烈不建议使用它... 尽量避免使用。

因此，正如上面的评论所说，它类似于拖放的情况：已知在许多方面存在问题，并且由于基本上不可行而一直保持这种状态已经很长时间了。

这就是规范中红色警告框架中提到的原因，即开发人员和作者应该避免直接使用大多数这些功能，而应该使用JavaScript编辑库。

在线富文本编辑器工具（如CKEditor和TinyMCE）中提供的JavaScript编辑库，为您“掩盖”了document.execCommand()底层的所有瑕疵。如果您尝试从头开始使用vanilla JavaScript编写自己的强大处理document.execCommand()，您基本上会在很多工作和时间之后重复那些工具背后的JavaScript库所做的工作。

因此，最重要的是：为了节省大量时间和工作，请使用现有的任何一个库。