javascript - 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/