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;