document.execCommand无法正常工作

Question

I am working on a really simple JS project (for my client, so can't use jQuery for this, meh.)

So basically I have a few buttons like this:

button.onClick="document.execCommand('bold', false, null);";

and others like italic, underline, etc.

The problem is that they are not working. I know for sure that execCommand works, because I tested it with a timer and it does work. The reason that it's not is that when I click on it, the text from the contentEditable=true div gets unselected.

Is there any way to avoid this?

Thanks in advance.

---

boldBtn = document.createElement('a');
boldBtn.innerHTML = "make text bold";
    document.getElementById("toolbox").appendChild(boldBtn);

boldBtn.onClick="document.execCommand('bold', false, null);";

Answer 1

Why are you using exeCommand exactly?

You can do this via vanilla JavaScript just fine.

document.getElementById("boldBtn").style.fontWeight = "bold";

or since you already have a reference

boldBtn.style.fontWeight = "bold"; 

Answer 2

If you do javasript, you'd rather set the listeners to real functions, not strings that are functions.

boldBtn.setAttribute("href", "#");
boldBtn.onClick = function()
{
    document.execCommand("bold", false, null); //or maybe exec bold(false); directly ?
    return false;
};