Chrome空白内容可编辑的保留样式 [英] Chrome empty contenteditable retaining styling

问题描述

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

Chrome appears to be doing something odd/interesting/confusing when I have a contenteditable section within a page. If you have a section of text that is wrapped with a <span> (maybe other tags, I dont know) that has a class applied to it that applies additional styling to the text (font family, color, etc) and then delete all the text in the editable section. When you start typing again, the text looks the same as you had when you started deleting text, but seems to be styled with the raw computed CSS, rather than having a span with the appropriate classes.

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

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

Any idea why this happens, or if I can turn it off? Firefox and IE both seem to keep the span with the class in it.

这就是我的开头

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

这就是我最终得到的结果

and this is what I end up with

<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和其他处理器保留您的样式；但是，这些级别在我们的编辑器中很重要，应该保留。如果他们不能，我宁愿只是关闭此功能。

I understand what's going on, it's trying to behave like Word and other processors that retain your styling; however, these levels are important in our editor and should be retained. If they can't I'd rather just turn off this "feature".

推荐答案

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

One way to prevent Chrome of retaining the old computed styles of the caret position is to clear the browser selection and then restoring it (to retain the selection). This should be done after the deletion of the styled element and before new content gets inserted. Doing something on the line of the following:

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

这篇关于Chrome空白内容可编辑的保留样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！