CKEDITOR内联动态创建元素（可放置/可排序） [英] CKEDITOR inline on dynamic created element ( droppable/sortable )

问题描述

让我们以jquery为例： http://jqueryui.com/sortable/#connect-lists
当我将元素从右侧列表移动到左侧列表时，我希望有一个内联CKEditor用于克隆的已删除元素的文本。
以下是我的尝试：

Let's take this jquery example: http://jqueryui.com/sortable/#connect-lists When i'm moving elements from right list to left list i want to have an inline CKEditor for the text of the dropped element that is cloned. Here is what i tried:

$("#maincontent").droppable({
   drop: function(event, ui) {
        var blockId = ui.draggable.attr('block-id');
        ui.draggable.load(site_url+'/blocks/'+blockId+'.html');
        ui.draggable.attr('contenteditable','true');
        ui.draggable.css('width','100%');
        ui.draggable.css('height','auto');
        CKEDITOR.inline( ui.draggable.get( 0 ) );
   },
   over: function(event, ui) {}
});

我的问题是我收到此错误：[未捕获编辑器实例editor2已附加到提供的元素]显然，可排序列表不再起作用了。

My problem is that i get this error: [ Uncaught The editor instance "editor2" is already attached to the provided element ] and obviously the sortable list doesn't work anymore.

奇怪的是ckeditor确实适用于新的克隆元素。

The weird thing is that the ckeditor does work for that new cloned element.

我看到了这个例子： http://jsfiddle.net/RKPYw/但我只是不明白为什么我得到这个错误，为什么不能为我的可排序列表工作。
任何人都可以帮我理解吗？

I saw this example: http://jsfiddle.net/RKPYw/ but i just can't understand why i get this error and why isn't working for me with that sortable lists. Can anyone help me to understand ?

这是我的代码： jsfiddle.net/0wp1gy7c/5

谢谢。

更新：之后我设法做了一段时间，这是我的教程：点击这里

UPDATE: after a while i've managed to do it, here is my tutorial about it: CLICK HERE

推荐答案

我不是确定这是否是处理场景的最佳方法，但您可以在添加新场景之前销毁现有CKEditor实例。例如，

I'm not sure if this is the best way to handle the scenario but you could destroy existing CKEditor instances before adding new ones. E.g.,

removeCKEditor: function() {
    if (typeof CKEDITOR == 'undefined') return;
    for (var k in CKEDITOR.instances) {
        var instance = CKEDITOR.instances[k];
        instance.destroy();
    }
}

这篇关于CKEDITOR内联动态创建元素（可放置/可排序）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！