Quill Editor - получить общее количество строк / динамически установить высоту редактора - PullRequest
Новая
       5

Quill Editor - получить общее количество строк / динамически установить высоту редактора

0 голосов
/ 21 сентября 2018

Мне нужно получить количество строк текста, введенных пользователем в редактор, поскольку начальная высота редактора мала, но после того, как пользователь вводит некоторый текст и переносит его в новую строку, мне нужно увеличить высотуредактор.

Мне удалось получить номер, только если пользователь нажал клавишу ввода, потому что тогда Quill добавляет новый тег <p>.В противном случае, если он просто печатает текст, и он разбивается на новую строку, я не могу найти способ получить общее количество строк текста.Вот пример: 

var quill = new Quill('#editor-container', {
  theme: 'snow'
});

quill.root.style['max-height'] = '81px';
quill.root.style['border-bottom'] = '1px solid grey';

trackHeight = () => { 
  let length = quill.getLength();
  let lines = quill.getLines(0, length);
    if (lines.length < 2) {
      quill.root.style['min-height'] = '101px';
    }
    if (lines.length > 2) {
      quill.root.style['min-height'] = '120px';
    }
    if (lines.length > 3) {
      quill.root.style['min-height'] = '140px';
    }        
    if (lines.length > 4) {
      quill.root.style['min-height'] = '160px';
    }                      
};   

quill.on('text-change', this.trackHeight);

Вы можете просто скопировать / вставить указанный выше код на игольную площадку .

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

Любой совет здесь?

1 Ответ

0 голосов
/ 21 сентября 2018

Решение: 

var quill = new Quill('#editor-container', {
  theme: 'snow'
});

quill.root.style['max-height'] = '81px';
quill.root.style['border-bottom'] = '1px solid grey';

trackHeight = () => { 
  let length = quill.getLength();
  let scrollHeight = quill.root.scrollHeight;
    quill.root.style['min-height'] = Math.min(scrollHeight, 500) + 'px';
    if(length < 50) {
      quill.root.style['min-height'] = '41px';
    }                
};   

quill.root.style['min-height'] = '41px';

quill.on('text-change', this.trackHeight);
...