<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;//編輯框高度超過最小高度會根據內容高度自適應}</style>

{  // errno 即錯誤代碼，0 表示沒有錯誤。  //    如果有錯誤，errno != 0，可通過下文中的監聽函數 fail 拿到該錯誤碼進行自定義處理  "errno": 0,  // data 是一個數組，返回若干圖片的線上地址  "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)    //創建富文本實例     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', // 重復      ]            //下面是最重要的的方法     editor.customConfig.uploadImgHooks = {       before: function (xhr, editor, files) {         // 圖片上傳之前觸發         // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件                  // 如果返回的結果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳         // return {         //   prevent: true,         //   msg: '放棄上傳'         // }       },       success: function (xhr, editor, result) {         // 圖片上傳并返回結果，圖片插入成功之后觸發         // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果       this.imgUrl=Object.values(result.data).toString()       },       fail: function (xhr, editor, result) {         // 圖片上傳并返回結果，但圖片插入錯誤時觸發         // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果       },       error: function (xhr, editor) {         // 圖片上傳出錯時觸發         // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象       },       timeout: function (xhr, editor) {         // 圖片上傳超時時觸發         // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象       },       // 如果服務器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置       // （但是，服務器端返回的必須是一個 JSON 格式字符串！！！否則會報錯）       customInsert: function (insertImg, result, editor) {         // 圖片上傳并返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）         // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果         // 舉例：假如上傳圖片成功后，服務器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：         let url = Object.values(result.data)   //result.data就是服務器返回的圖片名字和鏈接         JSON.stringify(url)  //在這里轉成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   //在這里接受子組件傳過來的參數，賦值給data里的參數    } },components: {  wangeditor  },</script>