contenteditable .execCommand（）没有解雇？ [英] contenteditable .execCommand() not firing?

问题描述

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

Im experimenting on a custom WYSIWYG editor using contenteditable. I'm using the following code to make the selected text bold:

$('.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）时大胆，而不是当我点击周围的蓝色区域时....但警报确实如此。可能导致此问题的原因是什么？

My problem is, the text is only made bold when I click on the image(B), not when I click on the blue surrounding area....but the alert does. What could be causing this issue?

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

Here is a fiddle http://jsfiddle.net/3b4QM/ I changed the image to a B because the path was broken.

console.log(this) 

返回

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

推荐答案

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

I faced the same problem when I built up Froala Editor (https://froala.com/wysiwyg-editor). It happens because you loose the selection when you click the surroundings. Placing a button inside the <li> will solve the problem. Just make sure the button fits the entire <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中删除填充并将其设置为按钮

In CSS, remove the padding from li and set it to the button

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

这篇关于contenteditable .execCommand（）没有解雇？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！