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

Question

document.execCommand() 已被废弃 [DOC] .所以，在 2020 年做 WYSIWYG 编辑器并不是那么容易。在阅读了很多文章和答案后，我发现，大多数答案(开发人员)更喜欢使用:

文档.createRange()

window.getSelection()

追加 child

插入前

下一个 sibling 。

replaceChild 等

但是怎么做？他们没有举任何例子。单击 B 后，我想将“Voldemort”字加粗按钮。我只需要了解工作流程。

<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 按键( keypress, ctrl+c (or some combo like that) )。在那之后:

获取选择范围:https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection .

插入 <span>在范围的开头，插入 </span>在范围的末尾

将 span 元素的字体粗细设置为粗体。