I'm using CKEditor and the jQuery Validation plugin on a project I'm working on.

I've read several very helpful posts on StackOverflow in the last few days which have really helped me in getting CKEditor validated, thanks!

I now want to roll out the code I've written to handle one editor instance to the rest of the project, ideally without duplicating the code or specifying each individual instance by ID. There are many of them over many pages thanks to my customers' specification.

The code I have in the footer of my pages is:

$(document).ready(function() {
 CKEDITOR.instances["itissue"].on("instanceReady", function() {
  // Set keyup event
  this.document.on("keyup", updateValue);

  // Set paste event
  this.document.on("paste", updateValue);
 });

 function updateValue() {
    CKEDITOR.instances.itissue.updateElement(); 
    $("#itissue").trigger('keyup');                   
 } 
});

itissue is the ID of my instance, the ID is different on each page. I see it needs to be replaced with some type of generic identifier for "all textareas" but this is where my programming and Googling skills have expired.

I would appreciate a nudge in the right direction if anybody has any ideas..

I'm using CKEditor and the jQuery Validation plugin on a project I'm working on.

I've read several very helpful posts on StackOverflow. in the last few days which have really helped me in getting CKEditor validated, thanks!

I now want to roll out the code I've written to handle one editor instance to the rest of the project, ideally without duplicating the code or specifying each individual instance by ID. There are many of them over many pages thanks to my customers' specification.

The code I have in the footer of my pages is:

$(document).ready(function() {
 CKEDITOR.instances["itissue"].on("instanceReady", function() {
  // Set keyup event
  this.document.on("keyup", updateValue);

  // Set paste event
  this.document.on("paste", updateValue);
 });

 function updateValue() {
    CKEDITOR.instances.itissue.updateElement(); 
    $("#itissue").trigger('keyup');                   
 } 
});

itissue is the ID of my instance, the ID is different on each page. I see it needs to be replaced with some type of generic identifier for "all textareas" but this is where my programming and Googling skills have expired.

I would appreciate a nudge in the right direction if anybody has any ideas..

• javascript
• jquery
• jquery-validate
• ckeditor

2 Answers 2

Below is the code I used to fix this problem, I hope it es in useful for somebody in the future.

<script type="text/javascript">
$(document).ready(function() {
    for(var name in CKEDITOR.instances) {
        CKEDITOR.instances[name].on("instanceReady", function() {
            // Set keyup event          
            this.document.on("keyup", updateValue);
            // Set paste event
            this.document.on("paste", updateValue);     
        }); 

        function updateValue() {
            CKEDITOR.instances[name].updateElement(); 
            $('textarea').trigger('keyup');
        }
   }    
});
</script>

I would validate editors within the submit handler, instead of watching keyup and calling updateElement onkeyup.

To answer your question you need to iterate through the CKEDITOR.instances object.

// validator submit handler
var submitHandle = function(){
    for(var name in CKEDITOR.instances){
        CKEDITOR.instances[name].updateElement(); // update all instances of ckEditors
    }
    // proceed with validation check
};

This way you do not need to know the name of an editor instance.