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?

score 12 · Accepted Answer · edited Jan 17 '17 at 15:46

12

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.

edited Jan 17 '17 at 15:46

Kae Verens

4,076
3
21
41

answered Feb 28 '14 at 04:06

user3354539

1,245
5
21
40

1

Finally, you're the only person whose posted an answer that works across the internet. – Daniel May 06 '15 at 10:18

score 4 · Answer 2 · answered Jun 23 '16 at 14:26

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

score 3 · Answer 3 · answered Feb 27 '14 at 12:29

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

answered Feb 27 '14 at 12:29

Derek

450
5
9

Thanks, but I require the CKEditor to update each associated text area as the user enters data into the CKEditor when there is more than 1 CKEditor on the form - not when I submit the form. Any ideas? – user3354539 Feb 27 '14 at 22:13

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

3 Answers3

Linked