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属性，文本将获得font-family＆＃34; Caviar Dreams Bold＆＃34;并且它通过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;
}

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

更新：

重要的是要了解在某些情况下该方法如何“大胆而不是解开”。实际上，execCommand比仅仅围绕文本更聪明。考虑到可能混合使用或以及，等交叉标记，它也会对其进行标准化。浏览器算法会分析文本样式，以了解什么是实际的大胆和为什么。当您将粗体重新定义为正常时，可能会导致算法决定：“好的，虽然它在标记内，但文本不是粗体，因此没有任何内容可以更改”并保留标记。

execCommand（）没有＆＃34; unbold＆＃34;文本

1 个答案: