一、npm 安裝 vue-quill-editor 
二、在main.js中引入

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)

 三、將富文字編輯器提出作為元件，上傳圖片到七牛，在獲取七牛返回的圖片url插入到富文字中。

<template>
  <div>
    <quill-editor :options="editorOption" v-model="content" ref="QuillEditor" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" 
        @change="onEditorChange($event)" @ready="onEditorReady($event)"></quill-editor>
        <!-- 檔案上傳input 將它隱藏-->
        <el-upload class="upload-demo" :action="qnLocation" :before-upload='beforeUpload' :data="uploadData" :on-success='upScuccess'
        ref="upload" style="display:none">
        <el-button size="small" type="primary" id="imgInput" element-loading-text="插入中,請稍候">點選上傳</el-button>
    </el-upload>
  </div>
</template>

<script>
import * as Quill from 'quill' // 引入編輯器
import { upQiniu } from '@/api/manage/***'  //獲取七牛token
export default {
  name: 'quilleditor',
  props: {
    quillData: {
      type: String,
      default: false
    }
  },
  data() {
    return {
        bucketQuery: {
          bucket: 'website-image'
        },
        uploadData: {},
        content:this.quillData, // 富文字編輯器內容
        editorOption:{ // 初始化富文字編輯器
          modules:{
            toolbar:[
              ['bold', 'italic', 'underline', 'strike', 'link','image', 'video'],
              [{ 'header': 1 }, { 'header': 2 }],
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              [{ 'indent': '-1'}, { 'indent': '+1' }],
              [{ 'align': [] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'font': [] }],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              ['blockquote', 'code-block'],
              [{ 'size': ['small', false, 'large', 'huge'] }]
            ]
          }
        },
        qiniuaddr: 'pd6rnk9ck.bkt.clouddn.com'  // 這是七牛雲空間的外鏈預設域名
      }
    }, 
    computed: {
      // 上傳七牛的actiond地址，http 和 https 不一樣
      qnLocation () {
        return location.protocol === 'http:' ? 'http://upload.qiniu.com' : 'https://up.qbox.me'
      }
    }, 
    methods: {
      // 圖片上傳之前調取的函式
      beforeUpload (file) {
        return this.qnUpload(file)
      },
      // 圖片上傳前獲得資料token資料
      qnUpload (file) {
        const suffix = file.name.split('.')
        const ext = suffix.splice(suffix.length - 1, 1)[0]
        if (this.uploadType === 'image') { // 如果是點選插入圖片
          // TODO 圖片格式/大小限制
          return upQiniu(this.bucketQuery).then(res => {
            this.uploadData = {
              // key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`,  //重新命名
              token: res.data
            }
          })
        } else if (this.uploadType === 'video') { // 如果是點選插入視訊
          return upQiniu(bucketQuery).then(res => {
            this.uploadData = {
              // key: `video/${suffix.join('.')}_${new Date().getTime()}.${ext}`,  //重新命名
              token: res
            }
          })
        }
      },   
      // 圖片上傳成功回撥 插入到編輯器中
      upScuccess (e, file, fileList) {
        let vm = this
        let url = ''
        if (this.uploadType === 'image') { // 獲得檔案上傳後的URL地址
          url = 'http://' + this.qiniuaddr + '/' + e.key
        } else if (this.uploadType === 'video') {
          url = 'http://' + this.qiniuaddr + '/' + e.key
        }
        if (url != null && url.length > 0) { // 將檔案上傳後的URL地址插入到編輯器文字中
          let value = url
          // API: https://segmentfault.com/q/1010000008951906
          // this.$refs.myTextEditor.quillEditor.getSelection();
          // 獲取游標位置物件，裡面有兩個屬性，一個是index 還有 一個length，這裡要用range.index，即當前游標之前的內容長度，然後再利用 insertEmbed(length, 'image', imageUrl)，插入圖片即可。
          vm.addRange = vm.$refs.QuillEditor.quill.getSelection()
          value = value.indexOf('http') !== -1 ? value : 'http:' + value
          vm.$refs.QuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, Quill.sources.USER) // 呼叫編輯器的 insertEmbed 方法，插入URL
        } else {
          this.$message.error(`${vm.uploadType}插入失敗`)
        }
        this.$refs['upload'].clearFiles() // 插入成功後清除input的內容
      },
        
      // 點選圖片ICON觸發事件
      imgHandler (state) {
        this.addRange = this.$refs.QuillEditor.quill.getSelection()
        if (state) {
          let fileInput = document.getElementById('imgInput')
          fileInput.click() // 加一個觸發事件
        }
        this.uploadType = 'image'
      },
      // 點選視訊ICON觸發事件
      videoHandler (state) {
        this.addRange = this.$refs.QuillEditor.quill.getSelection()
        if (state) {
          let fileInput = document.getElementById('imgInput')
          fileInput.click() // 加一個觸發事件
        }
        this.uploadType = 'video'  
      },
      created () {
        this.$refs = {
          QuillEditor: HTMLInputElement,
          imgInput: HTMLInputElement
        }
      },
      onEditorFocus() {
  
      },
      onEditorReady() {
  
      },
      onEditorBlur() {
  
      },
      onEditorChange({editor, html, text}) {
        this.$emit('change-content',html)
        // console.log(html)
      }
    },
    // 頁面載入後執行 為編輯器的圖片圖示和視訊圖示繫結點選事件
    mounted () {
      // 為圖片ICON繫結事件 getModule 為編輯器的內部屬性
    //   console.log(this.$refs.QuillEditor.quill)
      this.$refs.QuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
      this.$refs.QuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler) // 為視訊ICON繫結事件
      this.content = this.quillData

      let that = this
      setTimeout(function(){
        // console.log(that.quillData)
        that.content = that.quillData
      },200)
    }
}
</script>
 

四、引入富文字元件，listEditQuery.rule是我這邊編輯功能時需要的欄位。

        這裡需要獲取富文字穿給父元件的值（@change-content="listenToChild"），通過此方法獲取

<!-- 引入富文字編輯器 -->
<quill-editor @change-content="listenToChild" v-if="flag" :quillData="listEditQuery.rule"></quill-editor>

import quillEditor from '@/components/Quilleditor'   //這裡根據自己元件所放位置配置
import { ImportDetail } from '@/api/manage/***'

export default {
    data(){
        return{
            listEditQuery:{},
            flag:false  //在父元件定義一個flag，當資料獲得的之後再進行子元件的渲染
        }
    }
    components: {
      quillEditor
    },
    methods: {
      getList(){
        this.listLoading = true
        ImportDetail(this.listQuery).then(response => {
          this.listLoading = false
          this.listEditQuery = response.data 
          this.flag = true
 
        }).catch(err => {
          console.log(err, '沒有資料1')
          this.tableData = []
          this.listLoading = false
        })
        
      },  
      //富文字 賽事章程
      listenToChild(val){
        this.listEditQuery .rule = val
        // console.log(this.listEditQuery.rule)
      }
    },

    mounted () {
      this.getList()
    }
}