web-dev-qa-db-fra.com

Obtenir du code HTML formaté à partir de CKEditor

J'utilise CKEditor dans mon application Web et je ne sais pas comment obtenir le contenu de l'éditeur avec le formatage HTML.

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

Cela me permettra d'obtenir le texte saisi dans CKEditor, sans aucune balise.

Cependant,

var q = objEditor.getHTML();

retournera une valeur nulle. Qu'est-ce que je fais mal?

javascripthtmlckeditor
29
sslepian

getHTML n'est pas une méthode d'objet CKEditor. Par conséquent, au lieu de null, vous devriez avoir une erreur javascript.

La méthode définie par l'api est getData () si cela ne fonctionne pas, vous avez un autre problème dans votre code. Essayez d'utiliser une alerte pour vérifier le contenu à ce moment.

23
AlfonsoML

juste pour savoir que la bonne méthode pour cela est getData() ne m'a pas aidé. Je ne savais pas comment l'utiliser sur l'objet CKEditor. et CKEDITOR.getData() ne fonctionne pas.

voici comment getData() est utilisé sur l'objet CKEDITOR:

CKEDITOR.instances.my_editor.getData()

... où my_editor est l'id de votre zone de texte utilisée pour CKEditor.

L'opposé est setData():

CKEDITOR.instances.my_editor.setData("<p>My Text</p>");
17
low_rents

Pour obtenir htmlData depuis l'éditeur, vous devez utiliser l'extrait de code ci-dessous:

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

Si cette solution ne fonctionne pas, vérifiez si vous avez désinstallé les plug-ins BBCode.

8
Tomasz Dzięcielewski

Veuillez mettre à jour ckeditor config.js avec la ligne suivante

config.fullPage = true;

Cela renverra le code HTML complet lorsque vous demanderez getData ();

6
MACMAN

Cela a fonctionné pour moi:

CKEDITOR.instances["id"].getData()
4
Flezcano

J'utilise le plug-in de prévisualisation pour obtenir le contenu HTML complet, j'espère que cela aidera.

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

1
Emanuele Disco

Je me rends compte que c’est vieux, mais j’ai eu du mal à trouver une réponse qui ait un sens et à retourner le code HTML réel, y compris les images. Si votre instance ckeditor est attachée à une zone de texte, vous pouvez simplement obtenir la valeur de la zone de texte pour obtenir le code HTML. 

Par exemple, si vous utilisez jQuery:

$('#my_editor').val()

Pas besoin d'aller creuser à travers l'API.

0
Brent

Si vous avez deux CKEditor, vous pouvez utiliser le code ci-dessous:

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

Démo en ligne (jsfiddle)

0
Ali Soltani

Pour les utilisateurs de Java ... 

Après avoir appuyé sur le bouton d'envoi, la demande est traitée par la méthode HTTP Post. Cette demande de publication contient également le code HTML formaté dans le paramètre nommé à l'aide de l'attribut name de la zone de texte.

Donc, si votre textarea est quelque chose comme ... 

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

Ensuite, après avoir appuyé sur le bouton d'envoi, vous pouvez obtenir le code HTML formaté dans votre servlet/contrôleur en: 

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

Vous pouvez également transmettre cette variable contenant le code HTML formaté ('htmlContent') à ITEXT (ou à un autre convertisseur de pdf) pour créer le pdf ...

0
Amarjeet Singh