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?

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?

• javascript
• internet-explorer
• contenteditable
• undo-redo

• WHich versions of IE do you care about? IE 11 has start/end-undoable-action mands but previous versions do not. – Tim Down Commented Nov 22, 2013 at 11:19
• @TimDown, any improvement pared to my current situation is weled :) Of course, it is better if it works also for old versions ie, but ie11 is better than nothing. – Oli Commented Nov 22, 2013 at 12:22
• @TimDown, please post your answer. It would be very helpful. – Oli Commented Nov 24, 2013 at 6:45
• 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/E7sBD/2 – Tim Down Commented Nov 27, 2013 at 13:07
• 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/E7sBD/4 – Tim Down Commented Nov 27, 2013 at 13:14

2 Answers 2

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

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/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/E7sBD/4/

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./change is invented i think for that purpose :)

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