How to set the bold button to only highlight selected text?

Question

I am trying to create a button that is set into a content editable. It does set the text I input to bold however, I only want it to set the highlighted text bold instead of the whole text. Any help would be appreciated.

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>

Does this answer your question? [Contenteditable div with bold option](https://stackoverflow.com/questions/41056605/contenteditable-div-with-bold-option) — Blake Mumford, Dec 08 '19 at 05:23

score 0 · Accepted Answer · answered Dec 08 '19 at 05:33

Your problem will be solved when you update your code like below :

    <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>

How to set the bold button to only highlight selected text?

1 Answers1