限制 summernote 编辑器 post 的高度

Question

我需要的是想用summernote做一个页面结构化的应用。在 summernote 中，一个 div 被附加在 contenteditable=true 的 body 中，这样我们就可以添加我们的内容，但我想让它固定高度，以便用户可以输入该范围的内容，例如 600px，但是它在我们键入时扩展。

这是附加在正文中的代码。

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

我在下面尝试了这个但没有用。即使手动将高度设置为笔记可编辑也不起作用。

 $('#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.

所以你的问题不是关于编辑的height，而是关于编辑的scrollHeight。

据我所知，没有 "easy" 方法可以防止高度超出，因为它可能是由所选的字体大小或添加的图像引起的。我可以建议的最佳 "user friendly" 方法是使用 notification area. The way to measure that height is to compare the editor's scrollHeight using the onChange 回调通知用户他的内容现在太长了。

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

然后，如果该编辑器在 <form> 中并且您想在出现通知时阻止文本提交，您可以使用以下条件：

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

CodePen

限制 summernote 编辑器 post 的高度

Limit summernote editor post in height

javascript

jquery

summernote