CKEDITOR inline on dynamic created element ( droppable/sortable )

Question

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

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.

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

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 ?

HERE is my code: jsfiddle.net/0wp1gy7c/5

Thanks.

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

Answer 1

we are also facing same issue when we have same scenario. In that user drag drop editor type element on page on clicking that he is able to enter text.

we find that CKeditor is bind with physical DOM element which is already present on page at time to execute '$(document).ready()' function not with dynamically added element.

So we are create one div with contenteditable="true" and add inline CKeditor function in document.ready, and on click dynamic element we hide the element and show CKeditor Div exactly same width, height over dynamic element.

Then user enter some text and click outside editor we catch focusout event of CKeditor and take content inside Ckeditor and put it in our dynamic element and hide Ckeditor div and show our Element.

Answer 2

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