Ограничить высоту поста редактора Summernote
Что мне нужно, так это создать приложение с структурированной страницей, используя summernote. В summernote к телу добавлен div, который является contenteditable=true, чтобы мы могли добавлять наш контент, но я хочу сделать его фиксированной высотой, чтобы пользователь мог вводить контент до этого размера, например 600 пикселей, но он расширяется по мере ввода.
Это код, который добавляется в тело.
<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,
)}
Он становится прокручиваемым по мере того, как мы помещаем больше контента по высоте, необходимо предотвратить это.
Я изменил заголовок вашего вопроса на более информативный ... Смотрите мой ответ. ;)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
It gets scrollable as we put more content by height, need to prevent it.
Так что ваш вопрос не о 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
Вроде нормально работает здесь ...