Fix for CKEditor with MVC3 when using multiple submit buttons

I had an issue this weekend while updating some code from WebForms to MVC3 when using the brilliant CKEditor. Many of our forms display 2 submit buttons - one for publishing and one to save as a draft. When using WebForms there was never any issue with this. I'd just make 2 <asp:Buttons>, add some On_Click handlers and everything was great. With MVC3 I noticed that when using the CKEditor on my forms that I was having to click on the submit buttons twice before the page would submit.

At first I thought this was down to the MVC validation. I removed the validation but the issue still occured. "Ah, it must be the way I handle the postback with the 2 buttons!", I thought, but this didn't seem to work either. I put my button logic and the validation back on my page and removed the class I had put on the textarea of my form to get the CKEditor working and everything worked as expected. The issue was down to the CKEditor and how it was handling multiple submit buttons in a single form. You need to force CKEditor to update the textarea before carrying on with posting the page.

I did some searching on the CKEditor forums and on Google. I came across a piece of javascript that you can add to your webpage to work around this issue (asp.net forums link). Simply add the following to your page and it will resolve the '2 clicks to submit' issue you're having. Note you can add other events to this code if you want but paste and on keyup events should cover you 99% of the time.

$(document).ready(function () {
    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].on("instanceReady", function () {
            //set keyup event
            this.document.on("keyup", function () { CKEDITOR.instances[instance].updateElement(); });
            //and paste event
            this.document.on("paste", function () { CKEDITOR.instances[instance].updateElement(); });
        });
    }
});