Javascript document.execCommand“粗体”在Chrome中不起作用

Question

我正在创建一个文本编辑器，并且在div上使用document.execCommand进行样式设置，这被称为Editable。 除粗体外，所有其他功能（如下划线，斜体，对正等）均起作用。 我不知道为什么。 这是我正在使用的代码：

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

我用changeTextStyle("bold");来称呼它changeTextStyle("bold"); 或引号内的任何样式。

该代码对于除粗体以外的所有其他样式命令都运行良好。 我通过单击按钮来调用它，它将样式应用于contenteditable div。 我确实让它工作一次，那就是如果所有div内容都被选中，那它根本就行不通。 任何帮助都很好，谢谢！

Answer 1

尝试这个

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

对于保存选择和还原选择，请使用以下代码

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

然后在Contenteditable的Focusout事件上致电Savesel

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

最后致电restoreSel

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

Answer 2

我使用document.queryCommandState("bold"); 大胆。 这个对我有用。

Answer 3

我有一个类似的问题。 以我为例，“ span”标签的字体权重为700，经过深入分析，我发现span标签的字体权重是否大于500（600、700、800，粗体，粗体等）会造成此问题，甚至如果它不在“ contenteditable”中，则仍然会产生问题。 只需删除样式字体粗细700并添加<b>解决我的问题。 希望它可以帮助某人。