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

推荐阅读更多精彩内容