在没有 execCommand 的情况下添加或修改 contenteditable div 中的文本/内容？

Question

document.execCommand() 已被废弃[DOC]。所以，2020年制作所见即所得编辑器并不是那么容易。 看了很多文章和答案后才发现，大部分答案（开发者）更喜欢使用：

• 文档.createRange()
• window.getSelection()
• 附加子项
• 插入前
• 下一个兄弟姐妹。
• 替换子等

但是如何？他们没有举任何例子。我想让“伏地魔”这个词在点击B按钮后加粗。我只需要了解工作流程。

<div class="block-editor">
  <!-- editor control -->
  <div class="block-editor-control">
    <ul>
      <li data-action="bold"> B </li>
    </ul>
  </div>

  <!-- editor content's -->
  <div class="block-editor-content">
    <div class="block-editor-block" contenteditable="true" role="group">
       Voldemort is back
    </div>
  </div>
</div>

Answer 1

首先，检测 Ctrl+B 按键（按键、ctrl+c（或类似的组合））。在那之后：

1. 获取选择范围：https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection。
2. <span>在范围开头插入，</span> 在范围末尾插入
3. 将 span 元素的字体粗细设置为粗体。