web-dev-qa-db-ja.com

Summernotesで編集を無効にする方法は？

私は 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));
                }
           });
        });

どのようにすればいいのか、カーソルを無効にしたり、サマーノートを破棄したりしたくありません。ユーザーがまだ編集できることをユーザーに感じさせたいのですが、テキストが2000文字を超える場合は何も入力しません。 。

ありがとう!!

jquerysummernote
14
Riad

公式ドキュメントの this link をご覧ください。

基本的に、あなたがする必要があるのは：

APIでエディターを無効にすることができます。

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

エディターを再度有効にする場合は、有効にしてAPIを呼び出します。

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

ここでできることは、これらのAPI呼び出しを独自のコードロジック/アルゴリズムで使用して、目的の効果を得ることです。

私は古い質問を知っていますが、これが役に立てば幸いです。

14
Sajib Acharya

これは古い質問であることは承知していますが、コンテナを使用して次の「.note-editable」を検索し、「contenteditable」属性をfalseに設定できます。私のために働いた。

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

そのためには、組み込みメソッドを使用する必要があります。

$("#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ウィジェットがアタッチされているセレクターに置き換えてください。

3
Mario Vázquez