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

I don't know if you still need this. I am doing the following: For disable

$('#textarea').destroy();
                    $('#textarea').prop('disabled', true);
                    $('#textarea').summernote({
                        minHeight: null,
                        maxHeight: null,
                        focus: true,
                        styleWithSpan: false,
                        toolbar: [
                        ]                         
                    });

For enable

$('#textarea').destroy();
                    $('#textarea').prop('disabled', false);
                    $('#textarea').summernote({
                        minHeight: null,
                        maxHeight: null,
                        focus: true,
                        styleWithSpan: false,
                        toolbar: [
                            ['style', ['bold', 'italic', 'underline', 'clear']],
                            ['para', ['ul', 'ol']]
                        ]
                    });

textarea is my area where i applied the summernote.

But after this i am having problem with the code property when i post the page.

Answer 2

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

Answer 3

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 :)

Answer 4

In my situation I wanted to create a class selector for 2 summernote rich text editors. One would be enabled the other disabled.

To achieve this you can use this approach

// This is in a razor view using MVC

// Enabled
@Html.TextAreaFor(i => i.Explanation, new {@class = "summerNote" })


// Disabled
@Html.TextAreaFor(i => i.Explanation, new {@class = "summerNote-disabled" })

The text area will allow the saved rich text code to be interpreted when you display it back in the textarea later.

Now when you create a summerNote rich text editor it does not convert your element to a summernote, rather it create a new element below the defined element. You can see this in the DOM if you inspect the various elements

Now to disable the editor

// In javascript
$('.summerNote-disabled+.note-editor .note-editable').attr('contenteditable', false)

This selects the element that you defined as the summerNote and grabs the note-editor sibling. Within that sibling exists the note-editable textarea. This is the element that you would want to set its 'contenteditable' attribute to false.