如何在summernote中限制文本域的字数

Question

我想限制summernote中允许的单词数。

比如，我只想限制到50个单词。

你有什么好的建议吗？

$(document).ready(function() {
    $('#summernote').summernote({
        height: 20,
   });
});

- smz

Answer 1

我想为这篇文章做出贡献，因为这帮助我找到了我想要的解决方案。看起来建议的答案还没有被接受。

我创建了一个maxLength变量，并配置了summernote回调函数。请注意，我使用的summernote版本将编辑区域设为.note-editable。下面的解决方案是typescript，我有一个span，我可以定位它来显示剩余字符数。

callbacks: {
onKeydown(e) {

  // The text method will ignore HTML tags and preserve non-breaking
  // space allowing for a true character count

  let content: string = $('.note-editable').text();

  // This checks if the character is alphanumeric (i.e. not a backspace or return key)

  let isCharacter: boolean = (/[a-zA-Z0-9-_ ]/.test(String.fromCharCode(e.keyCode)));

  // If the current content length is at max, preventDefault will disallow 
  // any more characters

  if (isCharacter) {
    if (content.length >= maxLength) {
      e.preventDefault();
    }
  }
},
onKeyup(e) {

  // After the result of checking the character and max length exceeded, 
  // take the resulting count and determine and display characters remaining

  let content: string = $('.note-editable').text();
  let charactersRemaining: number = maxLength - content.length;
  $('#SomeDivId span').text(charactersRemaining);
}

- vandensd

Answer 2

var maxwords = 100;
 $(".summernote").summernote({
        height: '200px',
          callbacks: {
              
                onKeydown: function (e) {
                 var t = e.currentTarget.innerText;   
                 var words = t.split(" ");
                 if (words.length >= maxwords) {
                      //delete key
                  if (e.keyCode != 8)
                    e.preventDefault();
                    // add other keys ...
                  }
                },
                 onKeyup: function(e) {
                    var t = e.currentTarget.innerText;
                     var words = t.split(" ");
                   if (words.length >= maxwords) {
                      //delete key
                  if (e.keyCode != 8)
                    e.preventDefault();
                    // add other keys ...
                  }
                },
                onPaste: function(e) {
                var t = e.currentTarget.innerText;
                var bufferText = ((e.originalEvent || e).clipboardData || 
                                   window.clipboardData).getData('Text');
                e.preventDefault();
                var all = t + bufferText;
                var words = all.split(" ");
                var array = words.slice(0, maxwords)
                document.execCommand('insertText', false, array.join(" "));
               
             }
        }
    });

- Alex Joshua

Answer 3

字数 vs 字符数： 我建议你选择字符数而不是单词数，因为这对用户来说更容易和一致。

Summernote创建了像下面这样的可编辑div：

有了这个知识，并使用下面的答案，您可以实现一种解决方案，其中您可以限制字符数： 在ContentEditable div中限制字符数

- kutuhal

---

对于社会科学领域等非计算机专业的用户而言，以单词数量来表示长度比以字符数量更容易。例如，在雅思考试的写作测试中，他们要求你用最多单词数来写作文。计字符数量不太方便。你不能说“因为[字符]易于计算且一致”...也许在Twitter和SO等平台上更容易。但并非所有情况都是如此。 - Pathros