Question

我正在使用ckeditor 4.0

我知道getRanges（）方法，我引用了CKEditor: set cursor/caret positon

但我的情景是

1）在编辑器中获取光标位置

2）获取编辑器的数据

3）销毁编辑器并再次创建新的

4）将保存的数据设置为新编辑器

5）从步骤1设置cusrsor位置，然后插入所需元素。

我有两个div作为选项卡（不是jquery选项卡），一个选项卡提供编辑器，另一个提供图像处理插件，它将处理后的图像传送给编辑器。

当用户切换标签时，另一个标签将被设置动画（我已经显示了滑动过渡）。

单击图像插件选项卡将破坏编辑器dusring动画，点击插入后将用户带到编辑器选项卡，然后将图像插入到新启动的编辑器中。

这就是我的尝试：

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

现在重新创建编辑器并恢复备份

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

现在我想恢复此编辑器的选择和范围，以便我可以在恢复的位置插入新的html

Answer 1

而不是处理Ranges我用占位符技巧解决了我的问题：

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

重新启动ckeditor后保存并恢复光标位置

1 个答案: