vue富文本编辑器wangeditor使用

WangEditor 是一款基于 Vue.js 的富文本编辑器，它提供了丰富的功能和良好的用户体验。下面是使用 WangEditor 的基本步骤：

1. 安装 WangEditor：你可以通过 npm 或者 yarn 来安装 WangEditor。在项目的根目录下执行以下命令：

npm install wangeditor --save

或者

yarn add wangeditor

2. 在需要使用编辑器的 Vue 组件中引入 WangEditor：

import WangEditor from 'wangeditor'

3. 在 Vue 组件的 `mounted` 钩子函数中初始化和配置 WangEditor：

mounted() {
  const editor = new WangEditor("#editor")
  editor.config.uploadImgServer = '/upload'  // 配置图片上传的接口地址
  editor.create()
}

上述代码中的 `#editor` 是一个 HTML 元素的 ID，用来指定编辑器的容器。

4. 在 HTML 模板中添加编辑器的容器：

<div id="editor"></div>

至此，你已经成功地集成了 WangEditor 富文本编辑器到你的 Vue 项目中。你可以通过配置 `editor.config` 对编辑器进行更多的个性化设置，比如自定义菜单、图片上传等功能。

注意：在使用 WangEditor 之前，请确保你已经正确引入并配置了 Vue.js。同时，为了使图片上传功能正常工作，你需要在后端实现一个图片上传接口，并将接口地址配置到 `editor.config.uploadImgServer` 中。

更多关于 WangEditor 的使用方法和配置，请参考官方文档：https://www.wangeditor.com/doc/