chrome 和 safari 中的 contenteditable 用内联样式替换 css 类和规则
我正在编写一个简单的所见即所得编辑器，能够将 css 类应用于文本，我在 chrome 和 safari 中遇到了以下问题：
在 contenteditale 区域中，如果您手动将 css 类添加到元素，或者有 css 规则对于 h1（例如）带有“display: inline”。经过一些操作（例如删除或复制/剪切+粘贴）后，您将获得内联样式的样式，并丢失元素上的所有属性。 我猜浏览器只在元素上设置相关的计算样式。 有什么办法可以防止这种行为吗？
<span class="red">aaaaaaaa bbbbbbbbbbb</span>
=>
<span class="Apple-style-span" style="color: rgb(255, 0, 0); font-size: 20px;">bbbbbbbbbbbbbbbbbbbbbb</span>
• 此示例使用“styleWithCss”
I’m writing a simple wysiwyg editor with the ability to apply css classes to text, I have encountered the following problem in chrome and safari:
In a contenteditale area, if you manually add a css class to an element, or have a css rule for h1 (for example) with ‘display: inline’. After some operations, like delete or copy/cut +paste you get the style as inline style and lose all the attributes on the elements.
I guess that the browser sets only the relevant computed style on the element.
Is there any way to prevent this behavior?
<span class="red">aaaaaaaa bbbbbbbbbbb</span>
=>
<span class="Apple-style-span" style="color: rgb(255, 0, 0); font-size: 20px;">bbbbbbbbbbbbbbbbbbbbbb</span>
• This example is with ‘styleWithCss’
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在 2011 年，这是 WebKit 的一个“功能”。我相信它仍然是......
但是，似乎有一个解决方案，尽管我没有深入研究。看看：
https://www.w3.org/TR/input-events/
< a href="https://webkit.org/blog/7358/enhanced-editing-with-input-events/" rel="nofollow noreferrer">https://webkit.org/blog/7358/enhanced-editing-with-input-events/
in 2011 this was a "feature" of WebKit. and I believe it still is...
But, there seems to be a solution, though I didn't dive in. take a look at:
https://www.w3.org/TR/input-events/
https://webkit.org/blog/7358/enhanced-editing-with-input-events/