vue如何使用富文字編輯器wangEditor自定義圖片上傳（解決跨域問題）

html定義一個裝編輯器的DIV

<template>
    <div id="editor"></div>
</template>
複製程式碼

npm安裝wangEditor

npm install wangeditor --save  /*wangeditor需要小寫*/
複製程式碼

vue頁面匯入wangEditor

import Editor from 'wangeditor' 
export default {
    data () {
        return {
            editor: ''
        } 
    }
}
複製程式碼

vue頁面例項化wangEditor

methods: { 
    async initEditor () { 
        this.editor = new Editor('#editor') /* 括號裡面的對應的是html裡div的id */
        /* 配置選單欄 */  
        this.editor.customConfig.menu = [
            'head',  // 標題
            'bold',  // 粗體
            'fontSize',  // 字號
            'fontName',  // 字型
            'italic',  // 斜體
            'underline',  // 下劃線
            'strikeThrough',  // 刪除線
            'foreColor',  // 文字顏色
            'backColor',  // 背景顏色
            'link',  // 插入連結
            'list',  // 列表
            'justify',  // 對齊方式
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入圖片
            'table',  // 表格
            'code',  // 插入程式碼
            'undo',  // 撤銷
            'redo'  // 重複
        ]    
        this.editor.customConfig.uploadImgMaxLength = 5 / 限制一次最多上傳 5 張圖片 */ 
        this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 /* 將圖片大小限制為 3M 預設為5M / 
        /* 自定義圖片上傳（支援跨域和非跨域上傳，簡單操作）*/ 
        this.editor.customConfig.customUploadImg = async (files, insert) => { 
            /* files 是 input 中選中的檔案列表 */ 
            let formData = new FormData() 
            formData.append('file', files[0]) 
            let data = await this.upload(formData) 
            /* upload方法是後臺提供的上傳圖片的介面 */
            /* insert 是編輯器自帶的 獲取圖片 url 後，插入到編輯器的方法 上傳程式碼返回結果之後，將圖片插入到編輯器中*/ 
            insert(data.imgUrl)
        } 
        this.editor.customConfig.onchange = (html) => {
            /* html 即變化之後的內容 */ 
        } 
        this.editor.create() /* 建立編輯器 */ 
    } 
}
複製程式碼

渲染富文字編輯器

mounted () {
   this.initEditor()
}
複製程式碼