How can I get the content of CKEditor using JQuery?

I'm using CKEditor. I am saving the form values with ajax using page methods.

But the content of CKEditor value cannot be saving into the table.

I dont postback the page.

What can I do for that?


use the CKEditor.editor.getData() call on the instance. That is to say:

HTML

<textarea id="my-editor">
<input id="send" type="button" value="Send">

JS for CKEditor 4.0.x

$('#send').click(function() {
    var value = CKEDITOR.instances['DOM-ID-HERE'].getData()
    // send your ajax request with value
    // profit!
});

JS for CKEditor 3.6.x

var editor = CKEDITOR.editor.replace('my-editor');

$('#send').click(function() {
    var value = editor.getData();
    // send your ajax request with value
    // profit!
});

If you don't hold a reference to the editor, as in Aeon's answer, you can also use the form:

var value = CKEDITOR.instances['my-editor'].getData();

var value = CKEDITOR.instances['YourInstanceName'].getData()
 alert( value);

Replace YourInstanceName with the name of your instance and you will get the desired results.


I was having issues with the getData() not working every time especially when dealing with live ajax.

Was able to get around it by running:

for(var instanceName in CKEDITOR.instances){
    CKEDITOR.instances[instanceName].updateElement();
}

Then use jquery to get the value from the textarea.


Now that jQuery adapter exists, this answer needs to be updated:

Say you initiated the editor with $('.ckeditor').ckeditor(opt) then you get the value with $('.ckeditor').val()