镀铬空满足​​保留造型

Question

当我在页面中有一个满足的部分时，Chrome似乎在做一些奇怪/有趣/混乱的事情。 如果你有一段用<span>包裹的文本（也许是其他标签，我不知道）有一个类应用于它，它会对文本应用其他样式（字体系列，颜色等），然后删除可编辑部分中的所有文本。当您再次开始输入时，文本看起来与开始删除文本时的文本相同，但似乎使用原始计算CSS进行样式设置，而不是使用适当类别的跨度。

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和其他保留你造型的处理器;但是，这些级别在我们的编辑器中很重要，应予以保留。如果他们不能，我宁愿关掉这个“功能”。

Answer 1

防止Chrome保留插入符号位置的旧计算样式的一种方法是清除浏览器选择，然后还原它（以保留选择）。这应该在删除样式元素之后并在插入新内容之前完成。根据以下内容进行操作：

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