Get cursor position in CKEditor 4 within edited element's HTML

Question

I use inline CKEditor for editing elements on my page. So when I click into DIV with some class, CKEditor is attached to it and when it loses focus, editor instance is destroyed. I need to insert HTML element into that DIV after CKEditor instance is destroyed - to the last position of cursor before destroying editor instance. So I basicaly need to know index of cursor in edited element's HTML, as it would be taken as a plain text (for this example below it would be 25). I don't want to modify original data.

I have HTML in my DIV like this:
"some <span>text</span> wi|th <b>html</b> tags" (where "|" is cursor position)

I tried to get range and extend it to the start of editable element:

var range = editor.getSelection().getRanges()[ 0 ];    
range.collapse( true );
range.setStartAt( editor.editable(), CKEDITOR.POSITION_AFTER_START );

Here range.endOffset is 3 (the same as if I didn't extend range). But even if I sum up offsets of more elements, it wouldn't solve my problem, because it exclude HTML tags.

Answer 1

You won't be able to use ranges if you want to use them after the editor is destroyed, because while being destroyed the editor replaces editable's inner HTML with the data and they are not the same thing.

Instead, you should create a marker for the selection before the editor is destroyed and find this marker in the data.

See this topic for ideas how to achieve that: Retain cursor position after reloading the page in CKEditor.