Limit summernote editor post in height

Question

What I need is I want to make a page structured application using summernote. In summernote a div is appended in body which is contenteditable=true so that we can add our content, but I want to make it fixed height so that user can enter content to that extent for example 600px, but it gets extended as we type.

This is the code that gets appended in the body.

<div class="note-editable" contenteditable="true"></div>

I tried this below but not working. Even setting height manually to note-editable does not works.

 $('#summernote').summernote({
  // set editor height
  height:600,                 // set editor height
  minHeight: 600,             // set minimum height of editor
  maxHeight: 600,       
  disableResizeEditor: false,
)}

Answer 1

It gets scrollable as we put more content by height, need to prevent it.

So your question is not about the editor's height, but about the editor's scrollHeight.

From what I know, there is no "easy" way to prevent that height excess since it may be caused by the chosen font size or an image addition. The best "user friendly" way I can suggest is to notify the user that his content is now too long using the notification area. The way to measure that height is to compare the editor's scrollHeight using the onChange callback.

$(document).ready(function(){
  $('#summernote').summernote({
    // set editor height
    height:600,                 // set editor height
    minHeight: 600,             // set minimum height of editor
    maxHeight: 600,       
    disableResizeEditor: true,
    callbacks:{
      onChange: function(){
        if($(".note-editable")[0].scrollHeight>600){
          $(".note-status-output").html('<div class="alert alert-danger">Your text is too long!</div>');
        }else{
          $(".note-status-output").html("");
        }
      }
    }
  });
});

And then, if that editor is inside a <form> and you want to prevent the text submission when there is a notification present, you can use the below condition:

if($(".note-status-output").html().length>0){ // There is a notification, do not submit

CodePen