如何在contentEditable范围内进行纯文本粘贴而不破坏撤消？

Question

奇怪的具体问题,但我有一个解决方案已经<span contentEditable="true">通过使用隐藏粘贴纯文本textarea,这似乎工作得很好,除了它打破浏览器的撤消功能.马上,我并不担心跨浏览器解决方案; 我只关心Chrome.我的方法大致如下:

$('.editable').live('paste', function()
{
    var $this = $(this);

    //more code here to remember caret position, etc

    $('#clipboard').val('').focus(); //put the focus in the hidden textarea so that, when the paste actually occurs, it's auto-sanitized by the textarea

    setTimeout(function() //then this will be executed immediately after the paste actually occurs
    {
        $this.focus();
        document.execCommand('insertHTML', true, $('#clipboard').val());
    });
});

所以这是有效的 - 我可以粘贴任何东西,并且在进入我的contentEditable字段之前它被简化为纯文本- 但是如果我在粘贴后尝试撤消:

• 首先撤消撤消粘贴.
• 第二次撤消尝试撤消更改#clipboard,将焦点从我的移开contentEditable.

我已经尝试了所有我能想到的东西,让浏览器不要尝试撤消更改#clipboard- display:none当它没有主动使用时切换,切换readonly和disabled状态,在结束时销毁它并在上面的事件开始时重新创建它各种其他黑客 - 但似乎没有任何作用.

这是一种可怕的消毒方法吗？这是我设法真正开始工作的第一件事 - 在粘贴发生后尝试清理标记不起作用,因为有些东西(整个HTML文档)在粘贴时会崩溃浏览器,我想避免.

有没有办法让#clipboard不可撤销的,或任何其他建议如何使这工作？

编辑

我设法通过添加线来改善一些事情

$('#clipboard').val('');

就execCommand行了.这似乎完全抵消了撤销:插入符号不再离开contentEditable场地,但根本没有任何东西被撤消.有点改进,但​​我仍在寻找合适的解决方案.

Answer 1

插入一个<pre contenteditable="true">...</pre>. 我记得这正是我理解你想要的。（不幸的是，我还不能和所有人一起发表评论，但我想这无论如何都是一种尝试。）