Adding disable/enable methods to Summernote editor

Question

I have been using summernote editor for a while now and it's working for most of the things I've needed it for. However, I recently wanted it disabled ( not destroyed ) after a user action. After efforts without success, it occurred to me I could use the destroy() method to achieve what I wanted. I noticed that Summernote still turned an already disabled textarea to its editor, with the writing area disabled. Here is what I finally did:

To disable summernote after creating it: I first destroyed it, then disabled the target element, and finally re-initialized it:

    $(".summernoteTarget").destroy();

    $(".summernoteTarget").prop('disabled', true );

    $(".summernoteTarget").summernote();

And to enable it again, I first destroyed it as before, then enabled the target element, and lastly re-initialized it:

    $(".summernoteTarget").destroy();

    $(".summernoteTarget").prop('disabled', false );

    $(".summernoteTarget").summernote();

This did the trick with minor problem: when it remains in the 'disabled' state, all the controls are not disabled, only the writing area is. So a user can still , say, drag a file onto the writing area but this raises an error.

Has anyone taken a look at the source of Summernote and can add two methods( disable and enable ) in addition to destroy(), so that we can do something like:

     $(".summernoteTargetElement").disable();
     $(".summernoteTargetElement").enable();

Thanks.

Answer 1

This worked for me:

// The class note-editable is generated by summernote

// To enable
$('.note-editable').attr('contenteditable', true);

// To disable
$('.note-editable').attr('contenteditable', false);

Source: https://github.com/summernote/summernote/issues/61

Hope this helps someone :)