Browser automatically inserts unwanted code on enter in contenteditable div

问题

I've got a contenteditable div with an ul and some li's in it. Now if I want to add some more text behind the list, I place the cursor after the last li ("3") and hit enter twice. After the first enter it adds a new li and after the second enter it closes the ul and adds a div with a br inside it so that I can start to write 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 behaviour. But if there are some stylesheets defined for the li's the browser doesn't only add a new div with br but it also adds different code according to the styles you have 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 behaviour? I do want to have some stylesheets for the li's but I don't want the browser to insert whatever it likes in my html code.

回答1:

This is one of bigger sets of Blink's and Webkit's (Chrome, Opera, Safari) bugs. On CKEditor's dev site there's a ticket grouping some of them and I reported it also on Blink's and Webkit's sites:

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

but no one responded... ;/

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

• write your own backspace, delete and enter keys support (very complicated),
• don't use any styling (very uncool).

So I'm afraid that there's no other option currently than reminding Blink and Webkit teams that their engines should not produce this crappy HTML.

来源：https://stackoverflow.com/questions/18383803/browser-automatically-inserts-unwanted-code-on-enter-in-contenteditable-div