summernote에서 최대 길이 설정

Question

Summernote에 최대 길이를 적용하려면 어떻게해야합니까? 텍스트 영역에 maxlength를 적용하면 여기서 작동하지 않습니다.

https://github.com/summernote/summernote

$("#textareaid").summernote({ 
     toolbar:[ 
     ['style', ['style']], 
     ['font', ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'clear']], 
     ['fontname', ['fontname']],  
     ['fontsize', ['fontsize']], 
     ['color', ['color']], 
     ['para', ['ul', 'ol', 'paragraph']], 
     ['height', ['height']], 
     ['table', ['table']], 
     ['insert', ['link', 'picture', 'video', 'hr']], 
     ['view', ['fullscreen', 'codeview']], 
     ['help', ['help']]  
     ],     
     height: 250, 
     focus: true 
}); 

$("#summernotediv").code("");   
$('.note-help-dialog .row-fluid >p').hide();  
$('.note-editable').css('overflow','auto'); 
$('.note-image-input').prev('h5').remove(); 
$('.note-image-input').remove(); 

Answer 1

당신은 콜백 객체와로 preventDefault 기능을 할 수 있습니다.

이 샘플에는 400 한계가 있습니다.

<div class="summernote" ></div> 
<h5 id="maxContentPost" style="text-align:right"></h5> 


     <script> 
      $(document).ready(function() { 
       $('.summernote').summernote({ 
        toolbar: [ 
         ['style', ['bold', 'italic', 'underline', 'clear']] 
        ], 
        placeholder: 'Leave a comment ...', 
        callbacks: { 
         onKeydown: function (e) { 
          var t = e.currentTarget.innerText; 
          if (t.trim().length >= 400) { 
           //delete key 
           if (e.keyCode != 8) 
           e.preventDefault(); 
          } 
         }, 
         onKeyup: function (e) { 
          var t = e.currentTarget.innerText; 
          $('#maxContentPost').text(400 - t.trim().length); 
         }, 
         onPaste: function (e) { 
          var t = e.currentTarget.innerText; 
          var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text'); 
          e.preventDefault(); 
          var all = t + bufferText; 
          document.execCommand('insertText', false, all.trim().substring(0, 400)); 
          $('#maxContentPost').text(400 - t.length); 
         } 
        } 
       }); 
      }); 
     </script> 

당신은 당신이 원하는 한계 조언을 설정할 수 있습니다.

Answer 2

'onKeydown'콜백을 사용하여 편집기 내용의 현재 길이를 확인하고 해당 값이 선택한 최대 길이보다 크거나 같으면 입력을 더 이상 방지 할 수 있습니다.

Answer 3

나는 Summernote .note-editable 클래스를 기반으로이 jquery 솔루션을 작성했습니다.

//Contador de Caracteres para summernote 
$(".note-editable").on("keypress", function(){ 
    var limiteCaracteres = 255; 
    var caracteres = $(this).text(); 
    var totalCaracteres = caracteres.length; 

    //Update value 
    $("#total-caracteres").text(totalCaracteres); 

    //Check and Limit Charaters 
    if(totalCaracteres >= limiteCaracteres){ 
     return false; 
    } 
}); 

은 <div class="summernote"></div> 후 <span id="total-caracteres"></span>을 추가, 글자 수를 표시합니다.

Answer 4

천사 Fraga Parodi의 답변에 따라 삭제, 화살표 키 또는 ctrl + x/ctrl + c와 같이 항상 허용되어야하는 keyCodes를 추가했습니다. 또한 붙여 넣기 코드가 작동하지 않습니다 (더 이상). 업데이트 된 버전은 다음과 같습니다.

<div class="summernote" ></div> 
<h5 id="maxContentPost" style="text-align:right"></h5> 
<script> 
     $(document).ready(function() { 
      $('.summernote').summernote({ 
       toolbar: [ 
        ['style', ['bold', 'italic', 'underline', 'clear']] 
       ], 
       placeholder: 'Leave a comment ...', 
       callbacks: { 
        onKeydown: function (e) { 
         var t = e.currentTarget.innerText; 
         if (t.trim().length >= 400) { 
          //delete keys, arrow keys, copy, cut 
          if (e.keyCode != 8 && !(e.keyCode >=37 && e.keyCode <=40) && e.keyCode != 46 && !(e.keyCode == 88 && e.ctrlKey) && !(e.keyCode == 67 && e.ctrlKey)) 
          e.preventDefault(); 
         } 
        }, 
        onKeyup: function (e) { 
         var t = e.currentTarget.innerText; 
         $('#maxContentPost').text(400 - t.trim().length); 
        }, 
        onPaste: function (e) { 
         var t = e.currentTarget.innerText; 
         var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text'); 
         e.preventDefault(); 
         var maxPaste = bufferText.length; 
         if(t.length + bufferText.length > 400){ 
          maxPaste = 400 - t.length; 
         } 
         if(maxPaste > 0){ 
          document.execCommand('insertText', false, bufferText.substring(0, maxPaste)); 
         } 
         $('#maxContentPost').text(400 - t.length); 
        } 
       } 
      }); 
     }); 
</script>