Browser automatically inserts unwanted code to enter contenteditable div

Question

I have a contenteditable div with ul and some li in it. Now, if I want to add some more text behind the list, I place the cursor after the last li ("3") and paste it twice. After the first input, he adds a new li, and after the second input, he closes ul and adds a div with br inside it so that I can start writing in it. ( Example # 1 )

Expected Code:

<div contenteditable="true"> <p>Test</p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul><div><br></div> </div> 

This is the expected behavior. But if there are some style sheets for li, the browser not only adds a new div with br, but also adds different code according to the styles you defined ( Example # 2 ).

Resulting Code:

 <div contenteditable="true"> <p>Test</p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul><div><font face="Arial"><span style="line-height: 20px;"><br></span></font></div> </div> 

What can I do to prevent this browser behavior? I want to have some stylesheets for li, but I don’t want the browser to insert whatever it likes in my html code.

Answer 1

This is one of the big sets of Blink and Webkit errors (Chrome, Opera, Safari). There is a ticket on the CKEditor developer site grouping some of them , and I reported this also on the Blink and Webkit sites:

• http://code.google.com/p/chromium/issues/detail?id=226941
• https://bugs.webkit.org/show_bug.cgi?id=114791

but no one answered ...; /

As said, there are only two ways to get rid of this problem:

• write your own backspace, delete and enter key support (very difficult),
• do not use style (very undisclosed).

Therefore, I am afraid that there is currently no other option than to remind the Blink and Webkit commands that their engines should not create this crappy HTML code.