Utilizzo di jQuery per prelevare il contenuto dall'iframe di CKEditor

Question

Ho un CMS personalizzato che utilizza CKEditor * (FCKEditor v3) per la modifica del contenuto. Sto anche usando il plugin jQuery Validation per controllare tutti i campi per errori prima dell'invio basato su AJAX. Sto usando la funzione serialize() per passare i dati al backend PHP.

Il problema è che serialize è in grado di acquisire tutti i campi correttamente, ad eccezione del contenuto effettivo digitato in CKEditor. Come ogni altro editor WYSIWYG, anche questo sovrascrive un iframe su una casella di testo esistente. E serializza ignora l'iframe e guarda solo nella casella di testo per il contenuto, che, naturalmente, non trova, restituendo così un corpo di contenuto vuoto.

Il mio approccio a questo è quello di creare un gancio sul caso onchange di CKEditor e contemporaneamente aggiornare la casella di testo (CKEDITOR.instances.[textboxname].getData() restituisce il contenuto) o qualche altro campo nascosto con le eventuali modifiche apportate nell'editor.

Tuttavia, poiché CKEditor è ancora in fase beta e manca di documentazione, non riesco a trovare una chiamata API adatta che mi consenta di farlo.

Qualcuno ha qualche idea su come andare su questo?

Answer 1

Questo dovrebbe farlo ...

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: Aggiunta la sezione alla aggiornare testo dopo paste, troppo ...

Answer 2

ho anche cercato di risolvere questo problema oggi. Mi sono reso conto che il motivo per cui il codice sopra non funziona per me è perché l'istanza di CKEditor non è ancora pronta quando viene fatta riferimento alla proprietà del documento. Quindi devi chiamare l'evento "instanceReady" e all'interno del quale è possibile utilizzare gli eventi del documento, perché prima non esisteva.

Questo esempio potrebbe funzionare per voi:

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

ho cercato tutta la notte per arrivare a questo lavoro, ma non è ancora lavorando. Potresti spiegare dove hai inserito questo script?

Sto generando la mia pagina da un xquery, quindi non posso inserire questo script nella pagina perché contiene "{" che interrompe l'elaborazione xquery. Mettere lo script in cdata interrompe lo script. Così ho inserito il listener instanceReady nello stesso script che sta creando l'editor e ho chiamato uno script esterno per aggiungere il resto.ad esempio:

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

poi updateInstance contiene:

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

Ho appena rilasciato un plugin per jQuery CKEditor, che si prenderà cura di tutto questo in background, senza alcun codice aggiuntivo: http://www.fyneworks.com/jquery/CKEditor/

Answer 5

Ho seguito un approccio leggermente diverso. Ho pensato che sarebbe stato meglio utilizzare la funzione di aggiornamento del ckeditor e poiché la chiave era in uso non era necessario il timeout

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

Un'altra soluzioni generiche a questo sarebbe per eseguire il seguente ogni volta che si tenta di inviare il modulo

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

Questo costringerà tutte le istanze CKEditor in forma di aggiornare i loro rispettivi campi

Answer 7

ho avuto successo con questo:

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

Answer 8

non sarebbe meglio fare proprio questo:

0.123.

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

L'evento contentDom funzionato per me e non l'instanceReady ... mi piacerebbe davvero sapere cosa gli eventi AE, ma suppongo che sono proprietari ...

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() restituirà i dati CKEditor
CKEDITOR.instances.wc_content1.setData() imposterà i dati CKEditor

Answer 11

credo l'uso Mi stavo chiedendo di serializzare, stavo lottando per serializzare un modulo da inviare e mi stava dando un sacco di problemi.

Questo è ciò che ha funzionato per me:

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

ho risolto questo problema con la versione corrente: http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js

Dopo linea 55this.submit (function (event) { - i ha aggiunto questo codice:

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