jquery - 当 contenteditable 在 firefox 中设置为 true 时，H1 标签与文本一起被复制

Question

Contenteditable 在 h1 标签上设置为 true。现在，当我复制内容并将其粘贴到同一区域时，甚至 h1 标签也会被复制。此行为仅在 firefox 中。

火狐版本: 26.0

例如:

<H1 contenteditable="true">
    This is a paragraph. It is editable. Try to change this text.
</H1>

现在，当我从 Firefox 浏览器复制它并将其粘贴到同一区域时。然后它又添加了一个 h1 标签，而不仅仅是标签内的文本。

现在，如果我用 div 或 p 替换上面的代码，它甚至在 Firefox 中也能完美运行。问题仅在于标题标签。

<div contenteditable="true">
    This is a paragraph. It is editable. Try to change this text.
</div>

或

<p contenteditable="true">
    This is a paragraph. It is editable. Try to change this text.
</p>

div 和 p 都可以正常工作。但我需要它带有标题标签。

请看下面的 js fiddle :

http://jsfiddle.net/LVXsD/

请帮我解决问题。

Answer 1

在我看来，div 是最安全的选择。您希望真正编辑的任何元素(无论是跨度、标题等)，都可以放在 div 中并像编辑该元素一样进行编辑。

类似地，我遇到了同样的情况，我尝试了很多事情来在 Firefox 中获得正确的解决方案。在所有其他浏览器(chrome、IE7+)中，复制粘贴功能仅提供纯文本。

因此，为了在 Firefox 中解决这个问题，我使用了一些 javascript 代码行，如下所示

  $('[contenteditable]').on('paste', function (e) {
 e.preventDefault();
 var text = (e.originalEvent || e).clipboardData.getData('text/plain') ||     
 prompt('Paste something..');
 document.execCommand('insertText', false, text);

});

请按照这里的演示http://jsfiddle.net/Ee3yC/89/