Verwenden von jQuery zum Abrufen des Inhalts aus CKEditors iframe

Question

Ich habe einen benutzerdefinierten CMS, der CKEditor * (FCKEditor v3) zum Bearbeiten von Inhalten verwendet. Ich verwende auch das jQuery Validation Plugin, um alle Felder auf Fehler vor der AJAX-basierten Einreichung zu überprüfen. Ich verwende die serialize() Funktion, um die Daten an das PHP-Backend zu übergeben.

Problem ist, Serialize verwaltet alle Felder korrekt zu erfassen, mit Ausnahme der tatsächlichen Inhalt in CKEditor eingegeben. Wie jeder andere WYSIWYG-Editor überlagert auch dieser einen Iframe über einer bestehenden Textbox. Und serialize ignoriert den iframe und schaut nur in den Textkasten nach Inhalten, die er natürlich nicht findet und somit einen leeren Inhaltskörper zurückgibt.

zu dieser Mein Ansatz ist es, einen Haken auf das Onchange Ereignis von CKEditor zu erstellen und gleichzeitig aktualisieren, um die Textbox (CKEDITOR.instances.[textboxname].getData() gibt den Inhalt) oder ein anderes verstecktes Feld mit allen im Editor vorgenommenen Änderungen.

Da CKEditor jedoch immer noch im Beta-Stadium ist und die Dokumentation stark fehlt, kann ich keinen passenden API-Aufruf finden, der es mir ermöglicht.

Hat jemand eine Idee, wie man das macht?

Answer 1

Dies sollte es tun ...

CKEDITOR.instances["editor1"].document.on('keydown', function(event) 
{ 
    CKEDITOR.tools.setTimeout(function() 
    { 
     $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0); 
}); 

CKEDITOR.instances["editor1"].document.on('paste', function(event) 
{ 
    CKEDITOR.tools.setTimeout(function() 
    { 
     $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0); 
}); 

edit: zu hinzugefügt Abschnitt Textbox nach Pasten zu aktualisieren, ...

Answer 2

Ich habe auch dieses Problem zu beheben heute versucht. Ich erkannte, dass der oben genannte Code für mich nicht funktioniert, weil die CKEditor-Instanz noch nicht bereit ist, wenn auf die Dokumenteigenschaft verwiesen wird. Sie müssen also das Ereignis "instanceReady" aufrufen und innerhalb dessen die Ereignisse des Dokuments verwendet werden können, da es zuvor nicht existiert.

Dieses Beispiel könnte für Sie arbeiten:

CKEDITOR.instances["editor1"].on("instanceReady", function() 
{ 
//set keyup event 
this.document.on("keyup", CK_jQ); 

//and paste event 
this.document.on("paste", CK_jQ); 
}); 

function CK_jQ() 
{ 

    CKEDITOR.tools.setTimeout(function() 
    { 
     $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0); 
} 

Answer 3

Ich habe die ganze Nacht versucht, diese Arbeit zu bekommen, aber es ist noch nicht zu arbeiten. Könnten Sie bitte erklären, wo Sie dieses Skript platziert haben?

Ich erzeuge meine Seite von einer xquery, also kann ich dieses Skript nicht in die Seite einfügen, weil es "{" enthält, was die xquery-Verarbeitung unterbricht. Wenn Sie das Skript in cdata einfügen, wird das Skript unterbrochen. Also habe ich den on instanceReady Listener in das selbe Skript eingefügt, das den Editor erstellt und ein externes Skript aufgerufen, um den Rest hinzuzufügen.zB:

<script type="text/javascript"> 
    var editor = CKEDITOR.replace('editor1'); 
    editor.on("instanceReady", updateInstance()) 
</script> 

dann updateInstance enthält:

function updateInstance() 
{ 
CKEDITOR.instances["editor1"].document.on('keydown', function(event) 
{ 
    CKEDITOR.tools.setTimeout(function() 
    { 
     $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0); 
}); 

CKEDITOR.instances["editor1"].document.on('paste', function(event) 
{ 
    CKEDITOR.tools.setTimeout(function() 
    { 
     $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0); 
}); 

} 

Answer 4

Ich habe gerade ein CKEditor-Plugin für jQuery freigesetzt, die sich um all dies im Hintergrund ohne zusätzlichen Code statt: http://www.fyneworks.com/jquery/CKEditor/

Answer 5

Ich nahm einen etwas anderen Ansatz Ich dachte, es wäre besser, ckeditors Update-Funktion zu verwenden, und seit Keyup verwendet wurde, wurde das Timeout nicht benötigt

CKEDITOR.instances["editor1"].on("instanceReady", function() 
{ 
//set keyup event 
this.document.on("keyup", CK_jQ); 

//and paste event 
this.document.on("paste", CK_jQ); 
} 

function CK_jQ() 
{ 
    CKEDITOR.instances.editor1.updateElement(); 
} 

Answer 6

Eine weitere allgemeine Lösung hierfür wäre folgend ausgeführt, wenn Sie versuchen, das Formular

for (instance in CKEDITOR.instances) 
      CKEDITOR.instances[instance].updateElement(); 

Diese

einreichen wird alle CKEditor Instanzen in Form zwingen, ihre jeweiligen Felder zu aktualisieren

Answer 7

Ich hatte mit diesem Erfolg:

console.log(CKEDITOR.instances.editor1.getData()); 

Answer 8

Wäre es nicht besser, dies zu tun, nur:

CKEDITOR.instances.editor1.on('contentDom', function() { 
      CKEDITOR.instances.editor1.document.on('keyup', function(event) {/*your instructions*/}); 
     }); 

ref: http://cksource.com/forums/viewtopic.php?f=11&t=18286

Answer 9

Das contentDom Ereignis für mich gearbeitet und nicht die instanceReady ... Ich würde wirklich das, was die Ereignisse ae wissen, wie, aber ich nehme an, sie sind Eigentum der Firma ...

var editor = CKEDITOR.replace('editor'); 

CKEDITOR.instances.editor.on("instanceReady", function(){ 
    this.on('contentDom', function() { 
     this.document.on('keydown', function(event) { 
      CKEDITOR.tools.setTimeout(function(){ 
       $(".seldiv").html(CKEDITOR.instances.editor.getData()); 
      }, 1); 
     }); 
    }); 
    this.on('contentDom', function() { 
     this.document.on('paste', function(event) { 
      CKEDITOR.tools.setTimeout(function(){ 
       $(".seldiv").html(CKEDITOR.instances.editor.getData()); 
      }, 1); 
     }); 
    }); 
    edits_clix(); 
    var td = setTimeout("ebuttons()", 1); 
}) 

Answer 10

CKEDITOR.instances.wc_content1.getData() werden die ckeditor Daten zurückgeben
CKEDITOR.instances.wc_content1.setData() werden die ckeditor Datensatz

Answer 11

ich denke, die Verwendung Ich fragte nach Serialisierung, ich hatte Probleme mit der Serialisierung eines Formulars, um es einzureichen, und es gab mir viele Probleme.

Dies ist, was für mich gearbeitet:

$(document).ready(function() { 
$('#form').submit(function(){ 
if (CKEDITOR.instances.editor1.getData() == ''){ 
    alert('There is no data available');//an alert just to check if its working 
}else{ 
    var editor_data = CKEDITOR.instances.editor1.getData(); 
    $("#editor1").val(editor_data); //at this point i give the value to the textarea 
    $.ajax({ 
        //do your ajax here 

        }); 

     } 
return false; 
    }); 
}); 

Answer 12

ich dieses Problem mit der aktuellen Version behoben: http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js

Nach Linie 55this.submit (function (event) { - i diesen Code hinzugefügt:

if (typeof CKEDITOR !== "undefined") { 
    for (instance in CKEDITOR.instances) 
     CKEDITOR.instances[instance].updateElement(); 
}