项目概述

el-form 中需要使用富文本自定义上传图片与视频地址

涉及知识点

• wangEditor 简单使用

实现

前置

安装插件

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

我安装的版本为 @5.1.1

引入与创建对应 DOM 节点

在组件中引入富文本编辑器输入框部分和富文本编辑器工具栏部分的构造函数与样式文件：

import '@wangeditor/editor/dist/css/style.css'
import { createEditor, createToolbar } from '@wangeditor/editor'

在页面中创建对应的富文本输入框节点与工具栏节点：

声明配置方法

挂载到页面

至此，wangEditor 自定义上传功能就实现了。这边展示的是最笨的懒狗方式，我们在实际业务场景中一定要记得对冗余代码做拆分摘离。

参考文献：wangEditor 官方文档