3

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!

2
  • 1
    I've copied your code to JSFiddle, jsfiddle.net/gxuj7h4t. And in Chrome, selecting text from the editable element and clicking "Bold" does actually bold selected text. Does it work the same for you too? Commented Sep 25, 2015 at 11:05
  • The above jsfiddle will not work in chrome if the font-weight of <b> tags is set to anything that is not 700. Commented Jul 25, 2016 at 23:54

4 Answers 4

3

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);
    }
3
  • Hi @Nikhil, it could be nice if you could also provide a brief description to help understand what you did :) Commented Jun 25, 2016 at 11:46
  • 1
    For better understanding, you should use "edit" to put these descriptions in your answer. Thank you ;) Commented Jun 25, 2016 at 12:20
  • First of all add your content-editable div with some id and button with some id let say bold. Then in script tag write savesel() , restoreSel() and FormateText functions. In button on-click write FormatText('bold'). It will work as specified. Commented Jun 25, 2016 at 12:34
0

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

1
  • It's supposed to return a boolean representing the state of a command...
    – Yuval A.
    Commented Dec 28, 2018 at 13:53
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.