2

我正在使用 ckeditor 4.0

我知道 getRanges() 方法，我提到了CKEditor: set cursor/caret positon

但我的情况是

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

2) 获取编辑器的数据

3）销毁编辑器并重新创建一个新的

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

5) 从步骤 1 中设置光标位置，然后插入所需的元素。

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

当用户切换选项卡时，另一个选项卡将被动画化（我已经展示了滑动过渡）。

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

这是我尝试过的：

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

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

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

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

4

1 回答 1

1

我没有处理范围，而是用占位符技巧解决了我的问题：

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);
}
于 2013-11-11T05:39:26.380 回答