25

我最近一直在 HTML5 页面中使用 contenteditable，并且在将它与某些元素一起使用时遇到了错误，我想知道在哪里以及如何真正安全地使用它。

我发现使span元素 contenteditable 会导致 Firefox 1和 Chrome 2中出现一些错误行为。但是，使div或部分内容可编辑看起来完全安全3。

一些人提到的一个指导方针是，只有块级元素应该是可内容编辑的。但是，Mozilla 开发者网络将标题元素h1到h6列为块级元素，并且在 Firefox 4中将标题元素设置为 contenteditable 是有问题的，并且可能会使 Chrome 5中的页面崩溃。

我希望能够使用的不仅仅是 div 和部分，但我不清楚我实际上可以安全地使哪些元素可编辑。安全，我的意思是在正常条件下使用元素，我应该能够执行正常的编辑任务，而不会做意外或错误的事情。我应该能够在其中写入、删除内容、剪切、复制、粘贴和移动我的文本光标并突出显示文本，而不会出现意外或奇怪的行为。

那么，我可以真正安全地使哪些元素可编辑？有具体的分类吗？安全内容可编辑元素是否必须匹配某些标准？

错误说明：

  1. Firefox 21 w/ span：如果文本光标被带到元素的开头或结尾，元素会失去焦点，但如果它通过删除内容到达那里则不会。突出显示元素的一部分，剪切然后粘贴将在该点将元素一分为二，然后在两个部分之间插入一个空白元素 -而实际上不会将您试图粘贴的文本放在任何地方。
  2. Chrome 27 w/ span：如果 span 覆盖多行，例如通过自动换行，剪切和粘贴内容通常会在粘贴的内容后插入换行符。
  3. 除非您使 div 显示：内联，在这种情况下，它仍然可以像 1 中那样失去焦点，但显然只有当您将文本光标带到末尾时。不过，我不认为元素的这种“正常”用法。
  4. Firefox 21 带标题：选择部分内容然后剪切和粘贴将与 1 类似，在该点将标题元素一分为二，并在两半之间插入第三个标题元素。至少，它会在其中包含您粘贴的内容，但是现在您在原来有一个标题元素的地方有了三个标题元素。
  5. Chrome 27 带标题：选择一些内容并剪切和粘贴。页面崩溃。你会得到一个“Aw snap！” 信息。就是这样。

演示代码

这是重现上述内容的演示。这很简单，但目前唯一没有重现的是失去焦点的错误。

[contenteditable=true] {
  border: 1px dotted #999;
}
<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>

4

2 回答 2

2

在我看来，我会说div是最安全的赌注。您希望真正编辑的任何元素（无论是跨度、标题等），您都可以将其放置在 div 中并进行编辑，就好像它只是那个元素一样。此外，为了解决您提到的 display:inline 问题，您始终可以在可编辑的 div 上使用 float:left 或 float:right 以使其具有“内联感”，而无需使其实际上是内联的。

希望有帮助！

于 2013-06-27T13:51:17.657 回答
0

由于这是一个不断发展的功能，显然浏览器供应商支持的低优先级一直是粗略的，回归并不少见。当前的事态正在发展，因此请检查 Google、CanIUse 等，并确保为您的网站访问者提供支持，其他一切都没有实际意义......

Firefox 中的支持似乎很稳固，至少对于某些元素，现在https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content 它在 Chrome 以及我的测试中运行良好去。CanIUse 看起来不错：http ://caniuse.com/#feat=contenteditable

尽管在不同的浏览器中存在与该功能相关的许多不同的错误，但对于简单的用例，它现在应该没问题，截至 2016 年 8 月。

于 2013-06-24T12:39:49.347 回答