2020-03-20 QuillEditor编辑器疑难杂症汇总

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的框线会被遮挡，影响美观。