CODEWITHSUNDEEP
javascripthtmltext-editor
Iqbal Khan
Iqbal Khan

Reputation: 363

Javascript document.execCommand "bold" not working in chrome

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!

Upvotes: 3

Views: 9166

Answers (4)

user2728841
user2728841

Reputation: 1427

We hit this problem because we had long ago stopped using <b> elements for bold, since almost everyone does it in CSS these days, so we started using the <b> element for a functional purpose and CSS'd away the bold.

However we didn't realise that contenteditable elements still use the <b> element, so resetting the CSS for contenteditable <b> elements fixed the problem.

Upvotes: 0

Nirav Prajapati
Nirav Prajapati

Reputation: 26

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.

Upvotes: 0

Nikhil Ghuse
Nikhil Ghuse

Reputation: 1288

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);
    }

Upvotes: 3

entropic616
entropic616

Reputation: 101

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

Upvotes: 0

Related Questions