Question

我需要让用户输入多行文本，因为编辑器的初始高度很小，但是在用户输入一些文本并将其换行后，我需要增加文本行的高度。编辑器。

只有在用户按下Enter时，我才设法获得该号码，因为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;

羽毛笔编辑器-获取总行数/动态设置编辑器高度

2 个答案: