contenteditable .execCommand() 没有触发？答案

【问题标题】：contenteditable .execCommand() not firing?contenteditable .execCommand() 没有触发？
【发布时间】：2015-05-14 18:00:13
【问题描述】：

我正在尝试使用 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">

【问题讨论】：

张贴小提琴可能会有所帮助。

标签： javascript jquery html wysiwyg

【解决方案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;
}

【讨论】：

绑定到“mousedown”而不是“click”可以在没有额外标记和 css 的情况下解决您的问题，但您的解决方案很好地揭示了 li 与按钮的不同选择行为。
我更喜欢 'click' 而不是 'mousedown'，因为如果单击按钮然后将鼠标移到按钮之外（当按钮仍被单击时），则事件将被触发。这并不常见。此外，它也会在右键单击的情况下触发事件而无需额外验证。
这是大麦用的？
据我所知，大麦有自己的解决方案。他们很可能使用相同的方法。我尝试了不同的方式来实现这个东西，我使用了按钮，因为它适用于所有浏览器。

【解决方案2】：

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

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

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

【讨论】：

谢谢，但这会产生同样的问题。
让a注册事件它在哪里？
对不起 img 标签。还是有点早。
这很奇怪，因为它会发出警报并确认事件正在触发，但 execCommand 仅在我单击图像时才有效。
添加一个console.log(this)并点击蓝色区域和img，看看你得到的结果是否与预期不同？

【解决方案3】：

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

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

【讨论】：