CODEWITHSUNDEEP
javascriptcontenteditableundorich-text-editor
simplyharsh
simplyharsh

Reputation: 36373

Can a `range.insertNode` be undone using browser's undo, in a contenteditable div?

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.

Upvotes: 10

Views: 2580

Answers (1)

Tim Down
Tim Down

Reputation: 324567

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:

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

Upvotes: 13

Related Questions