Question

如何将maxlength应用于Summernote？将maxlength应用于textarea不起作用。

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个限制。

  function registerSummernote(element, placeholder, max, callbackMax) {
    $(element).summernote({
      toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']]
      ],
      placeholder,
      callbacks: {
        onKeydown: function(e) {
          var t = e.currentTarget.innerText;
          if (t.trim().length >= max) {
            //delete key
            if (e.keyCode != 8)
              e.preventDefault();
            // add other keys ...
          }
        },
        onKeyup: function(e) {
          var t = e.currentTarget.innerText;
          if (typeof callbackMax == 'function') {
            callbackMax(max - 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));
          if (typeof callbackMax == 'function') {
            callbackMax(max - t.length);
          }
        }
      }
    });
  }


$(function(){
  registerSummernote('.summernote', 'Leave a comment', 400, function(max) {
    $('#maxContentPost').text(max)
  });
});

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="summernote"></div>
    </div>
    <div class="col-xs-12 text-right">
      <span id="maxContentPost"></span>
    </div>
  </div>
</div>

Answer 2

根据Angel Fraga Parodi的回答，我添加了一些应该总是允许的keyCodes，如删除，箭头键或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>

Answer 3

使用'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 4

我根据Summernote counter +=类编写了这个jquery解决方案。

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

在summernote中设置最大长度

4 个答案: