Установка максимальной длины в 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, чтобы проверить текущую длину содержимого редактора и, возможно, предотвратить дальнейшую ввод текста, если это значение больше или равно максимальной длительности вашего выбора.

onKeydown: function(e) { 
      if (e.keyCode == 8 /*and other buttons that should work even if MAX_LENGTH is reached*/) 
       return; 
      if ($(".note-editable").text().length >= MAX_LENGTH){ 
       e.preventDefault(); 
       return; 
      }  
}, 

Answer 3

Я написал это Jquery решение, основанное на классе Summernote .note-editable.

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

Чтобы отобразить количество символов, просто добавьте <span id="total-caracteres"></span> после <div class="summernote"></div>.

Answer 4

Основываясь на ответе Ангела Фраги Пароди, я добавил еще несколько ключевых кодов, которые всегда должны быть разрешены как удаление, клавиши со стрелками или ctrl + x/ctrl + c. Также код для вставки не работал (больше). Вот обновленная версия:

<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>