在 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 的组件文件。

2. 使用组件

在 src/App.vue 中引入并使用我们刚刚创建的 WangEditor 组件。

3. 运行效果

此时运行项目，npm run dev，你应该会看到 WangEditor 富文本编辑器出现在页面中，并且支持实时编辑和预览内容。

四、常见问题

1. 图片上传

WangEditor 支持图片上传功能，但默认是使用 base64 方式。你可以根据需要配置自己的图片上传服务。具体可以通过修改 editor.config.uploadImgServer 配置图片上传接口地址。

this.editor.config.uploadImgServer = '/api/upload'; // 图片上传接口

2. 自定义菜单栏

你可以通过 editor.config.menus 自定义显示哪些菜单栏。例如，移除不需要的菜单，只保留标题、加粗和图片：

this.editor.config.menus = [ 'head', 'bold', 'image', ];

3. 禁用编辑功能

如果你需要将编辑器设置为只读模式，可以通过禁用菜单栏功能来实现：

this.editor.$textElem.attr('contenteditable', false); // 禁用编辑 

五、总结

通过本文的步骤，你已经了解了如何在 Vue 2 项目中集成使用 WangEditor 富文本编辑器。从安装到使用的流程相对简单，并且 WangEditor 提供了丰富的扩展配置，能够满足大部分富文本编辑需求。你可以根据自己的项目需求，进一步配置上传功能或自定义菜单栏等功能。

希望这篇教程对你有所帮助，祝你在 Vue 项目开发中顺利使用 WangEditor！