vue2wangEditor

### 如何在 Vue 2 中集成和使用 WangEditor 富文本编辑器

#### 安装依赖库
为了能够在 Vue 2 项目中使用 WangEditor，需要先安装对应的 npm 包。可以通过命令行执行如下指令完成安装：

npm install wangeditor --save

这会将 WangEditor 添加到项目的依赖列表里[^2]。

#### 初始化编辑器实例
创建一个新的 Vue 组件用于承载富文本编辑器，在 `mounted` 生命周期钩子函数内初始化 WangEditor 实例，并将其挂载至指定 DOM 节点上。下面是一个简单的实现方式：

<template>
  <div id="editor"></div> <!-- 编辑器容器 -->
</template>

<script>
import E from 'wangeditor';

export default {
  name: "RichTextEditor",
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    this.editor = new E('#editor'); // 初始化编辑器并传入目标节点的选择器
    this.editor.create();           // 创建编辑器实例
  }
};
</script>

这段代码展示了如何在一个新的 Vue 组件内部引入 WangEditor 并启动它。注意这里选择了 ID 为 `editor` 的 HTML 元素作为编辑区域。

#### 配置上传图片和其他高级设置
WangEditor 支持多种插件式的功能扩展，比如文件上传、视频嵌入等。对于图片上传来说，可以按照官方文档说明调整配置项，以便更好地适应实际应用场景的需求：

this.editor.config.uploadImgServer = '/your/image/upload/endpoint'; // 设置服务器端接收地址
this.editor.config.withCredentials = true;                          // 如果跨域请求携带 cookie，则开启此选项
// 更多配置...
this.editor.create();

以上片段修改了默认行为使得用户可以在文章中插入来自本地或其他来源的图像资源。

#### 销毁编辑器以避免内存泄露
当组件被卸载时应当记得调用 `destroy()` 方法释放关联的对象引用，从而有效预防潜在的内存泄漏问题：

beforeDestroy() {
  if (this.editor != null) {
    this.editor.destroy();
    this.editor = null;
  }
}

上述方法确保每当页面刷新或者导航离开当前视图之前都会安全地清理掉不再使用的对象实例[^1]。