CODEWITHSUNDEEP
javascriptckeditor
Kirubachari
Kirubachari

Reputation: 688

Retain cursor position after reloading the page in CKEditor

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

var bookmark = editor.selection.createBookmarks();

to store 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 following

<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 thing

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

What am i missing here?

Thanks in advance for your answers and suggestions...

Upvotes: 4

Views: 3138

Answers (1)

Kirubachari
Kirubachari

Reputation: 688

I found a workaround to resolve the problem. I won't say this is a direct solution.(I haven't check for IE)

Once I create bookmark, It will return JSON object as follows

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

And you can get the reference element by 

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 thing in config.js

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

When you ask the editor content by 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>

The Next Half ( After Reload or Reinit)

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();
});

Upvotes: 3

Related Questions