在Vue中使用wangeditor创建富文本编辑器的完整指南

<template>
  <div>
    <div ref="editor"></div>
  </div>
</template>
 
<script>
import E from 'wangeditor'
 
export default {
  name: 'WangEditor',
  data() {
    return {
      editor: null,
      editorContent: ''
    }
  },
  mounted() {
    this.editor = new E(this.$refs.editor)
    this.editor.customConfig.onchange = (html) => {
      this.editorContent = html
    }
    this.editor.customConfig.uploadImgServer = '你的上传图片接口'
    this.editor.customConfig.uploadFileName = '你的文件字段名'
    this.editor.customConfig.uploadImgHooks = {
      customInsert: (insertImg, result) => {
        // result 即服务器返回的结果
        insertImg(result.data.url)
      }
    }
    this.editor.create()
  },
  methods: {
    getContent() {
      return this.editorContent
    }
  }
}
</script>

这个例子展示了如何在Vue中创建和配置wangeditor编辑器。在mounted钩子中初始化编辑器，并设置自定义上传图片的服务器地址和字段名，以及上传图片后的处理函数。提供了getContent方法用于获取编辑器内容。