Obtener formato HTML a partir de CKEditor

Question

Estoy usando CKEditor en mi aplicación web, y estoy en una pérdida en cuanto a cómo obtener los contenidos del editor con el formato HTML.

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

Esto me va a obtener el texto introducido en CKEditor, sin ningún tipo de marcas.

Sin embargo,

var q = objEditor.getHTML();

devolverá un valor nulo. ¿Qué estoy haciendo mal?

Answer 1

getHTML no es un método de un objeto CKEditor, así que en vez de null que debe tener un error de JavaScript.

El método definido por la API es getData () si eso no funciona, entonces usted tiene algún otro problema en su código, trate de usar una alerta para verificar el contenido en ese momento.

Answer 2

acaba de saber que el método adecuado para esto es getData() no me ayuda. No sabía cómo usarlo en el objeto de CKEditor. y CKEDITOR.getData() no funciona.

así es como se utiliza en el objeto getData() CKeditor:

CKEDITOR.instances.my_editor.getData()

... donde my_editor es el ID de su área de texto utilizado para CKEditor.

Lo contrario de la que es setData():

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

Answer 3

Para obtener HTMLData del editor que debe utilizar el fragmento de código a continuación:

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

Si esta solución no funciona, compruebe si ha BBCode plugins no instalados.

Answer 4

Por favor, actualice config.js ckeditor con la siguiente línea

config.fullPage = true;

Esto devolverá el código HTML completo cuando solicita getData ();

Answer 5

Esto funcionó para mí:

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

Answer 6

Estoy usando el plugin de vista previa para obtener el contenido HTML completo, espero que ayude.

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

Answer 7

Para usuarios de Java ...

Después de pulsar el botón de envío, la solicitud pasa el método HTTP POST. Esta solicitud Post también contiene el formato HTML en el parámetro de nombre mediante el atributo de nombre del área de texto.

Por lo tanto, si su área de texto es algo así como ...

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

A continuación, después de pulsar el botón de enviar, se puede obtener el formato html en su servlet / controlador por:

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

También se puede pasar esta variable contiene el formato html ( 'htmlContent') a itext (o algunos otros convertidores pdf) para crear el pdf ...

Answer 8

Me doy cuenta de que esto es viejo, pero tenía problemas para encontrar una respuesta que tuviera sentido y devolvió el HTML real, incluyendo imágenes. Si la instancia CKEditor está unido a un área de texto, puede sencillo obtener el valor del área de texto para obtener el código HTML.

Por ejemplo, si estás usando jQuery:

$('#my_editor').val()

No hay necesidad de ir a cavar a través de la API.

Answer 9

Si tiene dos CKEditor , puede utilizar código de abajo:

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

Demostración en línea (jsFiddle)

Answer 10

Prueba esto:

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

con CKEDITOR.instances.YOUREDITOR.element selecciona un elemento DOM y si se utiliza CKEDITOR.instances.YOUREDITOR.element.getHtml (); se puede obtener toda html desde el elemento de editor.