CKEditor hangs on jQuery UI Reorder

Question

I am trying to reorder a dynamically created CKEditors list using the jQuery UI framework, but I am having a problem releasing the editor. It worked great when I just used <textarea> , but now, after the drag and drop action is complete, it prevents the user from writing any text.

This is the Javascript code:

 $(function() { $("#list").sortable({ placeholder: 'ui-state-highlight' }); $("#list").disableSelection(); for (i=0;i<10;i++) { addEditor(); } }); function addEditor() { alert("Hello"); var editor_fields = document.editors.elements["editor[]"]; var editorAmount = 0; if (editor_fields.length) { editorAmount = editor_fields.length; } else { editorAmount = 1; } var newElem = $('#editor_container' + editorAmount).clone().attr('id', 'editor_container' + (editorAmount + 1)); newElem.html("<textarea class='editor' name='editor[]' id='editor" + (editorAmount + 1) + "' rows='4' cols='30'></textarea>"); $("#editor_container" + editorAmount).after(newElem); $("#editor" + (editorAmount + 1)).ckeditor(); } 

This is the HTML code:

 <form name="editors"> <ul id="list"> <li name="editor_container1" id="editor_container1"><textarea name='editor[]' id='editor1' rows='4' cols='30'></textarea></li> </ul> </form> 

Answer 1

Although not ideal, I found a potential solution:

  $(function () { $("#list").sortable({ placeholder: 'ui-state-highlight', start: function () { $('.editor').each(function () { $(this).ckeditorGet().destroy(); }); }, stop: createckeditor() }); $("#list").disableSelection(); for (i = 0; i < 10; i++) { createckeditor() } }); function createckeditor() { $(".editor").ckeditor(); } 

This worked for me, as all editors can be destroyed and recreated when you drag and drop something. It can probably be modified to remove only the item that has been pulled out.

Answer 2

Well, I have another solution regarding placing the contents of the editor in a div before dragging and dropping, and then after stopping it, return it to the editor. Thus, there is no need to create an editor instance after sorting.

 $(function() { $( "#sortable" ).sortable({ start:function (event,ui) { //alert($('.attribute_text',ui.item).val()) $('.attribute_val',ui.item).html($('.attribute_text',ui.item).val()).show(); $('.attribute_div',ui.item).hide(); }, stop: function(event, ui) { $('.attribute_val',ui.item).hide(); $('.attribute_div',ui.item).show(); $('.attribute_text',ui.item).val($('.attribute_val',ui.item).html()); } }); $( "#sortable" ).disableSelection(); }); 

here attribute_text is the class name given by textara, which is dragged inside the sortable and is present inside .attribute_div attribute_val is the class name of the hidden element that is used to store the contents of the editor.

Answer 3

I ran into this problem and fixed it with a hack - here goes:

  var current_ck_text = ""; $("#editor-list").sortable({ start: function(event, ui){ var ckedname = $(ui.item).find(".textcontainer").find("span").attr("id"); var ckedname_arr = ckedname.split("_"); ckedname = ckedname_arr[1]; current_ck_text = CKEDITOR.instances[ckedname].getData(); }, stop: function(event, ui){ var ckedname = $(ui.item).find(".textcontainer").find("span").attr("id"); var ckedname_arr = ckedname.split("_"); ckedname = ckedname_arr[1]; CKEDITOR.instances[ckedname].setData(current_ck_text); } }); 

When using these two together (sortable and ckeditor), I found that if you force the data back into the editor, it will be reloaded as if it were not affected. "Ckedname" (or "CK Editor Name") was used so that the corresponding CKEditor instance was installed. It is assumed that you have several editors on the same page, which can be dynamically allocated. Of course, if you know the instance names of your editors, you can skip the first three lines in both the "start" and the "stopped" callback closures. (Note: my "textcontainer" is a div class containing CKEditor)

Answer 4

I had the same problem, try calling the init function from ckeditor after you performed this operation.

 $(function() { $("#list").sortable({ placeholder: 'ui-state-highlight', stop: createckeditor() }); $("#list").disableSelection(); createckeditor() }); function createckeditor() { $(".editor").ckeditor(); } 

Answer 5

I had a similar problem when using CKEditor and jQuery UI Sortable. In my case, if I used both at the same time, CKEditor would be completely immune. The only way to make <div> inline editable was by pressing Control + <div> , which I would try to edit.

To do both jobs, I used a <span> , which contains a drag and drop up / down image for sorting :

 <span class="handle">up down image</span> $( "#sortable" ).sortable({ handle: '.handle', })