wangeditor 是一个轻量级 web 富文本编辑器，配置方便，使用简单。

1）安装 `wangeditor`

终端安装 wangeditor 库：

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

2）页面绑定

创建一个 xxx.vue 页面，在 div 上设置 id：

<template>  <div><div id="editor" style="background: #ffffff;"></div></div>
</template>

3）页面引入

在 xxx.vue 页面引入wangeditor：

import E from 'wangeditor'

4）配置`wangeditor`的配置项

在生命周期 mounted 里配置wangeditor 的配置项：

  mounted () {this.initialEditor()},methods: {initialEditor () {// 绑定div上的 editorthis.editor = new E('#editor')// 获取输入的内容this.editor.config.onchange = html => {this.form.content = html;};// 上传图片到服务器this.editor.config.customUploadImg = (files, insertImgFn) => {// files 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后，插入到编辑器的方法// 上传代码返回结果之后，将图片插入到编辑器中const params = new FormData();params.append("file", files[0]);this.$http({url: this.uploadUrl,method: "post",data: params}).then(res => {if (res.url) {// 上传图片，返回结果，将图片插入到编辑器中insertImgFn(res.url);}})}// 上传图片到服务器，是否以base64形式this.editor.config.uploadImgShowBase64 = falsethis.editor.config.pasteFilterStyle = falsethis.editor.config.zIndex = 100this.editor.config.colors = ['#ffffff', '#000000', '#eeece1', '#1c497d', '#4d80bf', '#4f81bd', '#c0504d', '#9bbb59', '#8064a2', '#4bacc6', '#f79646', "#c00000", '#ff0000', '#ffc000', '#ffff00', '#92d050', '#00b050', '#00b0f0', '#0070c0', '#002060', '#7030a0']// 创建一个富文本编辑器this.editor.create();}
}

5）完整代码

xxx.vue 完整代码：

<template>  <div><div id="editor" style="background: #ffffff;"></div></div>
</template>  
<script>
import E from 'wangeditor'
export default {name: 'test',data () {return {form: { content: '' },baseURI: 'xxx',uploadUrl: `${baseURI}/upload?token=xxx`,}},mounted () {this.initialEditor()},methods: {initialEditor () {// 绑定div上的 editorthis.editor = new E('#editor')// 获取输入的内容this.editor.config.onchange = html => {this.form.content = html;};// 上传图片到服务器this.editor.config.customUploadImg = (files, insertImgFn) => {// files 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后，插入到编辑器的方法// 上传代码返回结果之后，将图片插入到编辑器中const params = new FormData();params.append("file", files[0]);this.$http({url: this.uploadUrl,method: "post",data: params}).then(res => {if (res.url) {// 上传图片，返回结果，将图片插入到编辑器中insertImgFn(res.url);}})}// 上传图片到服务器，是否以base64形式this.editor.config.uploadImgShowBase64 = falsethis.editor.config.pasteFilterStyle = falsethis.editor.config.zIndex = 100this.editor.config.colors = ['#ffffff', '#000000', '#eeece1', '#1c497d', '#4d80bf', '#4f81bd', '#c0504d', '#9bbb59', '#8064a2', '#4bacc6', '#f79646', "#c00000", '#ff0000', '#ffc000', '#ffff00', '#92d050', '#00b050', '#00b0f0', '#0070c0', '#002060', '#7030a0'],// 配置菜单this.editor.config.menus = ["head", // 标题"bold", // 粗体"fontSize", // 字号"fontName", // 字体"lineHeight", // 行高"italic", // 斜体"underline", // 下划线"strikeThrough", // 删除线"foreColor", // 文字颜色"backColor", // 背景颜色"link", // 插入链接"list", // 列表"justify", // 对齐方式"quote", // 引用"emoticon", // 表情"image", // 插入图片"table", // 表格"video", // 插入视频"code", // 插入代码"undo", // 撤销"redo", // 重复"fullscreen" // 全屏]// 富文本内容this.editor.txt.html()// 创建一个富文本编辑器this.editor.create();}},beforeDestroy() {let editor = this.editorif (editor == null) return// 调用销毁 API，组件销毁时，及时销毁 editor ，重要！！！editor.destroy()editor = null}
}
</script>