哪些元素可以安全地让人满意？ [英] Which elements can be safely made contenteditable?

问题描述

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

我发现制作 span 元素可能会导致Firefox ¹ 和Chrome ² 。不过，制作 div 或 节 内容是完全安全的 3 。

一些人提到的指导原则是只有块级元素 。但是，Mozilla开发人员网络列出标题元素 h1 到 h6 作为块级别的元素，并使标题元素满足在Firefox ⁴ 中有问题，并可以崩溃页面在Chrome ⁵ 。

我喜欢能够使用多于div和部分，但是我不清楚我可以安全地做出什么样的要素。通过安全，我的意思是说，在正常情况下使用元素，我应该能够执行正常的编辑任务而不是它做意外或错误的事情。我应该能够写入，删除内容，剪切，复制，粘贴和移动我的文本光标，并突出显示文本，而不会出现意外或奇怪的行为。

那么，我真的可以安全地使用哪些元素？有没有特定的类别？ safe-contenteditable元素必须符合某些标准吗？

<sup>错误提示：

1. Firefox 21 w / span：如果将文本光标移动到元素的开头或结尾处，则元素将失去焦点，但如果通过删除内容到达那里，则不会。突出显示元素的一部分，然后剪切然后粘贴，将元素分割为两部分，然后在两部分之间插入一个空白元素，而不是实际上将要粘贴的文本放在任何地方。 >
2. Chrome 27 w / span：如果跨度覆盖多行，例如通过wordwrapped，剪切和粘贴内容将经常在粘贴的内容后面插入一个换行符。

3.除非您使div显示：inline，在这种情况下，它仍然可能失去焦点，如1，但显然只有当你把文本光标到最后。我不认为这个元素的正常用法。


4. Firefox 21 w /标题：选择内容的一部分，然后剪切和粘贴将类似于1，将标题元素分割在这一点上是一半，并在两半之间插入一个第三标题元素。它至少会把你粘贴的内容放在里面，但是现在你有三个标题元素，最初是一个元素。

5. Chrome 27 w /标题：选择一些内容并剪切和粘贴。页面崩溃。你得到一个啪！信息。就是这样。</sup>

一个jsFiddle。

这是一个jsFiddle的链接，用于复制上述内容。这非常简单，但目前唯一不能复制的就是失去焦点的错误。这很简单：

 < article style =width：100px> 
< h1 contenteditable =true>标题< / h1> 
< p> 
< strong>一些相邻的内容< / strong> 
< span contenteditable =true>范围！这足够长，将分散在多行。< / span> 
< / p> 
 
< div style =display：inlinecontenteditable =true>内联div也有多行。< / div> 
< / article> 
  

解决方案

在我看来，我会说 div 是最安全的赌注。您希望真正编辑的任何元素（无论是跨度，标题等），您可以将其放置在div中并编辑，就好像它只是该元素一样。另外，为了说明你所提到的显示内联问题，你可以在你的可编辑div上总是使用float：left或float：right来给它一个内联感觉，而不用真正的内联。

希望有帮助！

I've been working with contenteditable recently within a HTML5 page and encountering bugs when using it with certain elements, and I'd like to know where and how I can actually safely use it.

I've discovered that making a span element contenteditable results in some buggy behaviour in both Firefox¹ and Chrome². However, making a div or section contenteditable appears completely safe³.

A guideline a couple of people have mentioned is that only block-level elements should be made contenteditable. However, the Mozilla Developer Network lists the heading elements h1 through to h6 as block-level elements, and making a heading element contenteditable is buggy in Firefox⁴ and can crash the page in Chrome⁵.

I'd like to be able to use more than just divs and sections, but I'm not clear on what elements I can actually safely make contenteditable. By safely, I mean that using the element under normal conditions, I should be able to perform normal editing tasks without it doing unexpected or buggy things. I should be able to write in it, delete content, cut, copy, paste, and move my text cursor about and highlight text without unexpected or strange behaviour.

So, which elements can I really make contenteditable safely? Is there a specific category? Are there certain criteria the safely-contenteditable element must match?

<sup>Bug notes:
1. Firefox 21 w/ span: Element loses focus if the text cursor is brought to the beginning or end of the element, but not if it got there by deleting content. Highlighting part of the element, cutting and then pasting will split the element in two at that point then insert a blank element between the two parts - without actually putting the text you were trying to paste anywhere.
2. Chrome 27 w/ span: If the span covers multiple lines e.g. by being wordwrapped, cutting and pasting content will often insert a linebreak after the pasted content.
3. Unless you make the div display:inline, in which case it can still lose focus as in 1, but apparently only if you bring the text cursor to the end. I don't consider this "normal" usage of the element though.
4. Firefox 21 w/ heading: Selecting part of the content then cutting and pasting will, similarly to 1, split the heading element in half at that point, and insert a third heading element between the two halves. It will, at least, have your pasted content inside it, but now you have three heading elements where there was originally one.
5. Chrome 27 w/ heading: Select some content and cut and paste. The page crashes. You get an "Aw snap!" message. That's it.</sup>

A jsFiddle as requested.

Here's a link to a jsFiddle for reproducing the above. It's pretty simple, though at the moment the only thing it isn't reproducing is the lose-focus bug. It's pretty simple:

<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>

解决方案

In my opinion, I'd say div is the safest bet across the board. Any element you wish to truly edit (be it a span, header, etc), you can place inside the div and edit as if it were just that element. Also, to account for the display:inline issue you mentioned, you could always use float:left or float:right on your editable div to give it an "inline feel" without having it actually be inline.

Hope that helps!

这篇关于哪些元素可以安全地让人满意？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！