vue-quill-editor是我們再使用vue框架的時候常用的一個富文本編輯器，在進(jìn)行富文本編輯的時候，我們往往要插入一些圖片，vue-quill-editor默認(rèn)的處理方式是直接將圖片轉(zhuǎn)成base64編碼，這樣的結(jié)果是整個富文本的html片段十分冗余，通常來講，每個服務(wù)器端接收的post的數(shù)據(jù)大小都是有限制的，這樣的話有可能導(dǎo)致提交失敗，或者是用戶體驗很差，數(shù)據(jù)要傳遞很久才全部傳送到服務(wù)器。

1.下載Vue-Quill-Editor

npm install vue-quill-editor --save

2.下載quill（Vue-Quill-Editor需要依賴）

npm install quill --save

3.使用

import { quillEditor } from "vue-quill-editor"; //調(diào)用編輯器import 'quill/dist/quill.core.css';import 'quill/dist/quill.snow.css';import 'quill/dist/quill.bubble.css';

本次使用到了富文本的封裝和上傳圖片,因要求使用element-ui框架，我上傳圖片的時候選擇了element-ui的Upload上傳組件將圖片上傳到服務(wù)器。再將圖片鏈接插入到富文本中，以達(dá)到最優(yōu)的體驗。

子組件中將改變的值，直接發(fā)送給父組件，父組件來完成邏輯處理

<template> <div>  <el-upload      //直接隱藏掉就好了，用功能不用樣式   v-show="false"   id="quill-upload"   action="/api/product/upload.do"   name="upload_file"   multiple   :limit="3"   list-type="picture"   :show-file-list="false"   :before-upload="beforeUpload"   :on-error="uploadError"   :on-success="handleExceed">   <el-button size="small" type="primary" ></el-button>   <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>  </el-upload>  <el-row v-loading="uillUpdateImg">   <quillEditor    ref="myQuillEditor"    @change="onEditorChange($event)"    v-model="value"    :options="editorOption"/>  </el-row> </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'export default { name: "richText", components:{quillEditor}, props:['content'],               //父組件傳過來的，將傳過來的渲染到富文本編輯器 data(){  return{   uillUpdateImg:false,            //根據(jù)圖片上傳狀態(tài)來確定是否顯示loading動畫   serverUrl:'', //上傳的圖片服務(wù)器地址   value:this.content,             //富文本內(nèi)容   editorOption: {               //符文本編輯器的配置    placeholder: '',    theme: 'snow',    modules: {     toolbar: {      container: [             // 工具欄配置, 默認(rèn)是全部       ['bold'],       ['italic'],       ['underline'],       ['strike'],       [{'list':'ordered'},{'list': 'bullet' }],       ['blockquote'], ['code-block'],       ['link'],       ['image'],       [{'list': 'ordered'}, {'list': 'bullet'}],      ],      handlers: {       'image': function (value) {        if (value) {         // 給個點(diǎn)擊觸發(fā)Element-ui，input框選擇圖片文件         document.querySelector('#quill-upload input').click()        } else {         this.quill.format('image', false);        }       }      }     }    }   }  } }, methods:{  onEditorChange({ quill, html, text }) {   //富文本編輯器內(nèi)容發(fā)生改變的時候   this.value = html   this.$emit('textChange',html)       //將富文本編輯器輸入的文本發(fā)送給父組件，父組件涉及提交添加或者更改  },  beforeUpload(){               //上傳圖片之前開啟loading   this.uillUpdateImg = true  },  uploadError(){               //圖片上傳失敗,關(guān)閉loading   this.uillUpdateImg = false   this.$message.error('圖片插入失敗')  },  handleExceed(response, file, fileList){   //圖片添加成功   let quill = this.$refs.myQuillEditor.quill   console.log(response)   if (response.status === 0) {    let length = quill.getSelection().index;    // 插入圖片 response.data.url為服務(wù)器返回的圖片地址    quill.insertEmbed(length, 'image', response.data.url)    // 調(diào)整光標(biāo)到最后    quill.setSelection(length + 1)   }else{    this.$message.error('圖片插入失敗')   }   this.fileList = fileList   this.uillUpdateImg = false  }, }}</script><style scoped></style>