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

2019年7月21日 301次阅读

我有一个满足感的div,里面有一个ul和一些li.现在,如果我想在列表后面添加更多文本,我将光标放在最后一个li(“3”)之后,然后按两次输入.在第一次输入后,它会添加一个新的li,然后在第二次输入后关闭ul并在其中添加一个带有br的div,以便我可以开始写入它. (
Example #1)

预期代码：

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

这是预期的行为.但是如果为li定义了一些样式表,浏览器不仅会添加带有br的新div,而且还会根据您定义的样式添加不同的代码(Example #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代码中插入任何它喜欢的内容.

最佳答案 这是Blink和Webkit(Chrome,Opera,Safari)错误中较大的一个.在CKEditor的开发站点上有一个
ticket grouping some of them,我在Blink和Webkit的站点上报告了它：

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

但没有人回应…; /

如前所述,只有两种方法可以摆脱这个问题：

>编写自己的退格键,删除并输入键支持(非常复杂),
>不要使用任何造型(非常不酷).

所以我担心目前除了提醒Blink和Webkit团队他们的引擎不应该产生这个糟糕的HTML之外别无选择.

点赞