[英]Quill Editor - get total number of lines / dynamically set editor height
I need to get a number of lines of text entered into editor by user, because initial height of the editor is small, but after user enters some text and it wraps into a new line, I need to increase the height of the editor.我需要获取用户在编辑器中输入的多行文本,因为编辑器的初始高度很小,但是在用户输入一些文本并换行后,我需要增加编辑器的高度。
I managed to get the number only if user presses enter, because then Quill adds a new <p>
tag.只有当用户按下回车键时,我才设法得到这个数字,因为 Quill 添加了一个新的
<p>
标签。 Otherwise, if he just types text and it breaks into a new line, I can't find a way to get the total number of text lines.否则,如果他只是输入文本并换行,我就找不到获取文本行总数的方法。 Here is an example:
下面是一个例子:
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);
You can just copy/paste code above into a quill playground .您可以将上面的代码复制/粘贴到quill playground 中。
Note that if you press enter, size increases, but if you just type until text wraps into a separate line, editor height remains the same, because lines.length
property doesn't increase.请注意,如果您按 Enter,大小会增加,但如果您只是键入直到文本换行到单独的行中,编辑器的高度将保持不变,因为
lines.length
属性不会增加。
Any advice here?这里有什么建议吗?
Solution:解决方案:
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);
你可以简单地做:
const numberOfLines = this.quill.getLines().length;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.