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 。设置它的字体和高度，完美实现字体尺寸和整个编辑器高度的设置。这样做，我测试，没用出现滚动条，让工具栏被滚走的情况。