Javascript document.execCommand “bold” not working in chrome

Question

I;m creating a text editor, and I'm using document.execCommand for styling purposes on my div, which is contend Editable. All other functions like underlining, italicizing, justifying, etc.. work, except for bold. I can't figure out why. Here is the code I'm using:

function makeEditableAndHighlight(styleType, optParam) {
    if(typeof(optParam) == "undefined" || optParam == null){
        optParam = null;
    }
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    /*if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }*/
    document.execCommand(styleType, false, optParam);
    document.designMode = "off";
}

function changeTextStyle(styleType, optParam){
    if(typeof(optParam) == "undefined" || optParam == null){
        optParam = null;
    }
    var range;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            /*if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }*/
            if (!document.execCommand(styleType, false, optParam)) {
                makeEditableAndHighlight(styleType, optParam);
            }
        } catch (ex) {
            makeEditableAndHighlight(styleType, optParam)
}
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand(styleType, false, optParam);
        //range.execCommand("BackColor", false, colour);
    }
}

I call it by using changeTextStyle("bold"); or whatever style inside the quotation marks.

This code has been working perfectly for every other style command, except bold. I'm calling it through the click of a button and it applies the style to the contenteditable div. I did get it to work once, and that was if the all the div contents were selected, other than that it won't work at all. any help would be nice, thanks!

Answer 1

Try this

    <button id="bold" onclick="FormatText('bold');"> </button>

And for Save selection and Restore selection use following code

      function saveSel() {
        if (window.getSelection)//non IE Browsers
        {
            savedRange = window.getSelection().getRangeAt(0);
        }
        else if (document.selection)//IE
        {
            savedRange = document.selection.createRange();
        }
    }

    //to restore sel
    function restoreSel() {
        $('#contenteditableId').focus();
        if (savedRange != null) {
            if (window.getSelection)//non IE and there is already a selection
            {
                var s = window.getSelection();
                if (s.rangeCount > 0)
                    s.removeAllRanges();
                s.addRange(savedRange);
            }
            else if (document.createRange)//non IE and no selection
            {
                window.getSelection().addRange(savedRange);
            }
            else if (document.selection)//IE
            {
                savedRange.select();
            }
        }
    }

And call Savesel on Focusout event of your Contenteditable

 $("#contenteditableId").focusout(function () {
            saveSel();
        });

At last Call restoreSel

 function FormatText(command, option) {
        restoreSel();
        document.execCommand(command, false, option);
    }

Answer 2

I use document.queryCommandState("bold"); for bold. It works for me.

Answer 3

I had a similar problem. In my case "span" tag makes an issue it has font-weight 700, After deep analysis, I figure out if span tag font weight is more than 500 (600, 700, 800, bold, bolder etc) create this issue, even if it's not inside "contenteditable" still it creates a problem. Just remove style font-weight 700 and add <b> instead resolve my issue. Hope it helps someone.