contenteditable .execCommand()没有解雇?

时间:2014-02-04 08:04:05

标签: javascript jquery html wysiwyg

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

它看起来像这样:

bold

我的问题是,当我点击图像(B)时文本只是粗体,而不是当我点击周围的蓝色区域时....但警报确实如此。可能导致这个问题的原因是什么?

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

console.log(this) 

返回

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

3 个答案:

答案 0 :(得分:4)

当我构建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;
}

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:1)

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

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