Браузер автоматически вставляет ненужный код при вводе в contenteditable div

Question

У меня есть спорный div с ul и некоторыми li в нем. Теперь, если я хочу добавить еще текст позади списка, я помещаю курсор после последнего li ("3") и дважды нажимаю ввод. После первого ввода он добавляет новый li, а после второго ввода закрывает ul и добавляет div с br внутри него, чтобы я мог начать писать в нем. ( Пример № 1)

Ожидаемый код:

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

Это ожидаемое поведение. Но если для li определены некоторые таблицы стилей, браузер не только добавляет новый div с br, но также добавляет другой код в соответствии с определенными вами стилями ( Пример # 2).

Результирующий код:

<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>

Что я могу сделать, чтобы предотвратить такое поведение браузера? Я хочу иметь несколько таблиц стилей для li, но я не хочу, чтобы браузер вставлял все, что ему нравится, в мой HTML-код.

Answer 1

Это один из самых больших наборов ошибок Blink и Webkit (Chrome, Opera, Safari). На сайте разработчиков CKEditor есть тикет, объединяющий некоторые из них, и я сообщил об этом также на сайтах Blink и Webkit:

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

но никто не ответил...;/

Как уже было сказано, есть только два способа избавиться от этой проблемы:

• написать собственный возврат, удалить и ввести поддержку клавиш (очень сложно),
• не используйте стили (очень не круто).

Поэтому я боюсь, что в настоящее время нет другого выбора, кроме напоминания командам Blink и Webkit о том, что их движки не должны создавать этот дерьмовый HTML.