<template>
  <div>
    <div id="editor" class="editor"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'editor',
  mounted () {
    var editor = new E('#editor')
    editor.customConfig.onchange = (html) => {
      this.formArticle.content = html
    }
    editor.create()
  }
}
</script>

<template>
  <div>
    <div id="editorMenu" class="editorMenu"></div>
    <div id="editor" class="editor"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'editor',
  mounted () {
    var editor = new E('#editorMenu', '#editor')
    editor.customConfig.onchange = (html) => {
      this.formArticle.content = html
    }
    editor.create()
  }
}
</script>

<style scoped>
.editorMenu {
 border: 1px solid #ccc;
}
.editor {
 margin-top: -1px;//將多出來的一像素邊框隱藏
 border: 1px solid #ccc;
 min-height: 400px;//編輯框最小高度
 height:auto;//編輯框高度超過最小高度會根據(jù)內(nèi)容高度自適應(yīng)
}
</style>

{
  // errno 即錯誤代碼，0 表示沒有錯誤。
  //    如果有錯誤，errno != 0，可通過下文中的監(jiān)聽函數(shù) fail 拿到該錯誤碼進行自定義處理
  "errno": 0,

  // data 是一個數(shù)組，返回若干圖片的線上地址
  "data": [
    "圖片1地址",
    "圖片2地址",
    "……"
  ]
}

<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left"></div>
  </div> 
</template>

<script>
 import E from 'wangeditor'
 export default {
   name: 'editorElem',
   data () {
    return {
     editorContent: '',
    }
   },
   props:['catchData'],  //接收父組件的方法
   mounted() {
     var editor = new E(this.$refs.editorElem)    //創(chuàng)建富文本實例
     editor.customConfig.onchange = (html) => {
       this.editorContent = html
       this.catchData(html) //把這個html通過catchData的方法傳入父組件
     }
     editor.customConfig.uploadImgServer = '你的上傳圖片的接口'
     editor.customConfig.uploadFileName = '你自定義的文件名'
     editor.customConfig.uploadImgHeaders = {
       'Accept': '*/*',
       'Authorization':'Bearer ' + token  //頭部token
     }
     editor.customConfig.menus = [     //菜單配置
       'head',
       'list', // 列表
       'justify', // 對齊方式
       'bold',
       'fontSize', // 字號
       'italic',
       'underline',
       'image', // 插入圖片
       'foreColor', // 文字顏色
       'undo', // 撤銷
       'redo', // 重復(fù)
      ] 
           //下面是最重要的的方法
     editor.customConfig.uploadImgHooks = {
       before: function (xhr, editor, files) {
         // 圖片上傳之前觸發(fā)
         // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件
         
         // 如果返回的結(jié)果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
         // return {
         //   prevent: true,
         //   msg: '放棄上傳'
         // }
       },
       success: function (xhr, editor, result) {
         // 圖片上傳并返回結(jié)果，圖片插入成功之后觸發(fā)
         // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務(wù)器端返回的結(jié)果
       this.imgUrl=Object.values(result.data).toString()
       },
       fail: function (xhr, editor, result) {
         // 圖片上傳并返回結(jié)果，但圖片插入錯誤時觸發(fā)
         // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務(wù)器端返回的結(jié)果
       },
       error: function (xhr, editor) {
         // 圖片上傳出錯時觸發(fā)
         // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
       },
       timeout: function (xhr, editor) {
         // 圖片上傳超時時觸發(fā)
         // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
       },

       // 如果服務(wù)器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置
       // （但是，服務(wù)器端返回的必須是一個 JSON 格式字符串?。。》駝t會報錯）
       customInsert: function (insertImg, result, editor) {
         // 圖片上傳并返回結(jié)果，自定義插入圖片的事件（而不是編輯器自動插入圖片?。。。?
         // insertImg 是插入圖片的函數(shù)，editor 是編輯器對象，result 是服務(wù)器端返回的結(jié)果

         // 舉例：假如上傳圖片成功后，服務(wù)器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
         let url = Object.values(result.data)   //result.data就是服務(wù)器返回的圖片名字和鏈接
         JSON.stringify(url)  //在這里轉(zhuǎn)成JSON格式
         insertImg(url)
         // result 必須是一個 JSON 格式字符串?。?！否則報錯
       }
     }
     
     
     editor.create() 
   },

<template>
 <div id="father">
  <wangeditor :catchData="catchData"></wangeditor>
 </div>
</template>

<script>
 import wangeditor from './wangeditor'
data(){
  return{
   content:""
  }
 },
methods:{
  catchData(value){
     this.content=value   //在這里接受子組件傳過來的參數(shù)，賦值給data里的參數(shù)
    }
 },
components: {
  wangeditor
  },
</script>