contenteditable .execCommand() 未触发？

我正在尝试使用 contenteditable 自定义所见即所得编辑器。我使用以下代码使所选文本变为粗体：

$('.wysiwyg-b').click(function() {
    document.execCommand('bold',false,true);
    alert('hi');
});

<li class="wysiwyg-b" title="Bold"><img src="images/icons/black/png/font_bold_icon&16.png"> </li>

它看起来像这样：

我的问题是，只有当我单击图像（B）时，文本才会变为粗体，而不是当我单击蓝色周围区域时......但警报会变为粗体。什么可能导致此问题？

这是一个小提琴http://jsfiddle.net/3b4QM/ http://jsfiddle.net/3b4QM/我将图像更改为 B，因为路径已损坏。

console.log(this) 

回报

<li class="wysiwyg-b" original-title="Bold">

当我构建 Froala Editor 时，我遇到了同样的问题（https://froala.com/wysiwyg-editor https://froala.com/wysiwyg-editor）。发生这种情况是因为当您单击周围环境时您失去了选择。在里面放置一个按钮<li>将解决问题。只需确保按钮适合整个<li>.

See http://jsfiddle.net/xdCjD/2/ http://jsfiddle.net/xdCjD/2/

In HTML:

<div id="apt-wysiwyg">
    <ul>
        <li class="wysiwyg-b" title="Bold"><button><img src="images/icons/black/png/font_bold_icon&16.png"></button></li>
    </ul>
</div>

在CSS中，删除li的填充并将其设置为按钮

#apt-wysiwyg li button {
    padding: 5px;
    height: 30px;
    width: 30px; 
    background: transparent;
    border:none;
}