vue 如何使用 wangeditor

使用 WangEditor 在 Vue 中可以通过以下步骤实现：

1. 首先安装 WangEditor：

npm install wangeditor --save

2. 在需要使用编辑器的组件中引入 WangEditor 的样式文件和 JavaScript 文件：

<template>
  <div>
    <div ref="editorElem" :style="{height: '500px'}"></div>
  </div>
</template>

<script>
import WangEditor from 'wangeditor'

export default {
  mounted() {
    const editor = new WangEditor(this.$refs.editorElem)
    editor.create()
  }
}
</script>

<style>
@import '~wangeditor/release/wangEditor.min.css';
</style>

这里我们使用了 `ref` 属性来获取 `editorElem` 元素，并将其传递给 `WangEditor` 的构造函数。然后我们调用 `create` 方法来创建编辑器实例。

3. 在组件销毁时，需要销毁编辑器实例：

<script>
import WangEditor from 'wangeditor'

export default {
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.editor = new WangEditor(this.$refs.editorElem)
    this.editor.create()
  },
  beforeDestroy() {
    this.editor.destroy()
  }
}
</script>

这里我们将 `editor` 实例保存在了组件的 `data` 中，在组件销毁时调用 `destroy` 方法销毁实例。