jquery.dirtyforms icon indicating copy to clipboard operation
jquery.dirtyforms copied to clipboard

CKEditor not firing dirty and clean events

Open StuffOfInterest opened this issue 6 years ago • 1 comments

I recently implemented DirtyForms with both the CKEditor and Bootstrap plugins. The dirty state tracking and dialog intercepts seem to be working (although it will on occasion not catch the back button). The main problem I'm seeing is that CKEditor is not firing the dirty and clean events. I implemented the code below from the documentation so enable and disable buttons based on dirty state:

$('form').find('[type="reset"],[type="submit"]').attr('disabled', 'disabled');
$('form').on('dirty.dirtyforms clean.dirtyforms', function (ev) {
    var $form = $(ev.target);
    var $submitResetButtons = $form.find('[type="reset"],[type="submit"]');
    if (ev.type === 'dirty') {
        $submitResetButtons.removeAttr('disabled');
    } else {
        $submitResetButtons.attr('disabled', 'disabled');
    }
});

For the text box controls on the page the submit and reset buttons are being disabled and enabled based on the state. Unfortunately, making changes in the CKEditor input has no effect. CKEditor is changing the dirty flag because if I make any edits in that box the dialog will popup when I try to navigate off page.

StuffOfInterest avatar Sep 21 '18 10:09 StuffOfInterest

I had the same problem, but with other editor 'summernote' I solved that:

$('form').on('dirty.dirtyforms clean.dirtyforms summernote.change',  function (ev) {
      var $form = ev.target.form ? $(ev.target.form) : $(ev.target);
      var isDirty = $form.dirtyForms('isDirty');
      var $submitResetButtons = $form.find('[type="reset"],[type="submit"]');
       if (isDirty) {
              $submitResetButtons.removeAttr('disabled');
       } else {
              $submitResetButtons.attr('disabled', 'disabled');
       }
});

bpug avatar Oct 11 '18 17:10 bpug