CKEditor se congela en jQuery UI Reordenar

Question

Estoy intentando reordenar una lista creada dinámicamente de CKEditors utilizando el framework jQuery UI, pero estoy teniendo un problema con la liberación del editor. Funcionó perfectamente cuando solo estaba usando un <textarea>, pero ahora, una vez que se completa la acción de arrastre, no permite al usuario escribir ningún texto.

Este es el código 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(); 
} 

Este es el código 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

Aunque no es ideal, he encontrado una posible solución:

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

Esto funcionó para mí, ya que es aceptable para todos los editores a ser destruido y vuelto a crear cuando se arrastra algo . Probablemente podría modificarse para eliminar solo el elemento que se está arrastrando.

Answer 2

que tenía el mismo problema, intente llamar a la función init de CKEditor después de que completó la cosa de reordenación.

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


createckeditor() 

}); 

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

Answer 3

Bueno, tengo otras soluciones que se trata de poner los contenidos del editor en un div antes de arrastrar y luego, una vez que se detiene, ponerlo de nuevo en el editor. De esta manera, no es necesario crear una instancia del editor después de la clasificación.

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

}); 

aquí attribute_text es el nombre de la clase dada la textara que es posible arrastrar dentro de la ordenable y presente en el interior .attribute_div attribute_val es el nombre de la clase de elemento oculto que se utiliza para almacenar el contenido del editor.

Answer 4

me encontré con este problema y se fija con un poco de un truco - aquí va:

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

Al utilizar estos dos juntos (ordenable y CKEditor), descubrí que si se fuerza a los datos de nuevo en el editor, se vuelve a cargar como si no se hubiera tocado. El "ckedname" (o "CK Editor Name") se usó para ubicar la instancia correcta de CKEditor. La suposición es que tiene varios editores en una sola página que pueden haberse colocado dinámicamente. Por supuesto, si conoce los nombres de instancia de sus editores, puede omitir las tres primeras líneas en los cierres de devolución de llamada tanto "inicio" como "detener". (Nota: mi "contenedor de texto" es la clase div que contiene el CKEditor)

Answer 5

Tuve un problema similar al usar CKEditor y jQuery UI ordenables. En mi caso, si estuviera usando ambos al mismo tiempo, CKEditor no respondería por completo. La única forma en que podía hacer el <div> en línea editable era haciendo clic en Control + el <div> que intentaría editar.

Para hacer tanto trabajo, solía a <span> that contains an up/down drag image to sort:

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

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