4

我有一个带有 ul 和一些 li 的 contenteditable div。现在，如果我想在列表后面添加更多文本，我将光标放在最后一个 li（“3”）之后，然后按两次 Enter。在第一次输入后，它添加了一个新的 li，在第二次输入后，它关闭了 ul 并在其中添加了一个带有 br 的 div，这样我就可以开始在其中写入了。（示例＃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，还会根据您定义的样式添加不同的代码（示例 #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 代码中插入它喜欢的任何内容。

4

1 回答 1

2

这是更大的 Blink 和 Webkit（Chrome、Opera、Safari）错误集之一。在 CKEditor 的开发网站上，有一张将其中一些分组的票证，我也在 Blink 和 Webkit 的网站上报告了它：

  • ​<a href="http://code.google.com/p/chromium/issues/detail?id=226941" rel="nofollow">http://code.google.com/p/chromium/issues/详细信息？id=226941
  • ​<a href="https://bugs.webkit.org/show_bug.cgi?id=114791" rel="nofollow">https://bugs.webkit.org/show_bug.cgi?id=114791

但没有人回应... ;/

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

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

所以恐怕目前除了提醒 Blink 和 Webkit 团队他们的引擎不应该产生这种糟糕的 HTML 之外别无选择。

于 2013-08-25T10:23:00.017 回答