Quill Editor 富文本编辑器的高度问题
问题现象
1. 编辑框只有一行高;
2. 编辑框高度足够,但显示不全,左侧有滚动条。向下拉滚动条,编辑框把工具栏向上顶出去,工具栏看不见了。
网上搜出来一大堆各种说法,照猫画虎,有时候对,有时候不对。这些说法没一个把原因说清楚。
问题的解决
我老人家打开浏览器的开发者模式,看看这个编辑器的各个元素究竟都有什么刚浪style
然后才发现:
1. 编辑框那个文字输入框,它的 class 是 ql-editor;
2. 这个编辑框是包在另外一个 div 里面的,它的 class 是 ql-container
经过我测试,在页面里面,写:
<style>
.ql-editor{
height: 400px;
};
</style>
完全没用!
有用的是以下的写法:
<style>
ql-container{
height: 400px;
};
</style>
记录一下。遇到有类似问题的同学,可以参考一下我的方法:打开浏览器的开发者工具去查看页面元素究竟对应哪个 CSS。
又及:
编辑框里面,默认的字体很小,看起来不舒服。想设置字体大小,针对的是 ql-editor,代码:
.ql-editor{
font-size: 18px;
};
又及及及:
针对 ql-editor 设置字体后,字体是变大了,但是那个编辑框也变大,导致编辑器总高度不够,使得再次出现侧边滚动框。滚动后,工具栏又被滚走了。
终极解决方案:
#editor.edit_container.ql-container.ql-snow{
height: 400px;
font-size: 18px;
};
一定要把前面提到的 .ql-editor 的样式从页面文件里面删除。
这个 #editor.edit_container.ql-container.ql-snow 实际上是 ql.editor 外面一层的容器 div 。设置它的字体和高度,完美实现字体尺寸和整个编辑器高度的设置。这样做,我测试,没用出现滚动条,让工具栏被滚走的情况。