CKEditor зависает в jQuery UI Reorder

Question

Я пытаюсь изменить порядок динамически создаваемого списка CKEditors, используя инфраструктуру пользовательского интерфейса jQuery, но у меня проблема с освобождением редактора.Он отлично работал, когда я просто использовал <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>

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 Editor Name») было использовано для того, чтобы был найден правильный экземпляр CKEditor. Предполагается, что у вас есть несколько редакторов на одной странице, которые могут быть динамически размещены. Конечно, если вы знаете имена экземпляров ваших редакторов, вы можете пропустить первые три строки в замыканиях обратного вызова «start» и «stop». (Примечание: мой «textcontainer» - это класс div, содержащий CKEditor)

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 - это имя класса, заданное текстурой, которая перетаскивается внутри сортируемой и присутствует внутри .attribute_div attribute_val - это имя класса скрытого элемента, который используется для хранения содержимого редактора.

Answer 4

У меня была похожая проблема при использовании CKEditor и jQuery UI Sortable. В моем случае, если бы я использовал оба одновременно, CKEditor был бы полностью безразличным. Единственный способ сделать встроенный редактируемый файл <div> - это щелкнуть Control + <div>, который я попытаюсь отредактировать.

Чтобы заставить оба работать, я использовал a <span>, который содержит изображение перетаскивания вверх / вниз для сортировки :

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

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

Answer 5

У меня возникла та же проблема, попробуйте вызвать функцию инициализации ckeditor после того, как вы выполнили переупорядочивание

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


 createckeditor()

});

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