Content ckeditor in textarea on change event - several ckeditors in form

Question

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

However, I don’t understand how to get CKEditor to update each related text area when there is more than 1 CKEditor in the form.

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

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

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

Answer 1

For each ckeditor instance 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 that I displayed in the original question.

Hope this helps someone.

Answer 2

If you replace the textarea elements with the class name , simply do the following:

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

Answer 3

The code you wrote will update the text box of only one CKEditor at a time, as it adds a change event to each CKEditor. This way it will always update the last item that has been changed.

The way to handle multiple CKEditors is to use this code when submitting my form

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