Chrome 空 contenteditable 保留样式

当我在页面中有可内容编辑的部分时，Chrome 似乎做了一些奇怪/有趣/令人困惑的事情。 如果您有一段用<span>（也许是其他标签，我不知道）应用了一个类，该类将附加样式应用于文本（字体系列、颜色等），然后删除可编辑部分中的所有文本。当您再次开始输入时，文本看起来与开始删除文本时的文本相同，但似乎使用原始计算的 CSS 进行样式设置，而不是具有包含适当类的跨度。

http://jsfiddle.net/tomprogramming/wS4Gp/ http://jsfiddle.net/tomprogramming/wS4Gp/

知道为什么会发生这种情况，或者我是否可以将其关闭？ Firefox 和 IE 似乎都保留了其中的类的跨度。

这就是我的开始

<span class="level1" style="font-weight:bold;">This is level'd text</span>

这就是我最终得到的结果

<span style="color: rgb(255, 255, 255); font-family: helvetica, arial, sans-serif; font-size: 48.18181610107422px; font-weight: bold;">This is level'd text</span>

以及相关的CSS

.editable .level1 {
    color: #fff;
    font-size:3em;
    font-family:helvetica, arial, sans-serif;
}

我明白发生了什么，它试图像 Word 和其他处理器一样保留您的样式；然而，这些级别在我们的编辑器中很重要，应该保留。如果他们不能，我宁愿关闭这个“功能”。

防止 Chrome 保留插入符号位置的旧计算样式的一种方法是清除浏览器选择，然后恢复它（以保留选择）。这应该在删除样式元素之后和插入新内容之前完成。做以下几件事：

let selection = window.getSelection();
if (selection && selection.rangeCount > 0 && selection.isCollapsed) {
  let range = selection.getRangeAt(0);
  selection.removeAllRanges();
  selection.addRange(range);
}