How to limit the number of words in a textarea in summernote

Question

I'm trying to limit the number of words allowed in a summernote.

example, I want to limit up to 50 words only.

Do you have any idea?

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

score 2 · Answer 1 · answered Jun 07 '17 at 19:57

Thought I would contribute to this post as this helped me arrive to my desired solution. It seems the suggested answer has not been accepted.

I created a variable for maxLength and the following is how I configured summernote callbacks. Please note the version of summernote I am using has the editing area as .note-editable. The solution below is typescript and I have a span that I target which displays the remaining character count.

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

score 0 · Answer 2 · answered Aug 16 '20 at 16:06

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(" "));
               
             }
        }
    });

score -1 · Answer 3 · edited May 23 '17 at 10:30

-1

Words vs Characters: I suggest that you decide on the number of characters rather than words because that is easy and consistent even for the user.

Summernote creates contenteditable divlike below:

With this knowledge and using the below answer, you can achieve a solution where you can restrict the number of characters: Limiting Number of Characters in a ContentEditable div

edited May 23 '17 at 10:30

Community

1
1

answered Mar 19 '16 at 13:04

kutuhal

23
8

For non-informatic users, such as those from the social sciences, it is easier to tell the length in terms of number of words, rather than in characters. Another example, the IELTS, in the writing test, they ask you to write something with a max length of words. It is less practical to count characters. You can't say "because [characters] is easy and consistent" ... maybe it is easier in Twitter and SO. But not in all examples. – Pathros Sep 25 '18 at 14:44

How to limit the number of words in a textarea in summernote

3 Answers3