execCommand() 没有 "unbold" 文本

Question

我制作了自己的所见即所得文本编辑器。

contenteditable-field 是一个 div，见下面的代码：

<div spellcheck="false" id="textEditorField" contenteditable="true"></div>

按钮事件如下所示：

boldButton.onclick = function() {
    document.execCommand('bold', false, null); 
    return false; 
}

文本编辑器工作正常。它用斜体和非斜体显示文本，强调作品。但是粗体有一个问题：它加粗了文本，但没有取消加粗。 OS X 和 Windows.

上的每个浏览器都存在这种情况

我使用的是使用 @font-face 导入的自定义字体。

在 css 中，我执行以下操作：

b {
    font-family: "Caviar Dreams Bold";
    font-weight: normal;
}
b i, i b {
    font-family: "Caviar Dreams Bold Italic";
    font-weight: normal;
}

如果我删除 font-weight 属性文本将获得字体系列 "Caviar Dreams Bold" 并且通过 CSS 将其设为粗体，因此非常粗体。

有一些类似的问题，但没有我可以使用的答案。我还必须注意，我不能为此使用 jQuery。

Answer 1

execCommand('bold'... 按预期工作，即切换标签中文本的周围。问题是你在下面CSS 类中为b标签设置了'font-weight: normal'样式。这意味着您明确希望  标记中的文本正常，这就是您所得到的。

b {
    font-family: "Caviar Dreams Bold";
    font-weight: normal;
}
b i, i b {
    font-family: "Caviar Dreams Bold Italic";
    font-weight: normal;
}

所以，你应该删除这个属性一切正常。

更新：

了解该方法在某些情况下可能如何 "bold but not unbold" 很重要。事实上，execCommand 比仅仅包围文本更聪明。考虑到可能混合了  或  以及 、 等交叉标签，它还会对其进行标准化。浏览器算法会分析文本样式来理解什么是真正的粗体以及为什么。当您将粗体重新定义为正常时，它可能会导致算法决定："OK, although it's inside  tag, the text is not bold and so there is nothing to change" 并保留标记。

execCommand() 没有 "unbold" 文本

execCommand() doesn't "unbold" text

html

javascript

css

execcommand