小编Lin*_* M.的帖子

我正在使用 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 上查找此命令时，我发现此命令已过时：

过时 此功能已过时。尽管它可能在某些浏览器中仍然有效，但不鼓励使用它，因为它可以随时被删除。尽量避免使用它。

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

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

以下链接引用了 MDN 页面，其中列出了许多 Web API 和接口：

https://developer.mozilla.org/en-US/docs/Web/API

但是，没有解释 Web API 和接口之间的主要区别是什么。我也没有成功地在谷歌上搜索到任何关于这个意义上的接口的信息。

作为一名经验不足的开发人员，我想了解区分 Web API 和接口的理论特征（要点）。

有人可以向我解释一下这一点或参考我在哪里可以阅读更多相关信息吗？

例如，在我引用的链接中，CSSOM 模型被视为一组 API 并列在 WEB API 类别下，同时 CSSStyleDeclaration 被视为接口并列在接口类别下。我对这两个类别（Web API 和接口）之间的区别特别感兴趣？

我已经在functions.php、WordPress 中看到了script_loader_tag 函数，但我很难完全理解它是如何工作的。

例如，我见过这样的例子：

function add_async_defer($tag, $handle) {

    if('googlemaps' !== $handle) {
        return $tag;
    }
    return str_replace(' src', 'async="async" defer="defer" src', $tag);
}
add_filter('script_loader_tag', 'add_async_defer', 10, 2);

它用于为 Google Maps API 生成脚本标签：

<script type='text/javascript'async="async" defer="defer" src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBz02VRxO_dgaKsBS62TLL6AW4McNTQiKU&#048;callback=initMap&#038;ver=5.2.1'></script>

但是 $tag 和 $handle 参数是什么意思呢？

add_filter 末尾的数字 10 和 2 是什么意思？

这个功能可以修改为仅在特定页面有条件地显示标签吗？

我是 Webpack 的新手，对 JavaScript 也没有那么丰富的经验。我正在尝试为 JS 文本编辑器建立一个新项目。但是，我注意到在为 #btn 按钮设置第一个 addEventListener 后，该事件被触发两次。

我不认为这种行为与事件本身有关，因为我创建了三个 console.log 函数。一个在事件监听器外部，剩下两个在事件监听器内部。所有三个函数都会在浏览器控制台中被控制台记录两次，这让我认为这可能与 Webpack 配置有关。

如果有人有线索或建议，请帮忙。

HTML：

<main class="main__content">
  <article class="text__editor-wrapper">
    <h1 class=" ">Text Editor</h1>
    <div class="toolbar">
     <button id="btn" class="toolbar__option"><span class="fas fa-bold fa-2x"></span></button>
    </div>
    <div class="text__editor" contenteditable="true"></div>
  </article>
</main>

索引.js：

import "./scss/style.scss";
import '@fortawesome/fontawesome-free/css/all.css';
import '@fortawesome/fontawesome-free/js/all.js';

const btn = document.querySelector("#btn");

function format(command, value) {
  document.execCommand(command, false, value);
}

console.log("Outside")
btn.addEventListener('click', function(e) {
  e.preventDefault();
  console.log("inside");
  console.log(e.target);
  format('bold');
});

网络包配置文件：

const path = require("path"),
  HtmlWebpackPlugin = require("html-webpack-plugin"),
  BrowserSyncPlugin = require("browser-sync-webpack-plugin"),
  MiniCssExtractPlugin …