Html 浏览器会在输入contenteditable div时自动插入不需要的代码

我有一个有ul和一些li的可编辑div。现在，如果我想在列表后面添加更多的文本，我将光标放在最后一个li（“3”）之后，并按两次enter键。第一次输入后，它会添加一个新的li，第二次输入后，它会关闭ul并添加一个带有br的div，这样我就可以开始写入了。（）

预期代码：

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

<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定义的样式表，那么浏览器不仅会使用br添加新的div，还会根据您定义的样式添加不同的代码（）

结果代码：

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

<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代码中插入它喜欢的任何东西。

这是Blink和Webkit（Chrome、Opera、Safari）漏洞中较大的一组。在CKEditor的开发站点上有一个报告，我也在Blink和Webkit的站点上报告了它：

• ​
• ​

但没有人回应/

如前所述，只有两种方法可以解决这个问题：

• 编写自己的退格、删除和输入键支持（非常复杂）
• 不要使用任何造型（非常不酷）

---

因此，我担心目前除了提醒Blink和Webkit团队他们的引擎不应该生成这种糟糕的HTML之外，没有其他选择。

您到底键入了什么，测试的是哪种浏览器？当我在Firefox中这样做时（在3，2x回车键后单击以跳出列表，键入文本），我得到

3
文本

，也就是说，一个没有样式的

p

，还有一个额外的

ul

。对不起，忘了提及。。。问题发生在Chrome 29中。在3，2次输入后点击，你会得到我在上面写的“结果代码”。所以每个浏览器都不同。那我不知道你能不能做点什么。您可以编写一个Javascript例程来检查是否存在

元素，或者在Firefox中是否存在空的

元素，但这感觉像是一个补丁，而不是一个真正的解决方案。我刚刚找到一篇文章，可能会有所帮助。