技術標籤：Vue

前言：
vue-quill-editor富文字框外掛的使用十分廣泛，最近公司需要寫一個指導文件，但發現上傳圖片時，是直接將圖片轉成base64顯示的，此時提交的文字編輯器內容肯定也是一大串的html+圖片base64字串，這當然不能直接存到資料庫資料庫去，除非你不怕後端的一頓暴揍

解決思路：
vue-quill-editor有開放很多的擴充套件和自定義方法，我們通過在mounted初始化中獲取自己的toolbar工具欄中的image，劫持image的handler方法，呼叫我們頁面上一個隱藏的input:file上傳檔案。通過input的change方法去呼叫介面，獲取返回的url，下面就直接上步驟

一、下載vue-quill-editor外掛

npm install vue-quill-editor --save

由於vue-quill-editor需要依賴quill，所以沒有的quill的也要下載

npm install quill --save

二、頁面中匯入

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
 
 {
  components: {
    quillEditor
  }
}

三、頁面中使用

<template>
  <div id="app">
    <quill-editor :options="editorOption" v-model="content" ref="myQuillEditor">
    </quill-editor>
    <input
      type="file"
      hidden
      accept
 
=".jpg,.png"
      ref="fileBtn"
      @change="handleChange"
    />
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import http from "./script/httpRequest.js";
import axios from "axios";
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 {
  data() {
    return {
      content: "",
      editorOption: {
        placeholder: "請輸入資訊詳情",
      },
    };
  },
  components: {
    quillEditor,
  },
  mounted() {
    if (this.$refs.myQuillEditor) {
      //myQuillEditor改成自己的
      this.$refs.myQuillEditor.quill
        .getModule("toolbar")
        .addHandler("image", this.imgHandler);
      //這裡初始化，劫持toolbar的image的handler方法，在mounted中處理
    }
  },
  methods: {
    submit() {
      console.log(this.content);
    },
    imgHandler(state) {
      if (state) {
        //觸發input的單擊 ，fileBtn換成自己的
        this.$refs.fileBtn.click();
      }
    },
    handleChange(e) {
      const files = Array.prototype.slice.call(e.target.files);
      if (!files) {
        return;
      }
      let form = new FormData();
      form.append("file", files[0]);
      //由於我的介面是base64上傳到伺服器的，需要轉成base64，否則直接將form檔案上傳即可
      let reader = new FileReader();
      reader.readAsDataURL(files[0]);
      reader.onload = (e) => {
        //將url改成自己的地址
        axios.post(url, {
            image: e.target.result, //如果是是以檔案流上傳，則改成form
          })
          .then((res) => {
            console.log(res);
            //這裡設定為空是為了聯絡上傳同張圖可以觸發change事件
            this.$refs.fileBtn.value = "";
            if (res.status === 200) {
              let selection = this.$refs.myQuillEditor.quill.getSelection();
              //這裡就是返回的圖片地址，如果介面返回的不是可以訪問的地址，要自己拼接
              let imgUrl = res.data.imgUrl;
              //獲取quill的游標，插入圖片
              this.$refs.myQuillEditor.quill.insertEmbed(
                selection != null ? selection.index : 0,
                "image",
                imgUrl
              );
              //插入完成後，游標往後移動一位
              this.$refs.myQuillEditor.quill.setSelection(selection.index + 1);
            }
          });
      };
    },
  },
};
</script>

四、跨域問題
如果沒有配置跨域的，頁面會報跨域的錯誤，這也很容易理解，畢竟伺服器端的域名和自己跑的域名埠不一致，那此時需要去配置一下
1.現在新版的vue腳手架已經沒有vue.config.js這個檔案了，如果有就直接在這個檔案下配置，沒有則在和package.json的同級目錄下新增vue.config.js檔案

module.exports = {
    devServer: {
        open: true, //是否自動彈出瀏覽器頁面
        host: "localhost", 
        port: '8084', 
        proxy: {
            '/api': {
                target: 'http://localhost:7001', //API伺服器的地址
                changeOrigin: true,
            }
        },
        headers: {
            'Access-Control-Allow-Origin': '*',
        }
    }
}