Javascript document.execCommand“；黑体字；不在chrome中工作

一,；我正在创建一个文本编辑器，并在可编辑的div上使用document.execCommand进行样式设置。所有其他功能，如下划线、斜体、对齐等。。工作，除了粗体。我不明白为什么。以下是我正在使用的代码：

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

函数makeeditable和highlight（样式类型，optram）{
if（typeof（optParam）=“未定义”| | optParam==null）{
optram=null；
}
变量范围，sel=window.getSelection（）；
if（sel.rangeCount&&sel.getRangeAt）{
范围=选择范围（0）；
}
document.designMode=“on”；
如果（范围）{
选择removeAllRanges（）；
选择添加范围（范围）；
}
//使用HiliteColor，因为某些浏览器将背景色应用于整个块
/*if（！document.execCommand（“HiliteColor”，false，color））{
document.execCommand（“背景色”，假，彩色）；
}*/
document.execCommand（styleType，false，optram）；
document.designMode=“关闭”；
}
函数changeTextStyle（样式类型，optRAM）{
if（typeof（optParam）=“未定义”| | optParam==null）{
optram=null；
}
var范围；
if（window.getSelection）{
//IE9和非IE
试一试{
/*if（！document.execCommand（“BackColor”，false，color））{
可编辑并突出显示（颜色）；
}*/
if（！document.execCommand（styleType，false，optParam））{
makeeditable和highlight（样式类型、optram）；
}
}捕获（ex）{
MakeEditable和Highlight（样式类型，optRAM）
}
}else if（document.selection&&document.selection.createRange）{
//IE我使用
document.queryCommandState（“bold”）；
来表示粗体。这对我很有用。
试试这个

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

并在Contenteditable的Focusout事件上调用Savesel

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

最后打电话给restoreSel

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

我也遇到过类似的问题。在我的例子中，“span”标记会产生一个问题，它的字体重量为700，经过深入分析，我发现span标记的字体重量是否超过500（600、700、800、粗体、粗体等），即使它不在“contenteditable”内，也会创建此问题它仍然会产生问题。只需删除style font weight 700并添加
，即可解决我的问题。希望它能帮助他人。
我已将您的代码复制到JSFIDLE。在Chrome中，从可编辑元素中选择文本并单击“粗体”如果
标签的
字体重量设置为700以外的任何值，那么上面的JSFIDLE在chrome中将不起作用。您好@Nikhil，如果您还可以提供一个简短的描述来帮助理解您所做的事情，那就太好了：）为了更好地理解，您应该se“edit”（编辑）将这些描述放在您的答案中。谢谢；）首先添加您的内容可编辑div（带有一些id）和按钮（带有一些id），让我们说粗体。然后在脚本标记中写入savesel（）、restoreSel（）和FormatText函数。在按钮上单击write FormatText（'bold'）。它将按指定方式工作。它应该返回一个表示命令状态的布尔值。。。
 function FormatText(command, option) {
        restoreSel();
        document.execCommand(command, false, option);
    }