Stephen Adelakun Stephen Adelakun - 15 days ago 5
Javascript Question

Adding disable/enable methods to Summernote editor

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

You can disable or enable editor with API after v0.7.3.

// To disable
$('.summernote').summernote('disable');
// To enable
$('.summernote').summernote('enable');

http://summernote.org/deep-dive/#disable-enable