How to Disable Editing in Summernotes?

问题

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!!

回答1:

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.

回答2:

I know this is an old question, but you could use your container to find the next '.note-editable' and set its 'contenteditable' attribute to false. Worked for me.

$('#summernote').next().find(".note-editable").attr("contenteditable", false);

回答3:

You should use the build-in method to do so:

$("#target").summernote("disable");

To re-enable it use:

$("#target").summernote("enable");

However, disabling edition also disables the code view button, which does not makes sense to me. Why the user cannot view (not edit) the code? We were talking about disabling edition, nothing to do with code.

So here is my workaround:

function disableSN(){
    $("#target").summernote("disable");

    // Enables code button:
    $(".note-btn.btn-codeview").removeAttr("disabled").removeClass("disabled");

    // When switching from code to rich, toolbar buttons are clickable again, so we'll need to disable again in that case:
    $(".note-btn.btn-codeview").on("click", codeViewClick);

    // Disables code textarea:
    $("textarea.note-codable").attr("disabled", "disabled");
}

function enableSN(){
    // Re-enables edition and unbinds codeview button eventhandler
    $("#target").summernote('enable');
    $(".note-btn.btn-codeview").off("click", codeViewClick);
}

function codeViewClick(){
    // If switching from code view to rich text, disables again the widget:
    if(!$(this).is(".active")){
        $("#target").summernote("disable");
        $(".note-btn.btn-codeview").removeAttr("disabled").removeClass("disabled");
    }
}

Please replace the #target selector in the code above by the one the summernote widget is attached to.

来源：https://stackoverflow.com/questions/33737292/how-to-disable-editing-in-summernotes

标签

jquery

summernote