6

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

这是 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>
4

5 回答 5

4

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

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

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

于 2010-08-25T18:06:27.473 回答
2

好吧，我有另一种解决方案，即在拖动之前将编辑器的内容放在一个 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_div attribute_val是隐藏元素的类名，用于存储编辑器的内容。

于 2011-02-24T10:39:49.203 回答
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 Editor Name”）以便找到正确的 CKEditor 实例。假设您在一个页面上有多个编辑器，这些编辑器可能是动态放置的。当然，如果您知道编辑器的实例名称，则可以跳过“start”和“stop”回调闭包中的前三行。（注意：我的“textcontainer”是包含 CKEditor 的 div 类）

于 2011-04-11T05:57:23.203 回答
0

我在使用 CKEditor 和 jQuery UI Sortable 时遇到了类似的问题。就我而言，如果我同时使用两者，CKEditor 将完全没有响应。我可以使<div>内联可编辑的唯一方法是单击我将尝试编辑的Control+ 。<div>

为了使这两项工作，我使用了一个<span>包含向上/向下拖动图像的排序：

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

$( "#sortable" ).sortable({
    handle: '.handle',
})
于 2014-10-19T17:48:23.867 回答
0

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

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


 createckeditor()

});

function createckeditor() {
$(".editor").ckeditor();
}
于 2010-07-31T20:36:04.953 回答