How to Disable Editing in Summernotes?

Riad picture Riad · Nov 16, 2015 · Viewed 22.2k times · Source

I am using summernotes component and what I want to do is I want to stop the user from adding characters if s(he) exceeds 2000 Chars but I couldn't figure out how to stop typing event.

What I am doing is like the following:

 $(".note-editable").each(function(){
           $(this).on("keyup", function(){
                var cc = $(this).text().length;
                var arr = $(this).next().attr("class").split('_');
                var q = "q"+arr[0];
                var maxChar = arr[2];
                var textarea = $('*[name^="'+q+'"]');
                var diffChar = parseInt(maxChar - cc);
               
                if(diffChar >= 0)
                {
                    $(this).next().text(diffChar + " Remaining out of " + maxChar);
                }
                else
                {
                    $(this).next().text("0 Remaining out of " + maxChar);
                    
                    //$(textarea).prop('disabled', true);
                    $(this).text($(this).text().slice(0,diffChar));
                }
           });
        });

Any Idea how to do that, I don't want to disable the cursor or destroy the summernote .. I want to let the user feel that (s)he can still edit but it won't type anything if the text exceeds 2000 chars.

Thanks!!

Answer

Sajib Acharya picture Sajib Acharya · Sep 10, 2016

Look at this link from their official document.

Basically, what you need to do is:

You can disable editor by API.

$('#summernote').summernote('disable');

If you want to enable editor again, call API with enable.

$('#summernote').summernote('enable');

Now, what you can do is, use these API calls in your own code logic/algorithms to get the desired effect.

I know its an old question, but hope this helps.