CODEWITHSUNDEEP
javascriptjquerywysiwygexeccommand
Mike Reed
Mike Reed

Reputation: 74

ExecCommand not unbolding

Using a selection / key command based WYSIWYG editor. Works great EXCEPT...

With all the other key commands, it toggles the specific style I, strike, etc on and off.

With the execCommand('bold'), it doesn't unbold the text. It's very frustrating. It's the same for every browser.

Here's the code.

$('body').on('keydown', '.element_content, .element_content_subhead', function(e) { 

if(e.ctrlKey){

        //bold -- key 'B'
        if(e.which == 66){
            $sel = $.trim(document.getSelection().toString());
            if($sel == ''){
                alert('Please select some text to bold');
            }
            else{
                document.execCommand('bold', false, null);
            }
        }
       }

});

Upvotes: 1

Views: 740

Answers (2)

garbo
garbo

Reputation: 149

In my case the problem was in 'font: inherit;' bootstrap styles. Summary: if you have problems with 'unbold' or 'unitalic' using document.execComand try to delete all css styles and check your editor - it should work fine after that.

Upvotes: 0

Mike Reed
Mike Reed

Reputation: 74

Here's my answer.

Because I was using a non-standard font (ClanWeb), the b to bold the type was not working well for the browsers. So in my CSS I had b{ font-family:ClanWeb-bold; font-weight:normal !important; }

This worked fine for bolding the type, but the execCommand wouldn't fire if the tag didn't behave as normal; didn't have the font-weight:bold in the CSS.

So here was my code to unbold it.

  //bold -- key 'B'
    if(e.which == 66){
        $sel = $.trim(document.getSelection().toString());

        var parentEle = window.getSelection().getRangeAt(0).commonAncestorContainer;
        parentEle = parentEle.parentNode;


        if($sel == ''){
            alert('Please select some text to bold');
        }
        else if(parentEle.tagName == 'B'){
            parentEle.id='unbold1'; 
            $('#unbold1').contents().unwrap();
        }
        else{
            document.execCommand('bold', false, null);
        }
    }

Upvotes: 2

Related Questions