Quill Editor - 獲取總行數/動態設置編輯器高度

Question

我需要獲取用戶在編輯器中輸入的多行文本，因為編輯器的初始高度很小，但是在用戶輸入一些文本並換行后，我需要增加編輯器的高度。

只有當用戶按下回車鍵時，我才設法得到這個數字，因為 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);

您可以將上面的代碼復制/粘貼到quill playground 中。

請注意，如果您按 Enter，大小會增加，但如果您只是鍵入直到文本換行到單獨的行中，編輯器的高度將保持不變，因為lines.length屬性不會增加。

這里有什么建議嗎？

Answer 1

解決方案：

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);

Answer 2

你可以簡單地做：

const numberOfLines = this.quill.getLines().length;