Adding multiple CKEditor instances in jquery

Question

I'm experimenting with various WYSIWYG javascript text areas. If I try to put a CKEditor on every <textarea> on my screen with jquery, the editors all show up fine, but they don't save. I've tried:

$(function() {
$('.editors').ckeditor();
});

and

$(function() {
$('.editors').each(function(index, element){
    $(element).ckeditor();
});
});

In both instances, every text area has a CKEditor on it, but it doesn't save. If I manually add all the editors with

$(function() {
CKEDITOR.replace('contactText');
CKEDITOR.replace('edit_footer_text');
CKEDITOR.replace('termsText');
});

or

$(function() {
$('#contactText').ckeditor();
$('#edit_footer_text').ckeditor();
$('#termsText').ckeditor();
});

All three fields have editors, and they save.

I'm trying to put some code in the standard template for this project so that if we want editors on the text areas, they just have to add the class 'editors' to them, so that's why I'm looking for jQuery solutions. This did work with tinymce:

$(function() {
     $('.editors').tinymce({
           script_url : '/common/tiny_mce/tiny_mce.js',
               // General options
               mode : "textareas",
              theme : "advanced",
         })
});

Answer 1

Actually, jQuery Adapter for CKEditor, does not update the form element by default, you need to replace the editor with the current id.

$(function() {
$('.editors').each(function(){
    CKEDITOR.replace( $(this).attr('id') );
});
});

Reference