Ограничить пост редактора summernote по высоте - PullRequest
Новая
       4

Ограничить пост редактора summernote по высоте

0 голосов
/ 05 ноября 2018

Что мне нужно, так это то, что я хочу создать структурированное приложение, используя 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,
)}

1 Ответ

0 голосов
/ 05 ноября 2018

Он становится прокручиваемым, так как мы размещаем больше контента по высоте, нужно это предотвратить.

Итак, ваш вопрос не о редакторе 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

...