如何在 Summernotes 中禁用编辑?

Posted

技术标签:

【中文标题】如何在 Summernotes 中禁用编辑?【英文标题】:How to Disable Editing in Summernotes? 【发布时间】:2016-02-17 15:56:37 【问题描述】:

我正在使用summernotes 组件,我想做的是在 s(he) 超过 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 个字符。

谢谢!!

【问题讨论】:

***.com/a/30618954/1132405 我看过这个帖子,但我不想破坏它。在这种情况下销毁summernote会让用户觉得他不能再次编辑,直到他删除一个字母。 我需要的是summernote的只读选项 也许这个问题有用***.com/questions/29018525/… 【参考方案1】:

从他们的官方文档中查看this link。

基本上,你需要做的是:

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

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

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

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

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

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

【讨论】:

【参考方案2】:

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

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

【讨论】:

【参考方案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小部件的选择器。

【讨论】:

【参考方案4】:
$('#summernote[disabled="disabled"]').next().find(".note-editable").attr("contenteditable", false);

【讨论】:

以上是关于如何在 Summernotes 中禁用编辑?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 QTableView 中禁用编辑模式?

如何在eclipse中禁用编辑器左侧的烦人栏

使用行编辑器进行编辑时,如何在 extjs 4.1.1 中禁用行的特定单元格?

如何在summernote文本编辑器中禁用右键单击

如何在 ACE 编辑器中禁用语法检查器?

如何在可编辑的 TextArea 中禁用回车?