vue之富文本的简单使用

最近开发的新项目用到了富文本，浅浅记录一下如何使用以及踩到的坑。

第一步：安装依赖包

npm install vue-quill-editor
npm install quill

第二步：页面引入

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'

第三步：封装成组件（注：下面示例是在components文件下创建的editor.vue）

<template>
      <div>
        <quill-editor
            class="ql-editor"
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
      </div>
</template>

  <script>
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import Quill from 'quill' // 引入编辑器
  export default {
    name: 'Editor',
    components: {
      quillEditor
    },
    props: { // 接收父组件传过来的值
        placeholderContent: {
        type: String,
        default: ''
        }
    },
    data() {
      return {
        content: '<p>这个是输入的内容！</p>', // 双向数据绑定数据
        editorOption: {
            placeholder: '请输入',
            modules: {
                  toolbar: [
                     ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                     ['blockquote', 'code-block'], // 引用  代码块
                      [{ header: 1 }, { header: 2 }], // 1、2 级标题
                      [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                      [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                      [{ indent: '-1' }, { indent: '+1' }], // 缩进
                      [{ direction: 'rtl' }], // 文本方向
                      [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
                      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                      [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
                      [{ align: [] }], // 对齐方式
                      ['clean'], // 清除文本格式
                      ['link', 'image', 'video'] // 链接、图片、视频
                    ]
            }
          }
    }
    },
    // 监听placeholderContent是否变化，这里之所以用监听是实际使用时placeholderContent的值是接口返回的，不监听会导致页面的参数更新不及时。
    watch: {
        placeholderContent: {
	        handler: function(val) {
	            this.content = val
	        },
	        immediate: true,
	        deep: true
        }
    },
    created() {},
    methods: {
        // 失去焦点事件
        onEditorBlur(quill) {
          // 向父组件传编辑的内容
          this.$emit('submitFun', { data: this.content })
          },
        // 获得焦点事件
        onEditorFocus(quill) {
          console.log('editor focus!', quill)
        },
        // 准备富文本编辑器
        onEditorReady(quill) {
          console.log('editor ready!', quill)
        },
        // 内容改变事件
        onEditorChange({ quill, html, text }) {
          this.content = html
          // 向父组件传编辑的内容
          this.$emit('submitFun', { data: this.content })
        }
    }
  }
  </script>

  <style lang='scss' scope>
    // 给文本内容加高度，滚动条
	.quill-editor .ql-container {
	    min-height: 220px;
     }
	.ql-container {
	    min-height: 230px;
	 }
    .ql-snow .ql-tooltip [data-mode="link"]::before {
      content: "请输入链接地址:";
      left: 0;
    }
    .ql-snow .ql-tooltip.ql-editing {
      left: 0 !important;
    }
    .ql-snow .ql-tooltip {
      left: 0 !important;
    }
    .ql-snow .ql-editor {
      max-height: 300px;
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: "保存";
      padding-right: 0px;
    }
    .ql-snow .ql-tooltip[data-mode="video"]::before {
      content: "请输入视频地址:";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: "14px" !important;
      font-size: 14px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
      content: "10px" !important;
      font-size: 10px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
      content: "12px" !important;
      font-size: 12px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
      content: "16px" !important;
      font-size: 16px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
      content: "18px" !important;
      font-size: 18px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
      content: "20px" !important;
      font-size: 20px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
      content: "30px" !important;
      font-size: 30px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
      content: "32px" !important;
      font-size: 32px;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: "文本" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: "标题1" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: "标题2" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: "标题3" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: "标题4" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: "标题5" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: "标题6" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: "标准字体" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
      content: "衬线字体" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
      content: "等宽字体" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
      content: "宋体" !important;
      font-family: "SimSun";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
      content: "黑体" !important;
      font-family: "SimHei";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
      content: "微软雅黑" !important;
      font-family: "Microsoft YaHei";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
      content: "楷体" !important;
      font-family: "KaiTi";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
      content: "仿宋" !important;
      font-family: "FangSong";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
      content: "Arial" !important;
      font-family: "Arial";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
      content: "Times New Roman" !important;
      font-family: "Times New Roman";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
      content: "sans-serif" !important;
      font-family: "sans-serif";
    }
    .ql-font-SimSun {
      font-family: "SimSun";
    }
    .ql-font-SimHei {
      font-family: "SimHei";
    }
    .ql-font-Microsoft-YaHei {
      font-family: "Microsoft YaHei";
    }
    .ql-font-KaiTi {
      font-family: "KaiTi";
    }
    .ql-font-FangSong {
      font-family: "FangSong";
    }
    .ql-font-Arial {
      font-family: "Arial";
    }
    .ql-font-Times-New-Roman {
      font-family: "Times New Roman";
    }
    .ql-font-sans-serif {
      font-family: "sans-serif";
    }
    .ql-snow.ql-toolbar .ql-formats .ql-revoke {
      width: 20px;
      height: 20px;
      filter: grayscale(100%);
      opacity: 1;
    }
    .ql-snow.ql-toolbar .ql-formats .ql-revoke:hover {
      width: 20px;
      height: 20px;
      filter: none;
      opacity: 0.9;
    }
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
      border-color: #ccc;
      height: 125px;
      overflow: auto;
    }
  </style>

第四步：父组件中引入封装好的editor并使用

<template>
      <div>
        <editor :placeholder-content="placeholderContent" @submitFun="submitFun" />	 
      </div>
</template>

<script>
  import editor from './components/editor' // 引入的富文本地址需修改为自己创建子组件的文件地址
  export default {
   components: { editor },
    
    data() {
      return {
      		placeholderContent:'' // 富文本的内容
       }
    },
    created() {},
    methods: {
    	submitFun(val) {
        	this.placeholderContent = val.data
        	console.log('接收到子组件富文本编辑的内容', this.placeholderContent)
      	},
    }
  }
</script>

以上就是使用vue-quill-editor富文本的所有代码。

需注意以下两点：

（1）试一试字体加粗、字体倾斜、字体加下划线等是否有效果；若没有效果，查看一下项目引入的全局样式。全局定义了字体样式，会导致富文本对字体设置的样式失效。如下代码是查看全局样式reset.css中是否定义字体的样式，若有，注释一下就可以了。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  /* font-size: 100%;
  font: inherit;
  font-weight:normal; */ // 这三个字体样式注释一下，font-style:normal;font-size：normal也会有影响
  vertical-align: baseline;
}

以上功能基本都可以实现了。

（2）如果编辑的内容不是纯文本，需要上传图片，那么最好将上传图片的功能单独写一下。富文本自带的上传会将图片转译成base64，图片转译成base64存放在数据库，就可能会导致请求缓慢或字段超长的问题。

基本思路：写一个上传组件（这里用的是elementui的upload组件），点击富文本上传图片时调起组件的上传事件，上传图片至服务器，将返回来的url插入到vue-quill-editor的image标签。完整代码如下：

<template>
      <div>
        <el-upload
          name="file"
          class="imgUpload"
          action="#"
          :http-request="httpRequest"
          :show-file-list="false"
        >
        </el-upload>
        <quill-editor
            class="ql-editor"
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
      </div>
</template>

  <script>
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import Quill from 'quill' // 引入编辑器
  const optionsList = [
                      ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                      ['blockquote', 'code-block'], // 引用  代码块
                      [{ header: 1 }, { header: 2 }], // 1、2 级标题
                      [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                      [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                      [{ indent: '-1' }, { indent: '+1' }], // 缩进
                      [{ direction: 'rtl' }], // 文本方向
                      [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
                      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                      [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
                      [{ align: [] }], // 对齐方式
                      ['clean'], // 清除文本格式
                      ['link', 'image', 'video'] // 链接、图片、视频
                    ]
  export default {
    name: 'editorContent',
    components: {
      quillEditor
    },
    props: {
        placeholderContent: {
        type: String,
        default: ''
        }
    },
    data() {
      return {
        content: '<p>这个是输入的内容！</p>', // 双向数据绑定
        editorOption: {
            placeholder: '请输入',
            modules: {
                  toolbar: {
                    container: optionsList,
                    // 自定义处理插入图片 转为elementui的upload组件点击上传事件
                    handlers: {
                      image: function(val) {
                        if (val) {
                          document.querySelector('.imgUpload input').click()
                        } else {
                          this.quill.format('image', false)
                        }
                      }
                    }
                 }
            }
          }
      }
    },
     // 监听placeholderContent是否变化，这里之所以用监听是实际使用时placeholderContent的值是接口返回的，不监听会导致页面的参数更新不及时。
   watch: {
        placeholderContent: {
        handler: function(val) {
            this.content = val
        },
        immediate: true,
        deep: true
        }
    },
    created() {},
    methods: {
      // 图片上传请求
      httpRequest(data) {
        const _this = this
       	const uploadData = new FormData()
        uploadData.append('file', data.file)
        // 这里是上传图片到服务器的接口，根据自己实际接口去写
        const res = await this.$apis.xxx.xxxx(uploadData)
        const quill = this.$refs.myQuillEditor.quill
        const length = quill.getSelection().index
        // 我这边接口返回的地址参数是res.data,这里参数要换成接口传回的地址
        quill.insertEmbed(length, 'image', res.data)
        quill.setSelection(length + 1)
      },
        // 失去焦点事件
        onEditorBlur(quill) {
          this.$emit('submitFun', { data: this.content })
          },
        // 获得焦点事件
        onEditorFocus(quill) {
          console.log('editor focus!', quill)
        },
        // 准备富文本编辑器
        onEditorReady(quill) {
          console.log('editor ready!', quill)
        },
        // 内容改变事件
        onEditorChange({ quill, html, text }) {
          this.content = html
          this.$emit('submitFun', { data: this.content })
        }   
     }
  }
  </script>

  <style lang='scss' scope>
    // 给文本内容加高度，滚动条
.quill-editor .ql-container {
    min-height: 220px;
  }
  .ql-container {
    min-height: 230px;
  }
    .ql-snow .ql-tooltip [data-mode="link"]::before {
      content: "请输入链接地址:";
      left: 0;
    }
    .ql-snow .ql-tooltip.ql-editing {
      left: 0 !important;
    }
    .ql-snow .ql-tooltip {
      left: 0 !important;
    }
    .ql-snow .ql-editor {
      max-height: 300px;
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: "保存";
      padding-right: 0px;
    }
    .ql-snow .ql-tooltip[data-mode="video"]::before {
      content: "请输入视频地址:";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: "14px" !important;
      font-size: 14px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
      content: "10px" !important;
      font-size: 10px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
      content: "12px" !important;
      font-size: 12px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
      content: "16px" !important;
      font-size: 16px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
      content: "18px" !important;
      font-size: 18px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
      content: "20px" !important;
      font-size: 20px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
      content: "30px" !important;
      font-size: 30px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
      content: "32px" !important;
      font-size: 32px;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: "文本" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: "标题1" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: "标题2" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: "标题3" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: "标题4" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: "标题5" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: "标题6" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: "标准字体" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
      content: "衬线字体" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
      content: "等宽字体" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
      content: "宋体" !important;
      font-family: "SimSun";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
      content: "黑体" !important;
      font-family: "SimHei";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
      content: "微软雅黑" !important;
      font-family: "Microsoft YaHei";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
      content: "楷体" !important;
      font-family: "KaiTi";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
      content: "仿宋" !important;
      font-family: "FangSong";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
      content: "Arial" !important;
      font-family: "Arial";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
      content: "Times New Roman" !important;
      font-family: "Times New Roman";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
      content: "sans-serif" !important;
      font-family: "sans-serif";
    }
    .ql-font-SimSun {
      font-family: "SimSun";
    }
    .ql-font-SimHei {
      font-family: "SimHei";
    }
    .ql-font-Microsoft-YaHei {
      font-family: "Microsoft YaHei";
    }
    .ql-font-KaiTi {
      font-family: "KaiTi";
    }
    .ql-font-FangSong {
      font-family: "FangSong";
    }
    .ql-font-Arial {
      font-family: "Arial";
    }
    .ql-font-Times-New-Roman {
      font-family: "Times New Roman";
    }
    .ql-font-sans-serif {
      font-family: "sans-serif";
    }
    .ql-snow.ql-toolbar .ql-formats .ql-revoke {
      width: 20px;
      height: 20px;
      filter: grayscale(100%);
      opacity: 1;
    }
    .ql-snow.ql-toolbar .ql-formats .ql-revoke:hover {
      width: 20px;
      height: 20px;
      filter: none;
      opacity: 0.9;
    }
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
      border-color: #ccc;
      height: 125px;
      overflow: auto;
    }
  </style>