Question

我正在创建一个文本编辑器，我正在使用document.execCommand在我的div上进行样式设置，这是可编辑的。除粗体外，所有其他功能，如下划线，斜体，对齐等。我无法弄清楚为什么。这是我正在使用的代码：

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");或引号内的任何样式来调用它。

除了粗体之外，此代码已完美地用于其他每个样式命令。我通过点击一个按钮调用它，它将样式应用于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>即可解决我的问题。希望它可以帮助某人。

Javascript document.execCommand“bold”在chrome中不起作用

3 个答案: