document explorer替代document.execCommand("insertText",...),用于文本插入,可由用户撤消/重做

Question

当用户编辑a 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.但是,即不支持"inserttext".是否有办法插入文本,即用户可以撤消它？

Answer 1

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

我试过并且没能使用这些为IE 11创建工作解决方案.DOM范围和选择很难插入换行符; 你可以使用它的遗产document.selection和TextRange对象在IE中更容易地做到这一点但不幸的是IE 11被删除了document.selection(但不是TextRange,奇怪的是)这使得它变得困难.在编写了令人讨厌的变通方法以从选择中创建TextRange之后,撤消无论如何都不起作用.这是我做的:

http://jsfiddle.net/E7sBD/2

我决定再使用DOM Range和选择对象.换行插入代码是说明性的,不应该用于任何严重的事情,因为它涉及添加一个不间断的空间,以便将插入符号放在某处(尝试在<br>不起作用后直接放置它).撤消会删除插入的内容,但遗憾的是不会移动插入符号.

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