限制夏季便笺编辑职位的高度

Question

我需要的是使用summernote制作一个页面结构化应用程序。在总结中，一个div被附加在contenteditable=true中，这样我们就可以添加内容，但是我想让它固定的高度，这样用户就可以输入到这个程度--例如600 as，但是当我们输入时它会被扩展。

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

<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

它可以滚动，因为我们把更多的内容按高度，需要防止它。

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

据我所知，没有“容易”的方法来防止高度过高，因为它可能是由选定的字体大小或图像添加。我建议的最好的“用户友好”方式是通知用户，他的内容现在使用通知区太长了。测量高度的方法是使用scrollHeight回调来比较编辑器的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