wangeditor使用vue2

WangEditor 是一款轻量级的 Web 富文本编辑器，它易于使用且功能强大，非常适合在网页中嵌入使用。WangEditor 支持多种框架，包括 Vue.js。在 Vue 2 中使用 WangEditor，通常需要遵循以下步骤：

1. 引入 WangEditor 到你的项目中，可以通过 npm 安装或者直接通过 script 标签引入。
2. 在你的 Vue 组件中引入 WangEditor，并设置相应的数据和方法来初始化编辑器。
3. 创建一个容器元素，这个元素将作为编辑器的挂载点。
4. 在 Vue 的生命周期钩子函数中（比如 `mounted`），初始化 WangEditor 实例，将编辑器绑定到你之前创建的容器元素上。

下面是一个简单的示例代码，展示了如何在 Vue 2 组件中集成 WangEditor：

<template>
  <div>
    <div ref="editorContainer" style="height: 500px;"></div>
  </div>
</template>

<script>
// 导入 Wangeditor
import E from 'wangeditor';

export default {
  name: 'WangEditorComponent',
  mounted() {
    // 创建编辑器实例
    const editor = new E(this.$refs.editorContainer);
    
    // 初始化编辑器
    editor.config.onchange = (newHtml) => {
      // 当编辑器内容发生变化时，你可以在这里处理新内容
      // 例如将编辑器内容赋值给某个数据属性
    };
    
    // 创建完成后的操作
    editor.create();
  },
  beforeDestroy() {
    // 组件销毁前，销毁编辑器实例，防止内存泄漏
    if (this.editor) {
      this.editor.destroy();
      this.editor = null;
    }
  }
};
</script>

<style>
/* 根据需要编写相应的样式 */
</style>

在上面的代码中，我们通过 Vue 的 `ref` 属性获取到容器元素的引用，并在 `mounted` 钩子中创建 WangEditor 实例。注意，我们在 `beforeDestroy` 钩子中销毁了编辑器实例，以确保组件销毁时编辑器不会造成内存泄漏。