封裝vue-quill-editor實(shí)現(xiàn)富文本點(diǎn)擊圖標(biāo)、選擇文件、上傳圖片到服務(wù)端、上傳成功返回圖片地址、顯示圖片
實(shí)現(xiàn)點(diǎn)擊圖標(biāo)/按鈕,打開選擇文件需要 自定義工具欄 基礎(chǔ)寫法可參考:富文本基本使用
文章參考：引路文章之改造vue-quill-editor：實(shí)現(xiàn)圖片上傳到服務(wù)器再插入富文本

代碼實(shí)現(xiàn)如下：

<template>
    <div class="editor">
        <quillEditor v-model="content"  ref="rishTextEditor"  :options="editorOption"  @change="onChange" >
          <div id="toolbar" slot="toolbar">
            <!-- Add subscript and superscript buttons -->
            <span class="ql-formats" title="加粗"><button type="button" class="ql-bold"></button></span>
            <span class="ql-formats" title="斜體"><button type="button" class="ql-italic"></button></span>
            <!--顏色、字體大小等 下拉框要自己補(bǔ)充option value -->
            <select class="ql-align" title="對齊">
                    <option selected> </option>
                    <option value="center"></option>
                    <option value="right"></option>
                    <option value="justify"></option>
            </select>
           <!-- 上傳圖片圖標(biāo) -->
           <span class="ql-formats">
                <button type="button" @click="imgClick" style="outline:none" title="圖片上傳">
                <svg viewBox="0 0 18 18">
                   <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> 
                  <circle class="ql-fill" cx="6" cy="7" r="1"></circle> 
                  <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> 
                </svg>
                </button>
            </span>
     </div> 
</template>
<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  import {quillEditor} from 'vue-quill-editor'

  export default {
    name: "editor",
    components: { quillEditor },
    props: {
      value: {
        type: String
      },
      /*上傳圖片的地址*/
      uploadUrl: {
        type: String,
        default: '/'
      },
      /*上傳圖片的file控件name*/
      fileName: {
        type: String,
        default: 'file'
      },
      maxUploadSize:{
        type:Number,
        default: 1024 * 1024 * 500
      }
    },
    data() {
      return {
        content: '',
        editorOption: {
          modules: {
            toolbar: '#toolbar'
          }
        },
      }
    },
    methods: {
      onChange() {
        this.$emit('input', this.content)
      },
      /*選擇上傳圖片切換*/
      onFileChange(e) {
        var fileInput = e.target;
        if (fileInput.files.length === 0) {
          return
        }
      /*確定圖片要插入的位置*/
        this.editor.focus();
        if (fileInput.files[0].size > this.maxUploadSize) {
          this.$alert('圖片不能大于500KB', '圖片尺寸過大', {
            confirmButtonText: '確定',
            type: 'warning',
          })
        }
        var data = new FormData;
        data.append(this.fileName, fileInput.files[0]);
        /*請求接口*/
        this.$http.post(this.uploadUrl, data)
          .then(res => {
            if (res.data) {
              /*使用insertEmbed獲取到圖片url顯示在富文本框內(nèi)，支持圖片和視頻類型*/
              this.editor.insertEmbed(this.editor.getSelection().index, 'image', res.data)
            }
          })
      },
      /*點(diǎn)擊上傳圖片按鈕*/
      imgClick() {
        if (!this.uploadUrl) {
          console.log('no editor uploadUrl');
          return;
        }
        /*內(nèi)存創(chuàng)建input file 選擇文件*/
        var input = document.createElement('input');
        input.type = 'file';
        input.name = this.fileName;
        input.accept = 'image/jpeg,image/png,image/jpg,image/gif';
        input.onchange = this.onFileChange;
        input.click()
      }
    },
    computed: {
      editor() {
        return this.$refs.rishTextEditor.quill
      }
    },
    mounted() {
      this.content = this.value
    },
    watch: {
      'value'(newVal, oldVal) {
        if (this.editor) {
          if (newVal !== this.content) {
            this.content = newVal
          }
        }
      },
    }
  }
</script>

insertEmbed(index: Number, type: String, value: any, source: String = 'api'): Delta

該方法是用于在富文本框中顯示圖片/視頻，參數(shù)包含index【當(dāng)前文件插入的位置】，type【當(dāng)前文件的類型】，source【來源】
api docs:insertEmbed

小棨留言：文章描述或者語法理解不到位的地方，請大家多多指教！