CKEditor 4 und jQuery UI sortierbar entfernt Inhalt nach dem Sortieren

Ich habe ein Problem mit sortierbaren Methode CKEditor 4 und jQuery UI, wo, wenn ich einen Container, der eine CKEditor-Instanz hat, sortiert, entfernt den Wert und löst den Fehler "Uncaught TypeError: Die Methode 'getSelection' von undefined kann nicht aufgerufen werden. Es macht auch den Editor nicht editierbar. Ich konnte das in CKEditor 3 mit einem der folgenden Hacks umgehen: CKEditor freezes on jQuery UI Reorder CKEditor 4 und jQuery UI sortierbar entfernt Inhalt nach dem Sortieren

Mit Blick auf den Chrome DOM Inspektor scheint es, dass der Inhalt des Iframe entfernt wird.

Unten finden rohen Testcode:

 

    <html> 
    <head> 
     <title>test</title> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script> 
     <script src="ckeditor.js"></script> 
     <script type="text/javascript"> 
     $(function(){ 

      var tmpStore = {}; 
      $('#sortable').sortable({ 
       cursor: 'move', 

       // Hack that use to work on V3 but not on V4: 
       // https://stackoverflow.com/questions/3379653/ckeditor-freezes-on-jquery-ui-reorder 
       start:function (event,ui) { 
        $('textarea').each(function(){ 
         var id = $(this).attr('id'); 
         tmpStore[id] = CKEDITOR.instances[id].getData(); 
        }) 
       }, 
       stop: function(event, ui) { 
        $('textarea').each(function(){ 
         var id = $(this).attr('id'); 
         CKEDITOR.instances[id].setData(tmpStore[id]); 
        }) 
        } 
      }); 
      $('textarea').each(function(){ 
       var ckId = $(this).attr('id'); 
       config = {}; 
       CKEDITOR.replace(ckId, config); 
      }) 
     }) 

     
     
     li { padding: 10px; width: 800px; height: 300px; } 
     
    </head> 
    <body> 
     <ul id="sortable"> 
      <li><textarea id="test1" name="test1">test1</textarea></li> 
      <li><textarea id="test2" name="test1">test2</textarea></li> 
      <li><textarea id="test3" name="test1">test3</textarea></li> 
     </ul> 
    </body> 
    </html>

Quelle

2013-02-27 DMC

Bekommen Sie die Lösung? –

Sie müssen neu erstellen CKEditor einmal zugrunde liegenden DOM-Struktur geändert wird. Speichern Sie die Editordaten mit editor.getData() vor editor.destroy() und stellen Sie den Inhalt mit editor.setData(data) wieder her, sobald Sie eine neue Instanz erstellen. Es gibt keine andere Möglichkeit, dies zu beheben, da CKEditor stark von der DOM-Struktur abhängt.

Quelle

2013-02-28 12:17:46 oleq

Die Verwendung von destroy() und das erneute Erstellen der Instanzen schienen den Trick zu leisten. – DMC

Gibt es eine einfache Möglichkeit, Daten rückgängig zu machen/wiederherzustellen? – Taylan

-1

Ich verwende einfach die Funktionen ckeditorOff() und ckeditorOn(), um Daten zu behalten und Instanzen von ckeditor während der Bewegung zu re-deinstanzen.

$('#sortable').sortable({ 
    cursor: 'move', 
    start:function (event,ui) { 
     if(typeof ckeditorOff=='function')ckeditorOff(); 
    }, 
    stop: function(event, ui) { 
     if(typeof ckeditorOn=='function')ckeditorOn(); 
    } 
});

Ich lege die typeof ckeditorOff Aussage des Code kompatibel mit zukünftigen Versionen von ckeditor, falls sie diese beiden Funktionen entfernen entscheiden zu machen.

Quelle

2013-06-15 12:42:59 mAsT3RpEE

Gibt es spezifische "ckeditorOff" und "ckeditorOn" Funktionen, die CKEditor bietet? – DMC

Nein, ich habe den Code einfach so eingefügt, wie er ist. Ich denke ckeditorOff und On sind globale Befehle. Ich sehe sie nicht in naher Zukunft entfernen. – mAsT3RpEE

Was ist das für eine Antwort? Stellen Sie diese Funktionen zur Verfügung ... – coorasse

i gelöst habe diese Art von Problem, das durch die CKEditor Instanziieren nach Dialog, um die jquery geöffnet zu haben

Quelle

2014-02-26 09:33:18

Der folgende Code funktioniert für mich, wir haben den Editor beim Start zu zerstören und neu erstellen, wenn die Schlepp beendet wird immer die Wert der Textarea, die die Daten kommen aus:

jQuery(function($) 
{ 
    var panelList = $("#nameofyourdiv"); 
    panelList.sortable(
    { 
     handle: ".classofyourdivforsorting", 
     start: function (event, ui) 
     { 
      var id_textarea = ui.item.find("textarea").attr("id"); 
      CKEDITOR.instances[id_textarea].destroy(); 
     } 
     stop: function (event, ui) 
     { 
      var id_textarea = ui.item.find("textarea").attr("id"); 
      CKEDITOR.replace(id_textarea); 
     }   
    }); 
});

Ich hoffe, es hilft jemandem.

Quelle

2015-02-11 07:42:21 Vindic

Ich hatte das ähnliche Problem mit CKEDITOR, der Code unten arbeitete für mich. Zerstören Sie die CKEditor-Instanz und entfernt das CKEditor und wenn das Ziehen beendet das aktuelle Textfeld mit CKEditor wieder

$("#sortable").sortable({ 
     items: '.dynamic', 
     start: function (event , ui) { 

       var editorId = $(ui.item).find('.ckeditor').attr('id');// get the id of your Ckeditor 
       editorInstance = CKEDITOR.instances[editorId]; // Get the Ckeditor Instance 
       editorInstance.destroy(); // Destroy it 
       CKEDITOR.remove(editorId);// Remove it 

     }, 
     stop: function(event, ui) { 
       var editorId = $(ui.item).find('.ckeditor').attr('id');// Get the Id of your Ckeditor 
       CKEDITOR.replace(editorId);// Replace it 
      } 
     } 

    }); 
    $("#sortable").disableSelection();

Hier #sortable ist die id des DIV ersetzen, die sortierbar und ‘ist .Dynamisches ' ist die dem DIV zugewiesene Klasse, die zum Sortieren berechtigt ist. ' .ckeditor ' ist die Klasse für das Textfeld.

Ich habe meine Lösung von Here, hoffe das hilft für jemanden in der Zukunft.

Quelle

2015-05-22 10:38:11 Joker

Ich hatte das gleiche Problem und habe auf der Grundlage der Antworten hier behoben.Bitte beachten Sie Geigen unter

PROBLEM: https://jsfiddle.net/33qt24L9/1/

$(function() { 
     $("#sortable").sortable({ 
     placeholder: "ui-state-highlight" 
    }); 

     CKEDITOR.replace('editor1'); 
     CKEDITOR.replace('editor2'); 
     CKEDITOR.replace('editor3'); 
     CKEDITOR.replace('editor4'); 

    });

RESOLVED PROBLEM: https://jsfiddle.net/57djq2bh/2/

$(function() { 
     $("#sortable").sortable({ 
     placeholder: "ui-state-highlight", 

      start: function (event, ui) 
     { 
      var id_textarea = ui.item.find(".ckeditor").attr("id"); 
      CKEDITOR.instances[id_textarea].destroy(); 
     }, 
     stop: function (event, ui) 
     { 
      var id_textarea = ui.item.find(".ckeditor").attr("id"); 
      CKEDITOR.replace(id_textarea); 
     }   

    }); 

     CKEDITOR.replace('editor1'); 
     CKEDITOR.replace('editor2'); 
     CKEDITOR.replace('editor3'); 
     CKEDITOR.replace('editor4'); 

    });

EDIT: Wenn Sie wie ich Sie hatte seperate configs pro Editor hier aktualisierten Code, wird helfen:

start: function (event, ui) 
     { 
      $('.wysiwyg', ui.item).each(function(){ 
       var tagId = $(this).attr('id'); 
       var ckeClone = $(this).next('.cke').clone().addClass('cloned'); 
       ckeConfigs[tagId] = CKEDITOR.instances[tagId].config; 
       CKEDITOR.instances[tagId].destroy(); 
       $(this).hide().after(ckeClone); 
      }); 
     }, 

     stop: function(event, ui) { 
      // for each textarea init ckeditor anew and remove the clone 
      $('.wysiwyg', ui.item).each(function(){ 
       var tagId = $(this).attr('id'); 
       CKEDITOR.replace(tagId, ckeConfigs[tagId]); 
       $(this).next('.cloned').remove(); 
      }); 
     }

Dank: https://github.com/trsteel88/TrsteelCkeditorBundle/issues/53

Quelle

2015-07-30 12:59:36

CKEditor 4 und jQuery UI sortierbar entfernt Inhalt nach dem Sortieren

Antwort

Verwandte Themen