使用教程(注意細看總結部分，寫了幾點，希望有所幫助)：
1、安裝外掛：npm install vue-quill-editor
2、安裝外掛依賴：npm install quill
3、main.js檔案中引入：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)
new Vue({
 VueQuillEditor,render: h => h(App),}).$mount('#app')

4、vue頁面中使用(程式碼完整，複製就能使用)：

<template>
 <div id="quillEditorId">
  <el-upload
   class="avatarUploader"
   action="https://jsonplaceholder.typicode.com/posts/"
   :show-file-list="false"
   :on-success="handleAvatarSuccess"
   :before-upload="beforeAvatarUpload"
  >
   <img v-if="imageUrl" :src="imageUrl" class="avatar" />
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
  <quill-editor
   id="myQuillEditorId"
   ref="myQuillEditor"
   v-model="ruleForm.editeContent"
   :options="editorOption"
   @change="handelEditorChange($event)"
  >
  </quill-editor>
 </div>
</template>
<script>
const toolbarOptions = [
 ['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: ['small',false,'large','huge'] }],//字型大小
 [{ header: [1,2,3,4,5,6,false] }],//幾級標題
 [{ color: [] },{ background: [] }],//字型顏色，字型背景顏色
 [{ font: [] }],//字型
 [{ align: [] }],//對齊方式
 ['clean'],//清除字型樣式
 ['image'],//上傳圖片、上傳視訊(video)、超連結(link)
]
export default {
 data() {
  return {
   imageUrl: '',editeContent: '',editorOption: {
    modules: {
     clipboard: {
      // 貼上版，處理貼上時候的自帶樣式
      matchers: [[Node.ELEMENT_NODE,this.HandleCustomMatcher]],},toolbar: {
      container: toolbarOptions,// 工具欄
      handlers: {
       image: function(value) {
        if (value) {
         // 獲取隱藏的上傳圖片的class，不一定是.el-icon-plus。觸發上傳圖片事件
         document.querySelector('.el-icon-plus').click()
        } else {
         this.quill.format('image',false)
        }
       },placeholder: '',}
 },computed: {},async mounted() {},methods: {
  handleAvatarSuccess(res,file) {
   // 圖片上傳成功後的回撥
   console.log(res,file)
  },beforeAvatarUpload(data) {
   // 思路：上傳圖片至服務後，拿到返回的圖片地址。直接建立image標籤插入游標所在的位置
   // 圖片上傳服務(本地服務或者阿里雲服務)
   // 獲取富文字元件例項
   let quill = this.$refs.myQuillEditor.quill
   // 上傳服務成功後，按根據游標位置把圖片插入編輯器中
   if (data.url) {
    // 獲取游標所在位置,data.url表示上傳服務後返回的圖片地址
    let length = quill.getSelection().index
    // 插入圖片，data.url為服務返回的圖片連結地址
    quill.insertEmbed(length,'image',data.url)
    // 調整游標到最後
    quill.setSelection(length + 1)
   } else {
    this.$message.closeAll()
    this.$message.error('圖片插入失敗')
   }
  },handelEditorChange(el) {
   console.log(el,'el')
  },HandleCustomMatcher(node,Delta) {
   // 文字、圖片等，從別處複製而來，清除自帶樣式，轉為純文字
   let ops = []
   Delta.ops.forEach(op => {
    if (op.insert && typeof op.insert === 'string') {
     ops.push({
      insert: op.insert,})
    }
   })
   Delta.ops = ops
   return Delta
  },}
</script>
<style scoped lang="scss">
#quillEditorId {
 .avatarUploader {
  display: none; // 隱藏上傳圖片元件
 }
}
</style>

總結：

1、變數toolbarOptions表示自定義的工具欄，可以參照官網(官網寫的比較簡單)或者細看本文程式碼(有詳細註釋)；
2、如果不單獨處理圖片，圖片會被直接轉義成base64，跟隨DOM一塊兒上傳服務；
3、本文對圖片做了自定義處理，選擇本地圖片時，會單獨上傳到服務，返回地址後，直接插入到富文字編輯中的當前節點。看程式碼中editorOption的handlers的image函式，以及插入富文字編輯器當前游標函式beforeAvatarUpload，程式碼中有詳細註釋；
4、貼上板，變數clipboard。如果需要清理複製的自帶樣式，使用貼上板進行清理，函式HandleCustomMatcher；

到此這篇關於Vue使用富文字編輯器Vue-Quill-Editor(含圖片自定義上傳服務、清除複製貼上樣式等)的文章就介紹到這了,更多相關vue富文字編輯器Vue-Quill-Editor內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！