npm install vue-quill-editor --save

npm install quill --save

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';

<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動(dòng)畫
   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) {
         // 給個(gè)點(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ā)生改變的時(shí)候
   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>