CKEditor Freezes on jQuery UI Reorder

Question

Hi Everyone:

I am attempting to reorder a dynamically created list of CKEditors using the jQuery UI framework, but I am having an issue with the editor freeing. It worked perfectally when I was just using a <textarea>, but now, after the dragging action completes, it doesn't let the user write 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>

Thanks for any help!

Answer 1

i had the same problem, try calling the init function of ckeditor after you completed the reorder thing.

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

 for (i=0;i<10;i++)
 {
 createckeditor()
 }
});

function createckeditor() {
$(".editor").ckeditor();
}

Answer 2

Though not ideal, I have 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, since it is acceptable for all of the editors to be destroyed and re-created when you drag something. It could probably be tweaked to only remove the item being dragged.