I'm working with the CKEditor and jQuery and I'd like to toggle a flag to true whenever a user changes the value of a field. One of those fields is a CKEditor instance.
All the textareas that have the "wysiwyg" class get converted to CKEditors but somehow the $('.wysiwyg').change() event never gets detected. I did some googling but the keyword combination seems to bring up nothing but irrelevant results (my google-fu sucks).
Thanks for any help :)
Edit:
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('click', function() {alert('test 1 2 3')});
}
I tried the code above and it doesn't work. It doesn't give me an error meaning that it finds the CKEditor objects but for some reason the listener isn't attached to it?
Also, if I replace the event attachment with just alert(CKEDITOR.instances[i].name); it'll alert the name of my textarea so I know I'm not trying to attach the click event to nothing :)
You can get a plugin (and an explanation about what things are detected as changes) in this post: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html so you can do things like
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('change', function() {alert('test 1 2 3')});
}
I haven't managed to get onchange working however onblur seem to work which may be sufficient for your needs
CKEDITOR.instances['name'].on('blur', function() {alert(1);});
There is now a change event: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change
The following is working for me using version 4.4.3. You need to handle when the Source and HTML changes.
// Initialize the rich text editor.
var bodyEditor = CKEDITOR.replace('emailTemplate_Body',
{
readOnly: false
});
// Handle when the Source changes.
bodyEditor.on('mode', function () {
if (this.mode == 'source') {
var editable = bodyEditor.editable();
editable.attachListener(editable, 'input', function () {
alert('source changed');
});
}
});
// Handle when the HTML changes.
bodyEditor.on('change', function () {
alert('change fired');
});