How to force unbold from execCommand edited text

Question

I am using document.execCommand to bold and underline text, but I want to make a button that forces the text to be unbolded and not underlined, rather than simply toggling. I can’t use execCommand(“removeFormat”) either, as it is causing issues in my program. Is there a work around I can use to unbold/un-underline the text?

window.addEventListener('keydown', function (event) {
  if (event.altKey){
    if (event.code === 'Digit1') {
// Unbold, unhighlight, un-underline // 
      document.execCommand("hiliteColor", false, "transparent")      
      changeFont('7.5pt') /* This goes into a function to change the fontsize */
  }

user_15359157 · Answer

If you want to remove all formatting, you can easily do it by replacing the HTML with its text equivalent:

const editor = document.getElementById("editor");
document.getElementById("unformat").addEventListener("click", () => {
  editor.innerHTML = editor.innerText;
});

Mess with me, and add crazy formatting to your heart's content then click UNFORMAT

~~If you want to only remove bolded text, you could replace the bold nodes with text, like this:~~ If you want to individually unformat something, you could do it like this (example with bolding):

const editor = document.getElementById("editor");
document.getElementById("unbold").addEventListener("click", () => {
  // get all bolded elements
  Array.from(editor.getElementsByTagName("b")).forEach(i => {
    i.outerHTML = i.innerHTML; // replace the bold with its contents
  });
});

Mess with me, try bolding random parts then click UNBOLD

How to force unbold from execCommand edited text

1 Answers