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