? ?? ? vue-quill-editor是我們再使用vue框架的時候常用的一個富文本編輯器，在進行富文本編輯的時候，我們往往要插入一些圖片，vue-quill-editor默認的處理方式是直接將圖片轉(zhuǎn)成base64編碼，這樣的結(jié)果使整個富文本的html片段十分冗余，通常來講，每個服務器端接收的post的數(shù)據(jù)大小都是有限制的，這樣的話有可能導致提交失敗，或者是用戶體驗很差，數(shù)據(jù)要傳遞很久才全部傳送到服務器。
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上傳組件將圖片上傳到服務器。再將圖片鏈接插入到富文本中，以達到最優(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:'',  //上傳的圖片服務器地址
      value:this.content,                         //富文本內(nèi)容
      editorOption: {                             //符文本編輯器的配置
        placeholder: '',
        theme: 'snow',
        modules: {
          toolbar: {
            container: [                          // 工具欄配置, 默認是全部
              ['bold'],
              ['italic'],
              ['underline'],
              ['strike'],
              [{'list':'ordered'},{'list': 'bullet' }],
              ['blockquote'], ['code-block'],
              ['link'],
              ['image'],
              [{'list': 'ordered'}, {'list': 'bullet'}],
            ],
            handlers: {
              'image': function (value) {
                if (value) {
                  // 給個點擊觸發(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為服務器返回的圖片地址
        quill.insertEmbed(length, 'image', response.data.url)
        // 調(diào)整光標到最后
        quill.setSelection(length + 1)
      }else{
        this.$message.error('圖片插入失敗')
      }
      this.fileList = fileList
      this.uillUpdateImg = false
    },
  }
}
</script>

<style scoped>

</style>

配置中的handlers是用來定義自定義程序的，然而我們配置完后會懵逼地發(fā)現(xiàn)，整個富文本編輯器的工具欄的圖片上傳等按鈕都不見了 只保留了幾個基本的富文本功能。

這個是因為添加自定義處理程序?qū)⒏采w默認的工具欄和主題行為
因此我們要再自行配置下我們需要的工具欄，所有功能的配置如下，大家可以按需配置，這里看起來一大堆，也不美觀，大家也可以配置一個單獨的config文件引入。

??????有一點注意的地方，父組件中傳入子組件中的值，子組件里面發(fā)生改變以后再傳給父組件。將變量時存放在props屬性中的，我們在調(diào)用變量的時候是跟data里面的變量一樣的，都是通過this.變量來調(diào)用，這個問題就是說父組件傳入子組件的變量是不能this.變量直接改變的，要在data或者computed屬性里面重新定義一個變量，或者監(jiān)聽props接受變量的變化。改變data或者computed屬性里面的變量就不會報錯了。