CKEditor freezes on jQuery UI Reorder

Question

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 perfectly 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>

Answer 1

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.

Answer 2

I came across this problem and fixed it with somewhat of 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 discovered that if you force the data back into the editor, it gets reloaded as though it weren't touched. The "ckedname" (or "CK Editor Name") was used so that the proper CKEditor instance was located. The assumption is that you have multiple editors on a single page that may have been dynamically placed. Of course, if you know the instance names of your editors, you can skip the first three lines in both the "start" and "stop" callback closures. (Note: my "textcontainer" is the div class that contains the CKEditor)

Answer 3

Well i have another solutions which is about putting the contents of the editor in a div before drag and then after it stops, put it back in editor. This way no need to instantiate the editor 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 the textara which is draggable inside the sortable and present inside .attribute_div attribute_val is the class name of hidden element which is used to store the content of editor.