vue2 引入富文本组件

### 在 Vue 2 中集成和配置富文本编辑器

#### 安装依赖库
为了在 Vue 2 项目中使用 WangEditor 富文本编辑器，首先需要安装 `wangeditor` 库。可以通过 npm 或 yarn 来完成这一步骤。

npm install wangeditor --save

或者

yarn add wangeditor

#### 创建 WangEditor 组件
创建一个新的 Vue 组件文件命名为 `WangEditor.vue` 并按照如下方式编写代码：

<template>
  <div ref="editorElem" style="text-align:left"></div>
</template>

<script>
import E from 'wangeditor'

export default {
  name: "WangEditor",
  data() {
    return {
      editor: null,
      info_: ''
    }
  },
  mounted() {
    this.editor = new E(this.$refs.editorElem);
    this.editor.create();
    
    // 设置 onchange 回调函数，当内容变化时触发
    this.editor.config.onchange = (newHtml) => {
      this.info_ = newHtml;
    };
  },
}
</script>

此部分展示了如何初始化 WangEditor 实例以及设置其基本属性[^1]。

#### 使用组件
可以在其他页面或父级组件里通过 `<wang-editor></wang-editor>` 的形式来加载这个新创建的子组件。

#### 图片自定义上传功能
对于图片上传的需求，可以扩展上述组件逻辑以支持自定义上传接口。修改后的 JavaScript 部分如下所示:

mounted() {
  const editor = new E(this.$refs.editorElem);

  editor.config.uploadImgServer = '/your/upload/api'; // 自己的服务端地址
  
  // 添加请求头, 如果有鉴权需求的话
  editor.config.headers = {
    Authorization: 'Bearer your-token'
  };

  editor.config.withCredentials = true; // 跨域携带 cookie 

  editor.create();

  editor.config.onchange = (newHtml) => {
    this.info_ = newHtml;
  };
},
methods: {
  getHtml() { 
    return this.info_; 
  } 
}

这里指定了服务器端接收图片上传的具体 API 地址，并设置了必要的 HTTP 请求头部信息以便于身份验证和其他跨域处理[^2]。