document.execCommand未执行

Question

This is a tough one for me.

Got a conentEditable div with some formating buttons. One of these is a "bold" button:

<li data-role="button" data-button-role="bold"><b>B</b></li>

In my javascript i got this little peace of code:

$(document).ready(function(){
    $("[data-role='button'][data-button-role='bold']").click(toggleBoltFormat);
});
function toggleBoltFormat() {
    document.execCommand("bold", false, null);
}

This things get called (tested with alert()), but the execCommand line is not being executed. So the highlighted text is not getting bold.

Can it be a problem with relativ and absolut position of some parent element of the cE-div?

When putting the docuement.execCommand line in my chromes js-console, it works fine.

Answer 1

Try to add something similar like this html's unselectable="on" behavior. Created a class called unselectable and added into <li> :

<li data-role="button" data-button-role="bold" class="unselectable"><b>B</b></li>

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}