javascript - HTML Conteneditable - 在不应用内联样式的情况下加入段落

Question

在 WYSIWYG 编辑器（基于contenteditable div）中，我有代码来确保在复制粘贴、正常输入等时不会将内联样式插入 HTML。但现在浏览器似乎更想惹恼我。假设我的 HTML 中有 2 个此类段落

<p>This is the first paragraph |(cursor)</p>
<p>This is the second paragraph</p>

不存在内联样式。但是，如果我现在通过按“删除/退格”加入这两个段落，Chrome 决定这样做

<p>This is the first paragraph |(cursor)
    <!-- Note the horrible inline styles -->
    <span style="font-size: 13px; line-height: 19.53px;">
        This is the second paragraph
    </span>
</p>

有人知道我如何预防/检测这种情况发生吗？

Answer 1

这是 Webkit 的问题。它也影响 CKEditor ( http://dev.ckeditor.com/ticket/9998 )。我报告了这些票：

• http://code.google.com/p/chromium/issues/detail?id=226941
• https://bugs.webkit.org/show_bug.cgi?id=114791

但是没有回应。

您无法在 jsfiddle 上复制此内容，因为需要将样式应用于这些段落。例如：

p { line-height: 1.5em; font-size: 12px; }

检查这个：http: //jsfiddle.net/HHHak/2/

所以目前有两种可能的解决方案：

• 避免任何样式：| （但这不会解决我在提到的错误报告中描述的其他问题），
• 实现你自己的退格/删除支持（真的很棘手......你可以在规范草案中找到一个算法，但我不确定它是否完整）。