javascript - JavaScript | 范围 | 选择 - 有没有办法用 Javascript 来“取消粗体”、“单斜体”和 Range 的内容编辑？

Question

大家好！我正在开始我的第一个 ReactJs 项目，我正在尝试创建一个contenteditable在进行选择并按下按钮时处理“粗体”和“斜体”的组件，这是我的代码：

bold = ( e ) => {
  e.preventDefault();
  const selection = window.getSelection();
  if( !selection.isCollapsed ){
    const range = selection.getRangeAt(0);
    const b = document.createElement('b');
    b.appendChild(range.extractContents());
    range.insertNode(b);
    this.setState({html: this.contentEditable.current.innerHTML})
  }
}

italic = ( e ) => {
  e.preventDefault();
  const selection = window.getSelection();
  if (!selection.isCollapsed){
    const range = selection.getRangeAt(0);
    const i = document.createElement('i');
    i.appendChild(range.extractContents());
    range.insertNode(i);
    this.setState({html: this.contentEditable.current.innerHTML})
  }
}

render () {
  return (
    <div>
      <ContentEditable html={this.state.html} />
      <button onClick={this.bold}>bold</button>
      <button onClick={this.italic}>italic</button>
    </div>
  )
}

即使我从<i>标签的一半中进行选择并将其设为粗体，它也可以正常工作，因为我正在提取范围内容并将其附加到新节点。

现在的问题是：有没有办法像下面的例子那样“取消粗体”或“单斜体”一段文本？

前：

<b>I am <i>selecting some piece of text</b> to change the</i> tags position

后：

<b>I am <i>selecting some</b></i> piece of <i><b>text</b> to change the</i> tags position

在这种情况下，我真的可以使用某人的帮助！

标签： javascripthtmlreactjsrangeselection