36

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.getData();

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?

12 Answers 12

31

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.

4
  • 2
    If you mean that they should have used some console.log, you should have realized that the user was trying to use a non-existing method, so if he had looked at the console he would have seen the error. Instead of explaining him all the details about how to debug javascript (and the possible need to install some extra add-on or switch browser, remember that he asked this four years ago), the bullet-proof method is to use an alert that provides the info and there's no need to explain it further.
    – AlfonsoML
    Sep 17, 2014 at 14:30
  • IMHO, using alert for debugging purposes is very bad practice and should not be adviced to anyone recklessly. (Since SO is a well known resource especially for beginners)
    – ˈvɔlə
    Sep 18, 2014 at 12:45
  • 9
    So it would have been better for you if I wrote: "or learn how to debug javascript with a proper browser" ? That's not helpful. The alert always works in every browser without any requirement. I would love to see you debug a web page in mobile four years ago without an alert.
    – AlfonsoML
    Sep 18, 2014 at 15:30
  • 1
    @Wolle using alert() instead of console.log() is good for beginner because you can pause execution when using alert(), If it was console.log() thew would have to use debugger keyword to pause execution. Both console.log() and alert() has its own advantages. I know most beginners use alert() instead of console.log(), but that doesn't make one or other a bad practice, Just don't use it in production, If it was bad, the browsers would have removed it.
    – 27px
    Dec 2, 2020 at 10:41
17

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>");
0
10

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.

2
  • 2
    exception document is undefinded Oct 7, 2014 at 11:33
  • Keep in mind that you should replace Editor by your instance name, for example, in my case it was: CKEDITOR.instances.sfw_fc_fccd_e2_dui27_fcUse_fccd_e16_dui27_fcUse_fccd_e2_dui31_tbTextGeneratorUse.getData() since I was using it in ASP.Net and the instace name was sfw_fc_fccd_e2_dui27_fcUse_fccd_e16_dui27_fcUse_fccd_e2_dui31_tbTextGeneratorUse. Apr 11, 2019 at 8:37
7

Please update ckeditor config.js with the following line

config.fullPage = true;

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

6

This worked for me:

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

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 );
    } );
1

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;
}

0

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...

0

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.

2
  • this doesn't work for me. without modifications there seems to be no data in the textarea, all the data is inside the iFrame.
    – low_rents
    Nov 25, 2014 at 11:10
  • Don't know what to tell you. I have this working in production. Maybe you need to use the jquery command to create it as well? $j('#element').ckeditor();
    – Brent
    Dec 4, 2014 at 18:30
0

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)

0

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

-2

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.

3
  • Please don't add just one line. Explain your answer.
    – A J
    Oct 4, 2016 at 5:08
  • sorry , when select a editor, you can select a element DOM Nov 24, 2016 at 15:30
  • with elemtDom = CKEDITOR.instances.YOUREDITOR.element; and get HTML from that element with getHtml(); so you can use ** CKEDITOR.instances.YOUREDITOR.element.getHtml(); ** Nov 24, 2016 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.