Get formatted HTML from CKEditor

I'm using CKEditor in my web app, and I'm at a loss as to how to get the contents of the editor with HTML formatting.

var objEditor = CKEDITOR.instances["sectionTextArea"];
var q = objEditor.getD开发者_StackOverflowata();

This will get me the text entered in CKEditor, without any markup.

However,

var q = objEditor.getHTML();

will return a null value. What am I doing wrong?

getHTML isn't a method of a CKEditor object, so instead of null you should have a javascript error.

The method defined by the api is getData() if that doesn't work then you have some other problem in your code, try to use an alert to verify the contents at that moment.

just to know that the right method for this is getData() didn't help me. I did not know how to use it on the CKEditor object. and CKEDITOR.getData() doesn't work.

this is how getData() is used on the CKEDITOR object:

CKEDITOR.instances.my_editor.getData()

...where my_editor is the id of your textarea used for CKEditor.

The opposite of it is setData():

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

To get htmlData from editor you should use the code snippet bellow:

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

If this solution won't work, check if you have BBCode plugins uninstalled.

Please update ckeditor config.js with the following line

config.fullPage = true;

This will return the full html when you request getData();

This worked for me:

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

I am using the preview plugin to get the full HTML content, hope it helps.

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

in ckeditor 5, you can get the html data with editor.getData()

here is an example:

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log(editor.getData());
    } )
    .catch( error => {
        console.error( error );
    } );

For Java Users...

After pressing the submit button, the request goes by HTTP Post method. This Post request also contains the formatted html in the parameter named using the name attribute of the textarea.

So, if your textarea is something like...

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

Then, after pressing the submit button, you can get the formatted html in your servlet/controller by :

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

You can also pass this variable containing the formatted html ('htmlContent') to ITEXT (or some other pdf converters) to create the pdf...

I realize this is old, but I had trouble finding an answer that made sense and returned the actual HTML, including images. If your ckeditor instance is attached to a textarea, you can simple get the value of the textarea to get the HTML.

For instance, if you're using jQuery:

$('#my_editor').val()

No need to go digging through the API.

If you have two CKEditor, you can use code bellow:

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)

I used the insert media feature in editor and .getData() did not return the required HTML to show the video thumbnail icon. The following worked for me to get the final HTML:

$(".ck-content").html()

Try this:

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

with CKEDITOR.instances.YOUREDITOR.element you select a DOM element and if you use CKEDITOR.instances.YOUREDITOR.element.getHtml(); you can get all html from editor element.