ckeditor content into textarea on change event - multiple ckeditors on form

Question

With a lot of help I finally got the CKEditor to update the associated text area. See the post here.

However, I am stumped of how to get the CKEditor to update each associated text area when there is more than 1 CKEditor on the form.

Here is the jquery that I currently have. It only updates the last CKEditor associated text area on the form:

    for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].on('change', function() { CKEDITOR.instances[i].updateElement() }); //update the relative hidden textarea.
    }

How do I update each associated CKEditor text area when I have 5 or 10 CKEditors on the form?

Answer 1

For each instance of the ckeditor that you want to install on your page, add the following code to your jquery script:

CKEDITOR.instances['id_of_text_area'].on('change', function() { CKEDITOR.instances['id_of_text_area'].updateElement() });

The above JavaScript should replace the code I have displayed in the original question.

I hope this will help some one.

Answer 2

In case you replace textarea elements by class name, just do this:

CKEDITOR.on('instanceReady', function(event) {
    var editor = event.editor;

    editor.on('change', function(event) {
        // Sync textarea
        this.updateElement();
    });
});

Answer 3

The code you have written will update the textarea of only one CKEditor at a time since it is adding a change event to each CKEditor. So this will always update the last element that has been changed.

The way I handle updation of multiple CKEditors is by using this code when submitting my form

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