execCommand()不能取消文本的粗体样式。

Question

execCommand()不能取消文本的粗体样式。

6

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

可编辑字段是一个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来解决这个问题。

- Jeroen

看起来是JavaScript问题。检查你的DOM，看看是否真的被移除了。如果需要灵感，我自己在这里创建了一个简单的编辑器https://github.com/NenadP/biu-editor :) - NenadP

看起来它被立即删除并添加了。因为在Web检查器中它有。如果我展开这个标签，然后尝试取消加粗文本，则标签会再次折叠。 - Jeroen

这不是一般性问题，而是你代码中的特定问题。请提供一些jsfiddle或codepen。 - Alexander Dayan

最终我成功让JSFiddle工作了，幸运的是问题也存在于这里（否则解决起来可能会更加困难）。这是链接 https://jsfiddle.net/ume3t0vp/ - Jeroen

好的，我明白问题所在。我会在几分钟内发布我的答案。 - Alexander Dayan

好的，非常感谢您的提前帮助！ - Jeroen

2个回答

0

试试这个：

#textEditorField * {
    font-family: unset;
}
#textEditorField b {
    font-weight: bold;
}

- POPI

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexander Dayan · Accepted Answer

execCommand('bold'... 正常工作，即在  标记中切换文本的周围样式。问题是，您在以下 CSS 类的  标记中设置了 '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;
}

所以，您应该删除此属性，一切都会正常工作。

更新：

重要的是要了解，某些情况下该方法可能“加粗但不取消加粗”。实际上，execCommand比仅仅包围文本更加智能。它还规范化它，考虑到可能有混合标记（如或）与、等交叉。浏览器算法分析文本样式以理解什么是实际上的加粗以及为什么。当您将加粗重新定义为正常时，它可能导致算法决定：“好吧，尽管它在标记内，但文本并不加粗，因此没有任何可以更改的内容”，因此保留标记。