vue前端富文本框使用（wangeditor富文本框）

要在Vue中使用wangeditor富文本编辑器，你需要按照以下步骤操作：

1. 安装wangeditor：

npm install wangeditor --save

2. 在Vue组件中引入并使用wangeditor：

<template>
  <div ref="editor"></div>
</template>
 
<script>
import E from 'wangeditor'
 
export default {
  name: 'EditorComponent',
  data() {
    return {
      editor: null,
      editorContent: ''
    }
  },
  mounted() {
    // 创建编辑器
    this.editor = new E(this.$refs.editor)
    this.editor.customConfig.onchange = (html) => {
      this.editorContent = html
    }
    this.editor.create()
  },
  beforeDestroy() {
    // 组件销毁前，销毁编辑器
    this.editor.destroy()
  }
}
</script>

在这个例子中，我们创建了一个名为EditorComponent的Vue组件，在该组件的mounted生命周期钩子中初始化了wangeditor编辑器，并将其挂载到模板中<div ref="editor"></div>定义的DOM元素上。同时，我们定义了一个editorContent变量来保存编辑器内的HTML内容。当编辑器内容发生变化时，我们通过自定义的onchange回调来更新editorContent。最后，在组件销毁前，我们调用this.editor.destroy()来清理编辑器资源。