save and restore cursor position after reinit ckeditor

Question

I am using ckeditor 4.0

I know the getRanges() method ,i referred CKEditor: set cursor/caret positon

But my scenario is

1) Get cursor position in editor

2) Get data of editor

3) Destroy editor and again create new one

4) Set saved data to new editor

5) Set cusrsor position from step 1 and then insert required element.

I have two divs that works as Tabs(Not jquery tab), One tab caters editor and another caters image processing plugin which will deliver processed image to editor.

when user switches the tab, another tab will be animated(I have shown sliding transition).

click on image plugin tab will destroy editor dusring animation,after click on insert will take user to editor tab and then image will be inserted into newly initiated editor.

This is what I tried:

/* this is backup */
sel = editor.getSelection();
ranges = sel.getRanges();
editor_content = editor.getData();
editor.destroy();

Now recreate editor and restore the backup

 editor = CKEDITOR.replace("descr", {resize_enabled : false});

Now I want to restore selection and ranges to this editor,so that I can insert new html at restored position

I tried ,get ranges of selection-> store it to variable then set this saved range for newly created editor.but it was not working — Avinash Ware

Avinash Ware Avinash Ware · Accepted Answer · 2013-11-11T05:39:26

Instead of dealing with Ranges I Solved my problem with placeholder trick:

old_data = editor.getData();
/* now add         placeholder at cursor position*/
editor.insertHtml('<div id="my_placeholder" style="display:none;"></div>');
data_with_placeholder =  editor.getData();

editor.destroy(); 

/*now code before creating new instance of editor*/  
if(new_html_recieved){
      /*replace html over placeholder ->create new editor -> set data with newly inserted html  */

   $('body').append('<div id="processing_div"></div>');
   $('#processing_div').append(data_with_placeholder)
           .find('#my_placeholder')
           .replaceWith(new html);
  data_with_placeholder = $('#processing_div').html();  
  editor = CKEDITOR.replace("descr", {resize_enabled : false});
   editor.setData(data_with_placeholder); // here user will see html inserted at cursor position   
}else{
   editor.setData(old_data);
}

save and restore cursor position after reinit ckeditor

1 Answers