镀铬空满足​​保留造型

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