在 Vue 2 项目中集成使用 WangEditor 富文本编辑器

WangEditor 是一款轻量级、开源、简洁的 Web 富文本编辑器，支持 HTML5 和现代浏览器，适合用于简单的内容编辑场景。本文将介绍如何在 Vue 2 项目中集成并使用 WangEditor，帮助你快速构建一个支持富文本编辑的应用。

一、项目初始化

首先，确保你已经安装了 Vue CLI，如果还未安装，可以通过以下命令全局安装：

npm install -g vue-cli

接着，使用 Vue CLI 初始化一个 Vue 2 项目：

vue init webpack my-vue-wangeditor-app cd my-vue-wangeditor-app npm install 

启动开发服务器：

npm run dev

二、安装 WangEditor

接下来，在项目中安装 WangEditor：

npm install wangeditor --save 

三、创建 WangEditor 组件

为了在 Vue 项目中使用 WangEditor，我们可以将其封装为一个 Vue 组件。

1. 创建 WangEditor 组件

在 src/components 文件夹中，创建一个名为 WangEditor.vue 的组件文件。

<template>
  <div>
    <div ref="editor" style="text-align: left;"></div>
  </div>
</template&