How can I get the content of CKEditor using JQuery?

Viewed 144906

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?

15 Answers

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

To get data of ckeditor, you need to get ckeditor instance

HTML code:

<textarea class="form-control" id="reply_mail_msg" name="message" rows="3" data-form-field="Message" placeholder="" autofocus="" style="display: none;"></textarea>

Javascript:

var ck_ed = CKEDITOR.instances.reply_mail_msg.getData();

version 4.8.0

$('textarea').data('ckeditorInstance').getData();

Easy way to get the text inside of the editor or the length of it :)

 var editorText = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData();
 alert(editorText);

 var editorTextLength = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData().length;
 alert(editorTextLength);

Using Pure Vanilla Javascript / Jquery or in any javascript library :

If you have Ckeditor loaded in below text-area:

 <textarea name="editor1" id="editor1"></textarea>

Then you can get content inside textarea as below:

var txtNotes = document.getElementsByClassName('ck-content')[0].innerHTML;
Related