Question

I am working on a contenteditable div to make a simple RichText-Editor. One of the requirement I have is to be able insert html chunk at cursor postion on a button event.

I was able to get that part working fine by using range, selection, range.insertNode(nodeHTML) or range.pasteHTML(nodeHTML) based on browser. But I couldn’t get two things, which ideally I would like to have

1. To be Able to undo the inserted node, using browser’s undo. Somehow, browser ignores above actions.
2. To move the cursor at the end of inserted node. So that user can start writing after

I know I can use something out of many editors available, which does this very well, but If I get this I would not have to. Any help or even suggestions are welcome.

Thanks.

Answer 1

Answer rewritten August 2013

Unfortunately not, although things are improving. Programmatic DOM mutations other than those triggered by document.execCommand() do not go on the browser’s built-in undo stack. However, there have been two recent developments:

• IE 11 has new ms-beginUndoUnit and ms-endUndoUnit commands
• There is a spec in the works for an undo stack available to web developers, parts of which have been implemented in WebKit and Firefox (note: it’s disabled by default in Firefox and apparently also in WebKit).

Until the situation improves, you could use document.execCommand("InsertHTML", false, "<b>Some html</b>"); but this is not supported in IE.