reset ckeditor value on form reset button

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.

  • CKEditor - text in image preview dialog in English
  • ckeditor textarea customization with jquery drag and drop
  • Ckeditor force custom style attribute to specific elements
  • CKEditor inline - Aligned bottom not moving when content is added.
  • CKEditor 4: Keep cursor position after manually creating inline instance
  • In CKEditor, how to set link open in a new window as default while removing the target tab?
  • 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?

  • How to insert a CKEditor plugin in a Rails 3 app?
  • CKeditor own plugin with dialog
  • Get computed font size for DOM element in JS
  • Override ENTER key handling in CKEditor dialog
  • CKEditor TypeError: c[a] is undefined in CodeIgniter
  • ReferenceError: CKEDITOR is not defined
  • 2 Solutions collect form web for “reset ckeditor value on form reset button”

    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(); } )" ...
    

    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.