vue2引入富文本编辑器

### 如何在 Vue 2 中引入和配置富文本编辑器

#### 安装依赖包
为了能够在 Vue 2 项目中使用 WangEditor 富文本编辑器，需先通过 npm 来安装所需的软件包。这可以通过执行如下命令来完成：

npm install wangeditor/editor
npm install wangeditor/editor-for-vue

此过程会下载并安装 WangEditor 编辑器以及专门为 Vue.js 设计的组件[^1]。

#### 引入富文本编辑器模板
接着，在项目的适当位置（通常是页面或组件内的 `<script>` 部分），需要导入刚刚安装好的编辑器模块，并将其注册为局部或全局组件以便后续使用。例如可以这样操作：

import { Editor } from 'wangeditor/editor-for-vue'

export default {
    components: {
        Editor,
    },
}

上述代码片段展示了如何将 `Editor` 组件添加到当前 Vue 实例中的 `components` 属性里，从而允许在其对应的 HTML 模板内调用该组件。

#### 创建富文本编辑器实例
最后一步是在 `.vue` 文件里的 `<template>` 标签下定义好用于显示编辑区域的结构化标签，并设置必要的属性如绑定的数据模型 (`v-model`) 和事件监听函数(`@change`)等。具体做法可参照以下例子：

<template>
<div>
    <editor 
      class="CKEditor"
      ref="Editor"
      v-model="content"
      @on-change="callbackChangeEditor">
    </editor>
</div>
</template>

<script>
// ...省略前面已经提到过的部分...

data() {
return {
    content: '',
};
},
methods: {
callbackChangeEditor(value) {
this.content = value;
},
}
</script>

<style lang="less" scoped></style>

这里创建了一个名为 `Editor` 的自定义元素，它绑定了一个叫做 `content` 的变量作为数据源，并且每当编辑区内容发生变化时都会触发一次回调方法 `callbackChangeEditor()` 更新这个变量的内容[^2]。

对于希望尝试其他类型的富文本编辑器比如 TinyMCE，则可以根据官方文档指引进行相应的调整和适配工作[^3]。