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

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

您可以将上面的代码复制/粘贴到羽毛笔游乐场中。

请注意，如果按 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;

Answer 3

只需将overflow设置为visible，它就会自动处理。

.ql-editor {
overflow-y: visible !important;
}