CKEditor friert auf jQuery UI ein Reorder

Question

Ich versuche, eine dynamisch erstellte Liste von CKEditors mit dem jQuery UI-Framework neu zu ordnen, aber ich habe ein Problem mit dem Editor freizugeben. Es funktionierte perfekt, als ich nur eine <textarea> benutzte, aber jetzt, nachdem die Drag-Aktion abgeschlossen ist, kann der Benutzer keinen Text mehr schreiben.

Dies ist der 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(); 
} 

Dies ist der 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> 

Answer 1

Obwohl nicht ideal, ich habe eine mögliche Lösung gefunden:

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

Das ist für mich gearbeitet, da es für alle Editoren akzeptabel ist zerstört werden und neu erstellt, wenn Sie etwas ziehen . Es könnte wahrscheinlich optimiert werden, um nur das Objekt zu entfernen, das gezogen wird.

Answer 2

i das gleiche Problem hatte, versuchen Sie die init-Funktion von ckeditor aufrufen, nachdem Sie die Neuordnungs Sache abgeschlossen.

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


createckeditor() 

}); 

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

Answer 3

Nun, ich habe eine andere Lösungen, die über den Inhalt des Editors in einem div vor dem Ziehen setzen und dann, nachdem es stoppt, legen Sie es zurück in Editor. Auf diese Weise muss der Editor nach dem Sortieren nicht instanziiert werden.

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

}); 

hier ist attribute_text der Klassenname der textara gegeben, die im Inneren ziehbar ist die sortierbar und im Inneren .attribute_div attribute_val der Name versteckt Elementklasse ist, die den Inhalt des Editors speichern verwendet wird.

Answer 4

ich auf dieses Problem kam und reparierte es mit so etwas wie ein Hack - hier geht:

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

Wenn diese beiden zusammen mit (sortierbar und ckeditor), entdeckte ich, dass, wenn Sie die Daten zurück zwingen, in die Editor, es wird neu geladen, als ob es nicht berührt wurde. Der "ckedname" (oder "CK Editor Name") wurde verwendet, so dass die richtige CKEditor-Instanz gefunden wurde. Die Annahme ist, dass Sie mehrere Editoren auf einer einzelnen Seite haben, die möglicherweise dynamisch platziert wurden. Wenn Sie die Instanznamen Ihrer Editoren kennen, können Sie natürlich die ersten drei Zeilen in den Callback-Schließungen "start" und "stop" überspringen. (Hinweis: mein "Textcontainer" ist die Div-Klasse, die den CKEditor enthält)

Answer 5

Ich hatte ein ähnliches Problem bei der Verwendung von CKEditor und jQuery UI Sortable. In meinem Fall würde CKEditor, wenn ich beide gleichzeitig verwende, nicht mehr reagieren. Die einzige Möglichkeit, die <div> inline bearbeitbar zu machen, war durch Klicken auf Steuerelement + die <div>, die ich versuchen würde zu bearbeiten.

Um beide Arbeit zu machen, ich a <span> that contains an up/down drag image to sort verwendet:

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

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