Vue富文本编辑器（vue-quill-editor）使用✔✔

最近工作中需求使用一款富文本编辑器，最终选择了vue-quill-editor，之所以选择vue-quill-editor，是看上了它的轻量以及外观简洁的优势。打开官方文档，直接上手配置，各种报错，踩了很多坑，遇到的主要问题有以下几个

1. 字体大小无法设置
2. 工具栏样式错位
3. 图片上传报错
4. 编辑器高度无法设置

（1）安装

npm install vue-quill-editor --save

二：两种引用方法，全局引用和局部引用

1.全局引用，项目入口文件中（main.js）注册

import Vue from 'vue'
import VueQuillEditor  from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor)

2.局部引用，在需调用的vue页面中声明（私有化）

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { Quill, quillEditor } from "vue-quill-editor";
export default {
  components: {
    quillEditor
  }
}

三，组件中使用

 data里保单addForm绑定到富文本编辑器的v-model

 效果图：

 可以参考https://blog.csdn.net/qq_41842461/article/details/126488189