Search code examples
jqueryckeditorfckeditordynamic-forms

CKEditor freezes on jQuery UI Reorder


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>

Solution

  • 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.