哪些元素可以安全地变为 contenteditable？

Question

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

我发现将 span 元素设为 contenteditable 会导致 Firefox¹ 和 Chrome² 出现一些错误行为。但是，使 div 或 section contenteditable 看起来完全安全³。

一些人提到的指导方针是，只有 块级元素 应该被设为 contenteditable。然而，Mozilla 开发者网络lists the heading elements h1 through to h6 as block-level elements，并且在 Firefox⁴ 中使标题元素可编辑是错误的，并且可能会在 Chrome⁵ 中崩溃页面.

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

那么，我可以真正安全地将哪些元素设为 contenteditable？有具体的分类吗？安全内容可编辑元素是否必须符合某些标准？

错误说明：

1. Firefox 21 w/ span：如果文本光标移动到元素的开头或结尾，元素会失去焦点，但如果它通过删除内容到达那里则不会。突出显示元素的一部分，剪切然后粘贴将在该点将元素一分为二，然后在两部分之间插入一个空白元素 - 没有实际上将您试图粘贴的文本放在任何地方。李>
2. 带跨度的 Chrome 27：如果跨度覆盖多行，例如通过自动换行，剪切和粘贴内容通常会在粘贴的内容后插入换行符。
3. 除非您将 div 设为 display:inline，在这种情况下，它仍会像 1 中一样失去焦点，但显然只有在您将文本光标置于末尾时。不过，我不认为元素的这种“正常”用法。
4. Firefox 21 带标题：选择部分内容然后剪切和粘贴将与 1 类似，在该点将标题元素一分为二，并在两者之间插入一个 third 标题元素一半。至少，它会在其中包含您粘贴的内容，但现在您在原来有一个标题元素的地方有了三个标题元素。
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>

Answer 1

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

希望有帮助！

Answer 2

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

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

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