web-dev-qa-db-fra.com

Comment désactiver l'édition dans Summernotes?

J'utilise summernotes et ce que je veux faire, c'est que je veux empêcher l'utilisateur d'ajouter des caractères si s(he) dépasse 2000 caractères mais je ne pouvais pas comprendre comment arrêter de taper un événement.

Ce que je fais est comme ceci:

 $(".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));
                }
           });
        });

N'importe quelle idée comment faire cela, je ne veux pas désactiver le curseur ou détruire le summernote .. Je veux laisser à l'utilisateur le sentiment qu'il peut toujours éditer mais il ne tapera rien si le texte dépasse 2000 caractères .

Merci!!

jquerysummernote
14
Riad

Regardez ce lien à partir de leur document officiel.

Fondamentalement, ce que vous devez faire est:

Vous pouvez désactiver l'éditeur par API.

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

Si vous souhaitez réactiver l'éditeur, appelez API avec enable.

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

Maintenant, ce que vous pouvez faire, c'est utiliser ces appels d'API dans votre propre logique de code/algorithmes pour obtenir l'effet souhaité.

Je sais que c'est une vieille question, mais j'espère que cela vous aidera.

14
Sajib Acharya

Je sais que c'est une vieille question, mais vous pouvez utiliser votre conteneur pour trouver le prochain ".note-editable" et définir son attribut "contenteditable" sur false. A travaillé pour moi.

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

Vous devez utiliser la méthode intégrée pour ce faire:

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

Pour le réactiver, utilisez:

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

Cependant, la désactivation de l'édition désactive également le bouton d'affichage du code, ce qui n'a pas de sens pour moi. Pourquoi l'utilisateur ne peut pas voir (pas modifier) ​​le code? Nous parlions de désactiver l'édition, rien à voir avec le code.

Voici donc ma solution:

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

Veuillez remplacer le #target sélecteur dans le code ci-dessus par celui auquel le widget summernote est attaché.

3
Mario Vázquez