Contenteditable in chrome and safari replace css classes and rules with inline style

I am writing a simple wysiwyg editor with the ability to apply CSS classes to text, I encountered the following problem in chrome and safari:

In the contenteditale area, if you manually add the css class to the element or use the css rule for h1 (for example) using 'display: inline. After some operations, such as deleting or copying / cutting + pasting, you get the style as an inline style and lose all the attributes of the elements. I assume that the browser only sets the appropriate computed style for the element. Is there a 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 applies to 'styleWithCss

+4
source share

Source: https://habr.com/ru/post/1383976/


All Articles