javascript - Set Selection Start and End in a Contentedible -

i attempting create javascript editor web page employs syntax-based formatting. replaces innerhtml of <pre> tag using onkeyup. however, results in caret being moved beginning of editor.

solution can find offset of selection start , end before changes made, set these @ end. code getting selection start , end modified https://stackoverflow.com/a/4812022/2093695:

var selstart, selend; if (typeof window.getselection != "undefined") {     var range = window.getselection().getrangeat(0);     var precaretrange = range.clonerange();     precaretrange.selectnodecontents(editor);     precaretrange.setend(range.endcontainer, range.endoffset);     selstart = precaretrange.tostring().length;     selend = selstart + range.tostring().length; } else if (typeof document.selection != "undefined" && document.selection.type != "control") {     var textrange = document.selection.createrange();     var precarettextrange = document.body.createtextrange();     precarettextrange.movetoelementtext(editor);     precarettextrange.setendpoint("endtoend", textrange);     selstart = precarettextrange.text.length;     selend = selstart + textrange.text.length; } else selstart = 0; 

that part works fine, in firefox, @ least. problem setting selection. have far follows:

// restore selection if (selstart) {     if (range) {         range = window.getselection().getrangeat(0);         range.setstart(editor,selstart);         range.setend(editor,selend);         // doesn't work, in ff @ least         // behavior: when there no tags,         //     0, caret set @ beginning         //     1, caret set @ end         //     greater, "indexsizeerror: index or size negative or greater allowed amount"         // when editor contains tags,         //     0, caret set @ beginning of editor         //     1, caret set @ beginning of first tag (unless same start of editor)         //     2, caret set @ end of first tag         //     3, caret set @ beginning of second tag         //     4, caret set @ end of second tag, , on         //     number 1 greater whatever number set caret @ end of last tag, caret set @ end of editor         //     number greater that, same error before     } else if (document.selection && document.selection.createrange) {         // not sure here     } } 

is how setstart , setend supposed work? doing wrong? there better way set selection start , end, preferably without using library?

i've posted couple of different functions this. can't find recent 1 following has link jsfiddle containing restoreselection() function should helpful:

https://stackoverflow.com/a/7404126/96100

update: i've found more recent version of code. should work same internals bit more elegant.

https://stackoverflow.com/a/13950376/96100