Geek asks and answers

Contenteditable.execCommand () doesn't fire?

Im experimenting in a custom WYSIWYG editor using contenteditable. I use the following code to highlight the selected text in 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>

And it looks like this:

bold

My problem is that the text is only shown in bold when I click on the image (B), and not when I click on the blue neighborhood .... but this is a warning. What could be causing this problem?

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

console.log(this)

returns

<li class="wysiwyg-b" original-title="Bold">
+3
source share
3 answers

, 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;
}
+3

, :

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

img , .

+1

, li. , mousedown :

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

More articles:


All Articles