CKEditor 在 jQuery UI 重新排序上冻结

Question

我正在尝试使用 jQuery UI 框架重新排序动态创建的 CKEditors 列表，但我遇到了编辑器释放问题。当我刚刚使用 </code> 时，它工作得很好，但现在，拖动操作完成后，它不允许用户编写任何文本。

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

这是 HTML 代码：

<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

尽管并不理想，但我找到了一个潜在的解决方案：

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

这对我有用，因为当您拖动某些内容时，所有编辑器都被销毁并重新创建是可以接受的。它可能会被调整为仅删除被拖动的项目。

Answer 2

我遇到了这个问题，并用某种破解方法修复了它 - 这里是：

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

当一起使用这两个（可排序和 ckeditor）时，我发现如果您将数据强制返回编辑器，它会重新加载，就好像它没有一样感动。使用“ckedname”（或“CK 编辑器名称”）以便找到正确的 CKEditor 实例。假设您在单个页面上有多个可能已动态放置的编辑器。当然，如果您知道编辑器的实例名称，则可以跳过“start”和“stop”回调闭包中的前三行。 （注意：我的“textcontainer”是包含CKEditor的div类）

Answer 3

好吧，我有另一个解决方案，即在拖动之前将编辑器的内容放入 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 的类名，它可以在可排序中拖动并存在于 .attribute_div 中
attribute_val是隐藏元素的类名，用于存储编辑器的内容。

Answer 4

我遇到了同样的问题，尝试在完成重新排序后调用 ckeditor 的 init 函数。

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


 createckeditor()

});

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

Answer 5

我在使用 CKEditor 和 jQuery UI Sortable 时遇到了类似的问题。就我而言，如果我同时使用两者，CKEditor 将完全没有响应。我可以使

内联编辑的唯一方法是单击 Control + 我要尝试编辑的

。

为了使这两项工作正常进行，我使用了 a < ;span> 包含要排序的向上/向下拖动图像：

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

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