javascript - Using Common Code with CKEditor and jQuery Validation - Stack Overflow

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

Share Improve this question Follow edited Dec 6, 2010 at 22:40 Josiah Ruddell 29.8k88 gold badges6767 silver badges6868 bronze badges asked Dec 6, 2010 at 21:17 Adam BoyleAdam Boyle 6111 silver badge44 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.