Using Common Code with CKEditor and jQuery Validation

Question

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.com 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..

Adam Boyle · Accepted Answer · 2010-12-07 20:10:23Z

4

Below is the code I used to fix this problem, I hope it comes 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>

answered Dec 7, 2010 at 20:10

Adam Boyle

611 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josiah Ruddell · Accepted Answer · 2010-12-06 22:41:01Z

2

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.

edited Dec 6, 2010 at 22:41

answered Dec 6, 2010 at 21:42

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

1 Comment

Adam Boyle Over a year ago

Thanks for your help Josiah, I ended up using a mixture of the for iteration you suggested and my own code because I needed the error messages to disappear when the fields were corrected.

Collectives™ on Stack Overflow

Using Common Code with CKEditor and jQuery Validation

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related