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

Posted 2023-03-06

【中文标题】execCommand() 不会“取消粗体”文本

【英文标题】：execCommand() doesn't "unbold" text

【发布时间】：2015-04-21 07:01:24

【问题描述】：

我制作了自己的 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。

【问题讨论】：

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

它看起来像是被删除并立即再次添加。因为在 web-inspector 中它有<b></b>。如果我展开此标签，然后尝试取消加粗文本，标签会再次折叠。

这不是一般问题，它是您代码中的特定问题。提供一些 jsfiddle 或 codepen。

最后我让 JSFiddle 工作了，幸运的是这里也存在问题（否则我猜它会更难解决）。这里是jsfiddle.net/ume3t0vp

好的，我明白了问题所在。将在几分钟后发布我的答案。

【参考方案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> 标签内，但文本不是粗体，因此没有什么可更改的”并保留标签。

【讨论】：

我没想到execCommand()-算法会这个聪明。你是对的，这就是解决方案。但现在的问题是：由于字体 (Caviar Dreams BOLD) + 字体粗细，设置为粗体的 contenteditable div 中的文本是 extra 粗体。我想最好/唯一的解决方案是给这个 div 的 b-element 字体“Caviar Dreams REGULAR”，这样它看起来很大胆？

是的，这似乎是最正确的解决方案。顺便说一句，你为什么决定使用这种字体？非常适合大尺寸排版，在所见即所得编辑器中，它看起来与像 arial 这样简单和标准的东西没有什么不同......

谢谢。我会用这个。关于字体？我不知道。我正在学习软件工程，所以我绝对不是设计师。 ;) 我可能会为我正在为课程客户端构建的网站研究一些其他字体（和配色方案）。

如果你想使用花哨的粗体字体，而不是设置系列，然后将字体粗细设置为正常（并破坏 execCommand），你可以改为使用 @font-face 扩展原始字体系列告诉浏览器在字体粗细设置为“粗体”时使用哪种字体。 ***.com/questions/2436749/…