哪些元素可以安全地满足？

Question

我最近在HTML5页面中使用contenteditable并在使用某些元素时遇到错误,我想知道在哪里以及如何安全地使用它.

我发现让一个span元素满足可能导致Firefox ¹和Chrome ²中的一些错误行为.但是,使div或section contenteditable看起来完全安全³.

一些人提到的指南是,只有块级元素才能成为可信的.但是,Mozilla开发人员网络将标题元素h1到h6列为块级元素,并且使标题元素成为可疑因素在Firefox ^4中存在错误,并且可能导致 Chrome ^5中的页面崩溃.

我希望能够利用不仅仅是div的和部分多,但我不是什么元素其实我可以放心地CONTENTEDITABLE清楚.通过安全的,我的意思是使用正常条件下的元素,我应该能够进行正常的编辑任务,没有它做意想不到的或者有缺陷的东西.我应该可以在其中写入,删除内容,剪切,复制,粘贴和移动我的文本光标并突出显示文本而不会出现意外或奇怪的行为.

那么,哪些元素我能真正安全地满足？有特定的类别吗？安全可信的元素必须符合某些标准吗？

<sup>错误说明:
1.Firefox 21 w/span:如果文本光标被带到元素的开头或结尾,则元素失去焦点,但如果通过删除内容到达那里则不会失去焦点.突出显示元素的一部分,剪切然后粘贴将在该点将元素拆分为两个,然后在两个部分之间插入一个空白元素 - 而不是实际放置您尝试粘贴到任何地方的文本.
2. Chrome 27 w/span:如果跨度覆盖多行,例如通过自动换行,剪切和粘贴内容通常会在粘贴的内容后插入换行符.
3.除非你进行div显示:inline,在这种情况下,它仍然可以像1中一样失去焦点,但显然只有当你将文本光标移到最后时.我不认为这个元素的"正常"用法.
4. Firefox 21 w/heading:选择内容的一部分然后剪切和粘贴将类似于1,在该点将标题元素分成两半,并在两半之间插入第三个标题元素.它至少会在你的内容中粘贴你的内容,但现在你有三个标题元素,其中最初有一个.
5. Chrome 27 w/heading:选择一些内容并剪切和粘贴.页面崩溃了.你得到一个"Aw snap!" 信息.而已.</sup>

根据要求提供jsFiddle.

这里是jsFiddle的链接,用于复制上述内容.这很简单,虽然目前唯一没有复制的是丢失焦点的bug.这很简单:

<article style="width: 100px">
    <h1 contenteditable="true">Heading</h1>
    <p>
        <strong>Some adjacent content</strong>
        <span contenteditable="true">Span! This is long enough it will spread over multiple lines.</span>
    </p>

    <div style="display: inline" contenteditable="true">An inline div also with multiple lines.</div>
</article>

Answer 1

在我看来，我认为div这是最安全的选择。您希望真正编辑的任何元素（无论是跨度、标题等），都可以放置在 div 内并进行编辑，就好像它只是该元素一样。另外，为了解决您提到的 display:inline 问题，您始终可以在可编辑 div 上使用 float:left 或 float:right 来给它一种“内联感觉”，而不必让它实际上是内联的。

希望有帮助！