Trying to call the keyup function on ckeditor

Question

I had a text area that has been replaced by ckeditor. I had some jquery to listen to the textarea input:

$('.formanswer').keyup(function () {
        LimitText($(this), $(this).attr('data-maxlength'));
});

the limit text method just limits the text input.

so now the text area tag looks like this:

<textarea class="formanswer" rows="10" cols="2" id="response_<%: animal.AnimalId.ToString() %>" name="animalresponse" data-maxlength="<%: animal.AnimalMaxLength.ToString() %>"><%: animal.AnimalResponse %></textarea>

I am trying to do the same thing but with the the ckeditor... I have had a look at the documentation: http://docs.ckeditor.com/#!/guide/dev_jquery

I tried a few different things to have that event on the editor instance but it hasn't worked...I am using the javascript implenentation, not the asp net one.

Answer 1

given the name of the CKEditor is: editor the solutions is:

var e = CKEditor.instances['editor']

e.on( 'keyup', function( event ) {
    alert( e.getData() );
});

in this particular solution, I am just alerting the contents of the editor.

Answer 2

actually only this is working with ckeditor 4, where editor is the id of textarea:

CKEDITOR.instances.editor.on('key', function(e) {
    var self = this;

    setTimeout(function() {
        console.log(self.getData());
    }, 10);
});

getData returns the value currently inputed. Delayed, because otherwise last value would be missing.

Answer 3

This will surely work on Ck Editor 4.x and up

  CKEDITOR.on('instanceCreated', function (e) {
    e.editor.on('change', function (event) {
 var value = CKEDITOR.instances['TestArea_id'].getData();//Value of Editor
});
});