限制summernote编辑器帖子的高度

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。

据我所知，没有"简单"的方法可以防止高度过大，因为这可能是由所选的字体大小或图像添加引起的。我能建议的最好的"用户友好"方式是通知用户，他的内容现在使用通知区域太长了。测量该高度的方法是使用onChange回调比较编辑器的scrollHeight。

$(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