2010-03-14 21 views
27

Utilizzo CKEditor nella mia app Web e non riesco a capire come ottenere i contenuti dell'editor con la formattazione HTML.Ottieni HTML formattato da CKEditor

var objEditor = CKEDITOR.instances["sectionTextArea"]; 
var q = objEditor.getData(); 

Questo mi porterà il testo inserito in CKEditor, senza alcun markup.

Tuttavia,

var q = objEditor.getHTML(); 

restituirà un valore nullo. Che cosa sto facendo di sbagliato?

risposta

20

getHTML non è un metodo di un oggetto CKEditor, quindi, invece di null, si dovrebbe avere un errore javascript.

Il metodo definito dall'API è getData() se ciò non funziona, allora hai qualche altro problema nel codice, prova a utilizzare un avviso per verificare i contenuti in quel momento.

+0

-1 per dare un cattivo consiglio ('[...], prova a usare un avviso per verificare i contenuti in quel momento.') – WoIIe

+1

Se vuoi dire che dovrebbero aver usato qualche console.log, avresti dovuto capire che il l'utente stava cercando di utilizzare un metodo non esistente, quindi se avesse guardato la console avrebbe visto l'errore. Invece di spiegargli tutti i dettagli su come eseguire il debug di javascript (e l'eventuale necessità di installare qualche add-on aggiuntivo o cambiare browser, ricorda che l'ha chiesto quattro anni fa), il metodo a prova di proiettile consiste nell'utilizzare un avviso che fornisce le informazioni e non c'è bisogno di spiegarlo ulteriormente. – AlfonsoML

+0

IMHO, l'uso di avvisi a scopo di debug è una pratica molto negativa e non dovrebbe essere consigliato a nessuno in modo avventato. (Poiché SO è una risorsa ben nota soprattutto per i principianti) – WoIIe

5

favore aggiorna config.js CKEditor con la seguente riga

config.fullPage = true; 

Ciò restituirà il codice HTML completo quando si richiede getData();

7

Per ottenere HTMLData da editore si dovrebbe usare il frammento di codice sotto:

var htmldata = CKEDITOR.instances.Editor.document.getBody().getHtml(); 

Se questa soluzione non funziona, controllare se si dispone BBCode i plugin installati.

+1

Grazie mille .. tu salva la mia giornata ... – Gowri

+2

il documento di eccezione non è corretto –

0

Per utenti di Java ...

Dopo aver premuto il pulsante di invio, la richiesta va con il metodo HTTP Post. Questa richiesta di posta contiene anche l'html formattato nel parametro chiamato usando l'attributo name della textarea.

Quindi, se il vostro textarea è qualcosa di simile ...

<form method="post" action="createPDF.do"> <textarea name="editor1" id="editor1"/>
<input type="submit"/> </form>

Poi, dopo aver premuto il pulsante di invio, è possibile ottenere il codice HTML formattata nella servlet/controllore:

String htmlContent = request.getParameter("editor1"); 

È anche possibile passare questa variabile contenente l'html formattato ('htmlContent') a ITEXT (o altri convertitori pdf) per creare il pdf ...

0

Mi rendo conto che questo è vecchio, ma ho avuto difficoltà a trovare una risposta che avesse senso e restituisse l'HTML effettivo, comprese le immagini. Se l'istanza del ckeditor è collegata a una textarea, puoi ottenere facilmente il valore della textarea per ottenere l'HTML.

Per esempio, se si sta utilizzando jQuery:

$('#my_editor').val() 

Non c'è bisogno di andare a scavare attraverso l'API.

+0

questo non funziona per me. senza modifiche sembra che non ci siano dati nella textarea, tutti i dati sono all'interno di iFrame. –

+0

Non so cosa dirti. Ho questo lavoro in produzione. Forse hai bisogno di usare il comando jquery per crearlo anche tu? '$ j ('# elemento'). ckeditor();' – UltimateBrent

16

solo per sapere che il metodo giusto per questo è getData() non mi ha aiutato. Non sapevo come usarlo sull'oggetto CKEditor. e CKEDITOR.getData() non funziona.

questo è come getData() viene utilizzato sull'oggetto CKEditor:

CKEDITOR.instances.my_editor.getData() 

... dove my_editor è l'ID del textarea utilizzato per CKEditor.

L'opposto di esso è setData():

CKEDITOR.instances.my_editor.setData("<p>My Text</p>"); 
+1

questo mi ha davvero salvato la giornata! grazie! – sulhadin

+0

@sulhadin siete i benvenuti! –

1

Sto usando il plugin di anteprima per ottenere il contenuto HTML completo, spero che aiuta.

CKEDITOR.getFullHTMLContent = function(editor){ 
 
\t var cnt = ""; 
 
\t editor.once('contentPreview', function(e){ 
 
\t \t cnt = e.data.dataValue; 
 
\t \t return false; 
 
\t }); 
 
\t editor.execCommand('preview'); 
 
\t 
 
\t return cnt; 
 
}

4

questo ha funzionato per me:

CKEDITOR.instances["id"].getData() 
-1

Prova questo:

CKEDITOR.instances.YOUREDITOR.element.getHtml(); 

con CKEDITOR.instances.YOUREDITOR.element si seleziona un elemento DOM e se usi CKEDITOR.instances.YOUREDITO R.element.getHtml(); puoi ottenere tutto l'html dall'elemento editor.

+0

Si prega di non aggiungere solo una riga. Spiega la tua risposta. –

+0

var editor = CKEDITOR.instances.YOUREDITOR; –

+0

scusa, quando si seleziona un editor, è possibile selezionare un elemento DOM –

0

Se si dispone di due CKEditor, è possibile utilizzare il codice sotto:

HTML

<textarea name="editor1"></textarea> 
<textarea name="editor2"></textarea> 

JS

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

var objEditor1 = CKEDITOR.instances["editor1"]; 
alert(objEditor1.getData()); // get html data 

var objEditor2 = CKEDITOR.instances["editor2"]; 
alert(objEditor2.getData()); // get html data 

Online Demo (jsfiddle)