CKEditor se bloque lors de la réorganisation de l’interface utilisateur jQuery

Bien que ce ne soit pas idéal, j’ai trouvé une solution potentielle:

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

Cela a fonctionné pour moi, car il est acceptable que tous les éditeurs soient détruits et recréés lorsque vous faites glisser quelque chose. Il pourrait probablement être modifié pour ne supprimer que l'élément en train d'être déplacé.

Je suis tombé sur ce problème et je l’ai corrigé d’un coup.

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

En utilisant ces deux ensembles (sortable et ckeditor), j’ai découvert que si vous forcez les données à nouveau dans l’éditeur, elles seront rechargées comme si elles n’avaient pas été touchées. Le “ckedname” (ou “CK Editor Name”) a été utilisé pour localiser l’instance CKEditor appropriée. L’hypothèse est que vous avez plusieurs éditeurs sur une même page qui peuvent avoir été placés dynamicment. Bien sûr, si vous connaissez les noms d’instance de vos éditeurs, vous pouvez ignorer les trois premières lignes des fermetures de rappel “début” et “arrêt”. (Remarque: mon “textcontainer” est la classe div qui contient le CKEditor)

Eh bien, j’ai une autre solution qui consiste à mettre le contenu de l’éditeur dans un div avant de le glisser, puis de le remettre dans l’éditeur après qu’il s’arrête. De cette façon, pas besoin d’instancier l’éditeur après le sorting.

 $(function() { $( "#sortable" ).sortable({ start:function (event,ui) { //alert($('.atsortingbute_text',ui.item).val()) $('.atsortingbute_val',ui.item).html($('.atsortingbute_text',ui.item).val()).show(); $('.atsortingbute_div',ui.item).hide(); }, stop: function(event, ui) { $('.atsortingbute_val',ui.item).hide(); $('.atsortingbute_div',ui.item).show(); $('.atsortingbute_text',ui.item).val($('.atsortingbute_val',ui.item).html()); } }); $( "#sortable" ).disableSelection(); }); 

here atsortingbut_text est le nom de la classe étant donné le textara qui peut être déplacé à l’intérieur du sortable et présent à l’intérieur .atsortingbute_div atsortingbute_val est le nom de la classe de l’élément masqué utilisé pour stocker le contenu de l’éditeur.

J’ai eu le même problème, essayez d’appeler la fonction init de ckeditor après avoir terminé la procédure de réorganisation.

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

J’ai eu un problème similaire lors de l’utilisation de CKEditor et jQuery UI Sortable. Dans mon cas, si j’utilisais les deux en même temps, CKEditor ne répondrait plus du tout. La seule façon de rendre le

ligne éditable est de cliquer sur Ctrl + le

que je voudrais essayer d’éditer.

Pour faire fonctionner les deux, j’ai utilisé un qui contient une image de glisser en haut / en bas pour sortinger :

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