使用vue-quill-editor富文本 實現圖片上傳

1. 下載並引入

import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register('modules/ImageExtend', ImageExtend) // 別忘記加

2. 寫入標簽

<quill-editor class="edit" v-model.trim="content" ref="myQuillEditor" :options="editorOption"></quill-editor>

3. 配置信息 注意在data中配置

// 富文本框參數設置
      editorOption: {
        modules: {
          ImageExtend: {
            // 如果不作設置，即{}  則依然開啟復制粘貼功能且以base64插入
            name: "file", // 圖片參數名
            size: 3, // 可選參數 圖片大小，單位為M，1M = 1024kb
            action: "/api/admin/sys-file/uploadImg", // 服務器地址, 如果action為空，則采用base64插入圖片
            // response 為一個函數用來獲取服務器返回的具體圖片地址
            // 例如服務器返回{code: 200; data:{ url: 'baidu.com'}}
            // 則 return res.data.url
            response: res => {
              return res.data;
            },
            headers: xhr => {
              // 上傳圖片請求需要攜帶token的 在xhr.setRequestHeader中設置
              xhr.setRequestHeader(
                "Authorization",
                this.getCookie("username")
                  ? this.getCookie("username").token_type +
                      this.getCookie("username").access_token
                  : "Basic emh4eTp6aHh5"
              );
            }, // 可選參數 設置請求頭部
            sizeError: () => {}, // 圖片超過大小的回調
            start: () => {}, // 可選參數 自定義開始上傳觸發事件
            end: () => {}, // 可選參數 自定義上傳結束觸發的事件，無論成功或者失敗
            error: () => {}, // 可選參數 上傳失敗觸發的事件
            success: () => {}, // 可選參數  上傳成功觸發的事件
            change: (xhr, formData) => {
              // xhr.setRequestHeader('myHeader','myValue')
              // formData.append('token', 'myToken')
            } // 可選參數 每次選擇圖片觸發，也可用來設置頭部，但比headers多了一個參數，可設置formData
          },

          toolbar: {
            // 如果不上傳圖片到服務器，此處不必配置
            container: [
              ["bold", "italic", "underline", "strike"], // toggled buttons
              ["blockquote", "code-block"],

              [{ header: 1 }, { header: 2 }], // custom button values
              [{ list: "ordered" }, { list: "bullet" }],
              [{ script: "sub" }, { script: "super" }], // superscript/subscript
              [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
              [{ direction: "rtl" }], // text direction

              [{ size: ["small", false, "large", "huge"] }], // custom dropdown
              [{ header: [1, 2, 3, 4, 5, 6, false] }],

              [{ color: [] }, { background: [] }], // dropdown with defaults from theme
              [{ font: [] }],
              [{ align: [] }],
              ["image"] //去除video即可
            ], // container為工具欄，此次引入了全部工具欄，也可自行配置
            handlers: {
              image: function() {
                // 劫持原來的圖片點擊按鈕事件
                QuillWatch.emit(this.quill.id);
              }
            }
          }
        }
      }