如何设置粗体按钮仅突出显示选定的文本？

Question

我正在尝试创建一个设置为内容可编辑的按钮。它确实将我输入的文本设置为粗体，但是，我只希望它将突出显示的文本设置为粗体而不是整个文本。任何帮助将不胜感激。

function bold(){
  const x = document.getElementById("text");
  if(x.style.fontWeight == "bolder"){
    x.style.fontWeight = "normal";
  }else{
    x.style.fontWeight = "bolder";
  }
}

<button onclick="bold()"> B </button>
<div id="text" class="editor" contenteditable="true" draggable="true"></div>

Answer 1

当您像下面这样更新代码时，您的问题将得到解决：

    <button onclick="bold()"> B </button>
    <div id="text" class="editor" contenteditable="true" draggable="true">Text Example</div>

    <script>
      function bold(){
      if(document.execCommand("bold")){
        document.execCommand("normal");
      }else{
        document.execCommand("bold");
      }
    }
    </script>