Save cursor position after page reload in CKEditor

Question

I am using CKEditor (4.1) in my project. I would like to keep the cursor position in the editor after the user reloads the page. CKEditor provides

 var bookmark = editor.selection.createBookmarks(); 

to keep the cursor position. However, if I use

 var data = editor.getData() 

returns the following content

 <p>one</p> <p>two<span style="display:none">&nbsp;</span></p> <p>three</p> 

instead of the next

 <p>one</p> <p>two<span data-cke-bookmakrs="1" style="display:none">&nbsp;</span></p> <p>three</p> 

In config.js I did the following:

 config.extraAllowedContent = "span[data-cke-bookmark]" 

What am I missing here?

Thank you in advance for your answers and suggestions ...

Answer 1

I found a workaround to solve the problem. I will not say that this is a direct solution (I do not check IE)

Once I create the bookmark, it will return a JSON object as follows

 {collapsed: true, endNode: undefined, serializable: undefined, startNode: CKEDITOR.dom.element} 

And you can get the reference element

 var spanRef = object.startNode.$; 

And a custom attribute.

 $(spanRef).attr('data-selection-bookmark','1')//here value '1' doesn't mean anything 

And do the following in config.js

 config.extraAllowedContent = "span[data-selection-bookmark]" 

When you request the contents of an editor using editor.getData(), , it will return the following

 <p>one</p> <p>two<span data-selection-bookmakr="1" style="display:none">&nbsp;</span></p> <p>three</p> 

Next half (after reboot or rename)

 var editor = CKEDITOR.replace( 'editor_textarea'); editor.on( 'contentDom', function(){ var ifrWin = getIframeWindow(); //You need write a code to get iframe window of CKEditor var range = document.createRange(); var sel = ifrWin.getSelection(); var doc = editor.document.$; var $span = $( doc.body ).find( 'span[data-selection-bookmark]' ); range.selectNode( $span[ 0 ] );// To move the cursor before range.collapse(true); sel.addRange(range); $span.remove(); ifrWin.document.getElementsByTagName('body')[0].focus(); });