轻量级富文本编辑器wangEditor结合vue使用方法示例

// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// 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>

上面字最多的地方好好看清楚，只有做了customInsert: function (insertImg, result, editor){}里的步骤，图片才会在富文本中显示，否则是不会自动显示。