javascript - Internet Explorer 替代 document.execCommand ("insertText",...)，用于用户可以撤消/重做的文本插入

Question

当用户编辑 contenteditable div 并按下某些键时，我想覆盖默认行为。例如，我想在用户按下 ENTER 时插入一个普通的换行符。我使用 document.execCommand("insertText",...)

到目前为止，这是我发现的使用户可撤消和可重做此操作的唯一方法。

<div id="editor" contenteditable="true" style="white-space:pre-wrap">
Some text....
</div>

<script>
$("#editor").keydown(function(evt){
    console.log(evt.keyCode);
    if(evt.keyCode==13){
        document.execCommand("insertText",false,"\n");
        evt.preventDefault();
        evt.stopPropagation();
    }
}
</script>

此代码适用于 chrome 和 firefox。但是，ie 不支持“inserttext”。是否有一种方法可以使用 ie 插入文本，以便用户可以撤消它？

Answer 1

IE 11 有新的 ms-beginUndoUnit和 ms-endUndoUnit命令。

我尝试使用它们为 IE 11 创建一个可行的解决方案，但未能成功。使用 DOM 范围和选择很难插入换行符；您可以在 IE 中使用其旧版 document.selection 更轻松地做到这一点和 TextRange 对象，但不幸的是 IE 11 已删除 document.selection (但不是 TextRange，奇怪的是)这使得它变得困难。在编写了一个讨厌的解决方法以从选择中创建一个 TextRange 之后，撤消无论如何都不起作用。这是我所做的:

http://jsfiddle.net/E7sBD/2

我决定再试一次使用 DOM 范围和选择对象。换行符插入代码是说明性的，不应该用于任何严肃的事情，因为它涉及添加一个不间断的空格来给插入符一个去处(试图将它直接放在 <br> 之后是行不通的)。撤消确实会删除插入的内容，但遗憾的是不会移动插入符号。

http://jsfiddle.net/E7sBD/4/