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

1. html定義一個裝編輯器的DIV

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

2. npm安裝wangEditor

   npm install wangeditor --save  /*wangeditor須要小寫*/
   複製代碼

3. vue頁面導入wangEditor

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

4. 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() /* 建立編輯器 */ 
       } 
   }
   複製代碼

5. 渲染富文本編輯器

   mounted () {
      this.initEditor()
   }
   複製代碼