chrome 和 safari 中的 contenteditable 用内联样式替换了 css 类和规则

Question

我正在编写一个简单的所见即所得编辑器，能够将 css 类应用于文本，我在 chrome 和 safari 中遇到了以下问题：

在 contenteditale 区域中，如果您手动将 css 类添加到元素，或者使用 'display: inline' 为 h1 设置了 css 规则（例如）。经过一些操作，如删除或复制/剪切+粘贴，您将样式作为内联样式并丢失元素上的所有属性。我猜浏览器只在元素上设置了相关的计算样式。有什么办法可以防止这种行为吗？

<span class="red">aaaaaaaa bbbbbbbbbbb</span> 

=>

<span class="Apple-style-span" style="color: rgb(255, 0, 0); font-size:     20px;">bbbbbbbbbbbbbbbbbbbbbb</span>

• 此示例使用“styleWithCss”

Answer 1

在 2011 年，这是 WebKit 的一个“功能”。我相信它仍然是...

但是，似乎有一个解决方案，尽管我没有深入研究。看看： https: //www.w3.org/TR/input-events/

https://webkit.org/blog/7358/enhanced-editing-with-input-events/