javascript - 如何在不中断撤消的情况下在 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 状态，在结束时销毁它并重新创建它在上述事件的开始，各种其他黑客攻击——但似乎没有任何效果。

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

有什么方法可以使 #clipboard 不可撤销，或者有任何其他关于如何让它工作的建议吗？

编辑

我设法通过添加这条线来改进一些东西

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

就在 execCommand 行之后。这似乎完全抵消了撤消:插入符号不再离开 contentEditable 字段，但根本没有撤消任何事情。有点改进，但​​我仍在寻找合适的解决方案。

Answer 1

CodeMirror 1 通过在粘贴文本后剥离格式来实现这一点。 CodeMirror 2 通过实际上让一个不可见的文本区域处理所有内容并手动呈现文本和光标来实现这一点。

CodeMirror 的网站更详细地描述了它的工作原理:http://codemirror.net/internals.html

除此之外，还有 CodeMirror 源代码。您可以自己决定是 CodeMirror 1 还是 CodeMirror 2 的方法更适合您的目的。 :)