Get cursor position in CKEditor 4 in an edited HTML element

Question

I use the built-in CKEditor to edit elements on my page. Therefore, when I click on the DIV with some class, CKEditor joins it, and when it loses focus, the editor instance is destroyed. I need to insert an HTML element into this DIV after destroying the CKEditor instance - to the last cursor position before destroying the editor instance. Therefore, I need to know the cursor index in the edited HTML HTML element, because it will be perceived as plain text (for this example, this will be 25). I do not want to change the source data.

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

I tried to get the range and expand it to the beginning of the element being edited:

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

Here range.endOffset is 3 (same as if I hadn't expanded the range). But even if I summarize the offsets of more elements, this will not solve my problem, because it excludes HTML tags.

Answer 1

You cannot use ranges if you want to use them after destroying the editor, because when destroying, the editor replaces the editable internal HTML with data, and they are not the same.

Instead, you should create a marker for selection before destroying the editor and find that marker in the data.

See this topic for ideas on how to achieve this: Keep cursor position after page reload in CKEditor .