CKEditor在jQuery UI重新排序时冻结

我试图使用jQueryUI框架对动态创建的CKeditor列表进行重新排序，但在释放编辑器时遇到了问题。当我刚刚使用

时，它工作得非常好，但是现在，在拖动操作完成后，它不允许用户编写任何文本

这是Javascript代码：

$(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();
}

$（函数（）{
$（“#列表”）。可排序({
占位符：“ui状态突出显示”
});
$（“#列表”）.disableSelection（）；
对于（i=0；i我也有同样的问题，请在完成重新排序后尝试调用ckeditor的init函数

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


 createckeditor()

});

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

虽然不理想，但我找到了一个潜在的解决方案：

 $(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();
    }

$（函数（）{
$（“#列表”）。可排序({
占位符：“ui状态突出显示”，
开始：函数（）{
$（'.editor'）。每个（函数（）{
$（this.ckeditorGet（）.destroy（）；
});
},
停止：createckeditor（）
});
$（“#列表”）.disableSelection（）；
对于（i=0；i<10；i++）{
createckeditor（）
}
});
函数createckeditor（）{
$（“.editor”）.ckeditor（）；
}

这对我来说很有效，因为当你拖动某个东西时，所有编辑器都可以被销毁并重新创建。它可能会被调整为只删除被拖动的项目。
我还有另一个解决方案，就是在拖动之前将编辑器的内容放在div中，然后在拖动停止之后，将其放回编辑器中。
这种方法不需要在排序后实例化编辑器

$(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();

});

这里attribute_text是给定textara的类名，该textara可在可排序表中拖动并显示在.attribute_div中
attribute_val是用于存储编辑器内容的隐藏元素的类名。
我遇到了这个问题，并用一些技巧解决了它-如下所示：

        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);
            }
        });

当同时使用这两个工具（sortable和ckeditor）时，我发现如果将数据强制返回到编辑器中，它会被重新加载，就像它没有被触动一样已使用，以便找到正确的CKEditor实例。假设您在一个页面上有多个编辑器，这些编辑器可能已被动态放置。当然，如果您知道编辑器的实例名称，您可以跳过“开始”和“停止”回调闭包中的前三行。（注意：我的“textcontainer”是包含CKEditor的div类）
在使用CKEditor和jQuery UI Sortable时，我遇到了类似的问题。在我的情况下，如果同时使用两者，CKEditor将完全没有响应。唯一可以使
内联可编辑的方法是单击Control+我将尝试编辑的

为了使这两种方法都有效，我使用了：

上下图像
$（“#可排序”）。可排序({
句柄：'.handle'，
})
尝试将类编辑器添加到所有文本区域（class='editor'）。我编辑了这篇文章，我认为在for I循环中调用createckeditor（）是非常无用的，因为createckeditor（）将在一次调用中启动所有现有的.editor类。。。
        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);
            }
        });

<span class="handle">up down image</span>

$( "#sortable" ).sortable({
    handle: '.handle',
})