contenteditable .execCommand（）没有解雇？

Question

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

$('.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/ 我将图像更改为B，因为路径已损坏。

console.log(this) 

返回

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

Answer 1

当我构建Froala编辑器（https://froala.com/wysiwyg-editor）时遇到了同样的问题。这是因为当您单击周围环境时松开了选择。在<li>内放置一个按钮可以解决问题。只需确保该按钮适合整个<li>。

请参阅http://jsfiddle.net/xdCjD/2/

在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;
}

Answer 2

如果您在页面加载后将其写入页面，请快速建议尝试：

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

虽然您正在获取img来注册该事件，但它可能无济于事。无论如何值得一试

Answer 3

当您单击li元素时，会取消选择您的可编辑文本。我认为将事件绑定到mousedown将解决您的问题：

 $(".wysiwyg-b").on('mousedown',function() {
        var test=document.execCommand('bold',false,true);
        alert(test);        
 });