1

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

Drk_alien
  • 287
  • 6
  • 18
  • could u provide a fiddle mate..!!It could be really helpful – Nibin Jan 30 '15 at 03:49
  • Yep, fiddle would do. It's hard to understand what happens with the element before you try to initialize editor on it. – Reinmar Jan 30 '15 at 08:30
  • Hi guys...here is what i've made for you. This is the code i'm trying to use: http://jsfiddle.net/0wp1gy7c/5/ . You can see the error in console. If you comment the CKEditor line the sortable elements will work. Thanks for your help. – Drk_alien Jan 30 '15 at 12:00

2 Answers2

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.

Aamir
  • 345
  • 4
  • 24
  • It doesn't seems to be a nice way to solve this. I'm not sure why isn't working like this example: http://jsfiddle.net/RKPYw/ . It should be the same thing, right? – Drk_alien Jan 30 '15 at 16:10
  • thanks u @Drk_alien for example. i will check my code and try to implement like this and get back 2 u if i will find which is more helpful – Aamir Jan 30 '15 at 18:26
  • @Drk_alien its really helpful for me. i m going to change my code and implement it as u suggest – Aamir Mar 25 '15 at 10:53
1

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();
    }
}
David Silva
  • 981
  • 8
  • 11