How to Disable Editing in Summernotes?

Question

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 typin

Answer 1

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.