镀铬空满足 保留造型

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);
}