Pass textarea value from WYSIWYG CKEditor

Question

I'm trying to pass the input I made in a WYSIWYG editor (CK Editor) to JQuery. Currently it's blank no matter what I input.

HTML:

<textarea type='text' class="ckeditor reply"  name='reply'></textarea>
<button type="button" STYLE="align: right;" class="btn btn-info reply_button yGreenButton">Submit Reply</button>

JS:

<script>
$(function()
{
    $('.reply_button').click(function(){

        var reply=$(this).siblings('.reply').val();

    });
});
</script>

The textarea shows up as CKeditor. The current value alerted from the clicking the reply_button is blank, no matter what I put in the CKeditor textarea. How to get the actual content I input to be alerted?

Advice is hugely appreciated.

Best,

Answer 1

It's a CKEditor, you have to use their API:

var editor = CKEDITOR.replace( '.ckeditor' );
editor.getData();

The API docs can be found here.

Answer 2

You've got two options - you can use CKEditor API directly, or CKEditor adapter for jQuery.

To use CKEditor API directly, you need the editor instance. You can get it from the CKEDITOR.instances object using id or name of related textarea or automatically generated name ('editor1', 'editor2', etc). In your case:

var editor = CKEDITOR.instances.reply;
var val = editor.getData();

To use jQuery adapter, you need to load adapters/jquery.js file after ckeditor.js and then you can retrieve value easily:

var val = $( '.ckeditor' ).val();

Just like you would use normal textarea. Read more in the jQuery adapter guide and check the CKEditor with jQuery sample.