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

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.

Answer 2

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.

Answer 3

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