CODEWITHSUNDEEP
htmlcssbrowsercontenteditable
Wow
Wow

Reputation: 305

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.

Upvotes: 4

Views: 2057

Answers (1)

Reinmar
Reinmar

Reputation: 22023

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:

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.

Upvotes: 2

Related Questions