HTML Conteneditable -连接段落而不应用内联样式

HTML Conteneditable - join paragraphs without inline styles being applied

本文关键字：应用 样式 Conteneditable 连接 段落 HTML      更新时间：2023-09-26

在WYSIWYG编辑器中(基于可满足内容的div)，我编写了代码来确保在复制粘贴、正常键入等操作时没有将内联样式插入HTML中。但现在浏览器似乎更想捉弄我了。假设我的HTML中有两段这样的内容

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

没有内联样式。但是如果我现在通过按Delete/Backspace来连接这两个段落，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>

当这种情况发生时，有人知道我如何预防/检测吗?

这是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/

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

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