1.安装插件

npm i wangeditor --save 或 yarn add wangeditor

2.在需要用到富文本的地方引入

import E from "wangeditor"

//在mounted操作下面这部
const editor = new E("#div1")
editor.create()

3.现在就开始随便的使用

const editor = new E('#div1')

// 设置编辑区域高度为 500px
editor.config.height = 500

// 注意，先配置 height ，再执行 create()
editor.create()

4.上传图片

// 配置 server 接口地址
editor.config.uploadImgServer = '/upload-img'

editor.config.customUploadImg = function (resultFiles, insertImgFn) {
    // resultFiles 是 input 中选中的文件列表
    // insertImgFn 是获取图片 url 后，插入到编辑器的方法

    // 上传图片，返回结果，将图片插入到编辑器中
    insertImgFn(imgUrl)
}

5.上传视频

// 配置 server 接口地址
editor.config.uploadVideoServer = '/api/upload-video'

editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
    // resultFiles 是 input 中选中的文件列表
    // insertVideoFn 是获取视频 url 后，插入到编辑器的方法

    // 上传视频，返回结果，将视频地址插入到编辑器中
    insertVideoFn(videoUrl)
    // 也可以自己 new FormDate() 上传
}

官方地址：www.wangeditor.com/doc/