image.png
Quill 是一个让人又爱又恨的可见即所得富文本编辑器，尽管它的常规功能不如tinyMCE那么完善，界面也不如国产的wangEditor，使用上的坑也比较多。但它的定制性很强大，它的不足几乎都可以通过DIY方式来弥补，本文主要是针对QuillEditor在使用上碰到的问题进行了一些汇总，将会持续更新。
问题1. 粘贴后光标会自动弹到文档的初始位置。
- 描述：当从其他地方（比如说网页）复制一些内容粘贴到Quill里的时候，输入光标会自动跳转到文档的初始位置，复制一次跳一次，烦不胜烦。
- 解决方法：
将下面代码复制到引用Quill的页面中：
.ql-clipboard {
position: fixed;
display: none;
left: 50%;
top: 50%;
}
问题2. 当内容超过设定的输入框高度后，工具栏会被遮挡。
- 描述：这个问题用语言描述有点费劲，我们举一个具体例子，现在假设QuillEditor的高度设为500px，默认状态下，当文本框中的内容超过500px的时候，输入框的Y滚动条会自动出现。但当滚动条出现的那一瞬间，你会看到工具条也会自动向上冒出一截，导致它被上层容器所遮挡，这个问题在Quill的官方Demo里也是一样，感觉是一个BUG。
如图所示，当内容没有超越输入框高度的时候，一切正常，滚动条也没有出现。
image.png
我们继续插入空行，这时候滚动条出现了，这是OK的，没毛病。
image.png
此时，只要我们输入任何字符，整个输入框就会自动扩张，导致工具栏被部分遮挡。
image.png - 解决方案：
找到quill.snow.css文件，修改ql-editor和ql-container,如下：
.ql-container {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
height: 60%;
margin: 0px;
overflow-y: hidden;
position: relative;
}
.ql-editor {
box-sizing: border-box;
line-height: 1.42;
height: 95%;
outline: none;
overflow-y: scroll;
padding: 0px 15px;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
}
重点:
- 在quill里有4个div，他们的关系是：
quill-editor 里面装有：ql-toolbar、-ql-container
ql-container里又装有：ql-editor - ql-container的height设为60%是相对于它的父容器 quill-editor 的height的60%。
- ql-editor的height设为95%是相对于它的父容器ql-container，比之略微小一点点即可，如果这里设为100%则ql-editor的框线会被遮挡，影响美观。
