reset ckeditor value on form reset button

Question

I have a form reset button on my form:

<a href="#" id="reset_button" class="btn" onClick="name_of_form.reset();">Reset</a>

This resets all the controls on my form except the ckeditor, and I want to be able to reset the value of the ckeditors on the form.

The associated text areas of the ckeditors are reset.

So how do I go code the reset of the ckeditor into the form reset button?

Answer 1

There's no easy way to synchronize CKEditor with <textarea>. But it is possible to synchronize <textarea> with CKEditor (editor.updateElement). I'd set empty data to the editor first and call editor.updateElement() to reset both field and the editor:

... onClick="CKEDITOR.instances.theInstance.setData( '', function() { this.updateElement(); } )" ...

Answer 2

If you want to have a more generic solution, here is a small jQuery plugin that will handle all reset buttons in all forms on your site:

/**
 * This will fix the CKEDITOR not handling the input[type=reset] clicks.
 */
$(function() {
    if (typeof CKEDITOR != 'undefined') {
        $('form').on('reset', function(e) {
            if ($(CKEDITOR.instances).length) {
                for (var key in CKEDITOR.instances) {
                    var instance = CKEDITOR.instances[key];
                    if ($(instance.element.$).closest('form').attr('name') == $(e.target).attr('name')) {
                        instance.setData(instance.element.$.defaultValue);
                    }
                }
            }
        });
    }
});

This code will only reset the CKEDITOR instances of the form that's being reset.