javascript - 防止 Chrome 用 包装加入的 的内容

Question

我在 Chrome 中观察到一个不受欢迎的行为，当一个连接两个时会发生 <p>通过删除它们之间的分隔。虽然<p>标签连接正确，Chrome 包装最右边的 <p>标签的内容带有 <span> .

编辑:所有 block 元素都会发生这种情况，而不仅仅是p标签。

示例:

例如，当分离</p><p>从以下 block 中删除:

<div contenteditable="true"><p>p one.</p><p>p two.</p></div>

它变成了:

<div contenteditable="true"><p>p one.<span style="font-size: 16px; line-height: 1.44;">p two.</span></p>

fiddle 中的例子:Chrome wrapping contents of joined <p> with a <span> .

问题:

有没有一种简单的方法可以防止 chrome 这样做？它会导致可怕的标记，我非常想摆脱它。

Answer 1

有一种方法，但你需要主动设置一些样式。这个想法是告诉 Chrome 样式已经处理好了，所以它不需要添加 SPAN 来满足样式要求。基本上，您需要将 chrome 添加的样式添加到 contenteditable div 下的 span 类(请参见下面的示例)。

Edited fiddle

例如:

• 我向内容可编辑的 DIV 添加了一个“编辑”类
• 我在样式中添加了一个 .edit p, span 类

这变成了:

.edit {
  border: 1px solid gray;
  padding: 10px;
}
.edit p, span {
  line-height: 1.44; font-size: 16px;
}

还有 DIV:

<div contenteditable="true" class="edit">...</div>

请注意，您通常不需要 font-size: 16px;。我需要添加这个，因为 fiddle 在 contenteditable 中定义了一些字体大小。在独立页面上我不需要它。

您需要将此 Chrome“补丁”应用到它出现的任何元素(因此，如果您需要 UL、OL... 然后按照我上面的示例逻辑添加所需内容)