Question

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

$("#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”已附加到提供的元素]，显然可排序列表不再起作用。

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

我看到了这个例子：http://jsfiddle.net/RKPYw/但我只是无法理解为什么我会收到这个错误，为什么不能用这个可排序的列表为我工作。谁能帮助我理解？

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

感谢。

更新：过了一段时间我成功了，这是我的教程：CLICK HERE

Answer 1

当我们有相同的情景时，我们也面临同样的问题。在该用户拖拽编辑器类型元素页面上点击他能够输入文本。

我们发现CKeditor与物理DOM元素绑定，该元素已经存在于页面上，以便执行'$（document）.ready（）'函数而不是动态添加元素。

所以我们用contenteditable =“true”创建一个div并在document.ready中添加内联CKeditor函数，并在点击动态元素上隐藏元素并显示CKeditor Div与动态元素完全相同的宽度，高度。

然后用户输入一些文本并单击外部编辑器我们捕获CKeditor的focusout事件并在Ckeditor中获取内容并将其放入我们的动态元素中并隐藏Ckeditor div并显示我们的Element。

Answer 2

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

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

CKEDITOR内联动态创建元素（可放置/可排序）

2 个答案: