execCommand() 不会“取消粗体”文本

Question

我制作了自己的 WYSIWYG 文本编辑器。

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> 标记中的文本是正常的，这就是您所得到的。

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

因此，您应该删除此属性，一切正常。

更新：

了解在某些情况下该方法如何“加粗但不能不加粗”非常重要。事实上，execCommand 使一些东西比仅仅围绕文本更聪明。考虑到可能混合使用交叉标签（如<b> 或<strong> 以及<i>、<u> 等），它还对其进行规范化。浏览器算法分析文本样式以了解实际粗体和为什么。当您将粗体重新定义为正常时，可能会导致算法决定：“好的，虽然它在 <b> 标签内，但文本不是粗体，因此没有什么可更改的”并保留标签。