Question

I know getting / setting cursor position in a contentEditable is damn near impossible. I don’t care about knowing this information. I need to be able to save current selection, modify innerHTML of the div, and then restore the selection.

I’ve bee experimenting with the answer provided at contenteditable selected text save and restore . It works after typing in the div, but not after programmatically modifying the innerHTML of the div. Instead, when I call restoreSelection, the caret simply goes to the beginning.

Any suggestions as to how to be able to save / restore selection on a contentEditable after modifying the innerHTML instead of typing would be much appreciated.

Answer 1

If you’re doing some kind of string substitution on the existing innerHTML of your editable element, you may be able to use my Rangy library and its save/restore selection module. It uses invisible elements with particular IDs to mark the start and end boundaries of the selection, so if your innerHTML change does not include these elements then this will not work.

Another alternative is to do it based purely on character indices within the text nodes of the element. I’ve written a naive implementation here: https://stackoverflow.com/q/5596688/96100