internet explorer alternative to document.execCommand("insertText",...), for text insertion that can be undone/redone by the user

Question

When the user edits a contenteditable div, and press some keys, I would like to override the default behavior. For instance, I want to insert a normal line break when the user press ENTER. I do that using document.execCommand("insertText",...)

This is the only way I have found so far to make this action undoable and redoable by the user.

<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>

This code works well on chrome and firefox. But, ie does not support "inserttext". Would there be a way to insert text with ie, such that the user can undo it?

Abecedarian

WHich versions of IE do you care about? IE 11 has start/end-undoable-action commands but previous versions do not. – Dimitry

@TimDown, any improvement compared to my current situation is welcomed :) Of course, it is better if it works also for old versions ie, but ie11 is better than nothing. – Abecedarian

@TimDown, please post your answer. It would be very helpful. – Abecedarian

I tried and failed. Inserting a line break is hard with DOM ranges and selections; you can do it more easily in IE using its legacy selection and TextRange objects but IE 11 removed document.selection, IE's legacy selection object, which makes it difficult. Also, after coding a nasty workaround, undo didn't work anyway. Here's the work I did: jsfiddle.net/E7sBD/2 – Dimitry

Here's another attempt. The line break insertion is terrible and involves adding a non-breaking space to give the caret somewhere to go (trying to place it directly after the <br> does not work). Undoing sort of works but doesn't move the caret. jsfiddle.net/E7sBD/4 – Dimitry

Thanks that is very helpful, I did not know about "ms-beginUndoUnit". If it was moving the caret, it would be perfect. – Abecedarian

Answer 1

IE 11 has new ms-beginUndoUnit and ms-endUndoUnit commands.

I tried and failed to create a working solution for IE 11 using these. Inserting a line break is hard with DOM ranges and selections; you can do it more easily in IE using its legacy document.selection and TextRange objects but unfortunately IE 11 removed document.selection (but not TextRange, strangely) which makes it difficult. After coding a nasty workaround to create a TextRange from the selection, undo didn't work anyway. Here's what I did:

http://jsfiddle.net/E7sBD/2

I decided to have another go using DOM Range and selection objects. The line break insertion code is illustrative and shouldn't be used for anything serious because it involves adding a non-breaking space to give the caret somewhere to go (trying to place it directly after the <br> does not work). Undoing does remove the inserted content but unfortunately doesn't move the caret.

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

Dimitry

Answer 2

You can always go the simpler and more stable way to catch the change event on the input div and change the last char from the input string to your liking.

http://api.jquery.com/change is invented i think for that purpose :)

Change your angel and you see a whole new world :3

Daukas

I have tried this method. But when I do Ctrl+Z, it does not work anymore. – Abecedarian