Question

我需要做的是使用summernote制作一个页面结构的应用程序。在summernote中，在主体中附加了一个div，它是contenteditable=true，以便我们可以添加内容，但是我想将其设置为固定高度，以便用户可以输入该内容，例如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

当我们按高度放置更多内容时，它可以滚动，需要防止这种情况。

因此，您的问题不是关于编辑者的height，而是关于编辑者的scrollHeight。

据我所知，没有防止这种高度过高的“简便”方法，因为它可能是由所选字体大小或图像添加引起的。我建议的最佳“用户友好”方法是使用notification area通知用户其内容现在太长。测量高度的方法是使用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

限制Summernote编辑器的高度

1 个答案: