如何在Summernote中禁用编辑？

Question

我正在使用Summernote组件，我想做的是，如果用户超过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个字符就无法继续输入。

谢谢!!

- Ray

---

https://dev59.com/ll4b5IYBdhLWcg3whB-V#30618954 - dyaa

我看过这篇帖子，但我不想破坏它。在这种情况下，摧毁summernote会让用户感觉不能再编辑，直到他们删除一个字母为止。 - Ray

我需要的确切是summernote的只读选项。 - Ray

也许这个问题很有用 https://dev59.com/ll4b5IYBdhLWcg3whB-V - Tasos K.

Answer 1

看一下他们官方文档中的这个链接。

基本上，你需要做的是：

你可以通过API来禁用编辑器。

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

如果您想再次启用编辑器，请使用`enable`调用API。

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

现在，您可以在自己的代码逻辑/算法中使用这些API调用来获得所需的效果。我知道这是一个老问题，但希望这可以帮到您。

- Sajib Acharya

Answer 2

我知道这是一个老问题，但你可以使用你的容器来找到下一个“.note-editable”并将其“contenteditable”属性设置为false。对我有用。

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

- Darryn Jacobs

---

我想禁用可编辑区域的某些部分。你的答案是我的解决方案。谢谢。就像这样 => $（'.note-editable'）.find（'.uneditable-part'）.each（function（）{ $（this）.attr（'contenteditable'，false）; }）; - Thameem

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部件所附加的选择器。

- Mario Vázquez

Answer 4

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

- Arkadiusz G.