如何在Summernotes中禁用编辑？

Question

我使用summernotes成分,我想要做的就是我想从如果s(他)超过2000个字符,但我无法弄清楚如何停止键入事件添加字符停止用户.

我正在做的是如下:

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

任何想法如何做到这一点,我不希望禁用光标或破坏summernote ..我想,让用户觉得他(她)还可以编辑,但如果文本超过2000个字符也不会输入任何内容.

谢谢!!

Answer 1

从他们的官方文件中查看此链接.

基本上,您需要做的是:

您可以通过API禁用编辑器.

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

如果要再次启用编辑器,请使用enable调用API.

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

现在,您可以做的是,在您自己的代码逻辑/算法中使用这些API调用来获得所需的效果.

我知道这是一个老问题,但希望这会有所帮助.

Answer 2

我知道这是一个老问题，但您可以使用容器查找下一个 '.note-editable' 并将其 'contenteditable' 属性设置为 false。为我工作。

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

Answer 3

您应该使用内置方法来执行此操作：

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

要重新启用它，请使用：

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

但是，禁用版本也会禁用代码查看按钮，这对我来说没有意义。为什么用户无法查看（不能编辑）代码？我们谈论的是禁用版本，与代码无关。

所以这是我的解决方法：

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

请将#target上面代码中的选择器替换为Summernote 小部件所附加的选择器。