wangEditor 5：Web富文本编辑器介绍-马育民老师

# 介绍

wangEditor 是**国内开源、轻量 Web 富文本编辑器**，由 wangeditor‑team 维护，中文文档完善，国内后台管理系统、CMS 项目使用非常广泛。

官网：https://www.wangeditor.com/

### 版本说明

- **v5（当前主流）**：底层基于 **Slate.js** 重构，TS 全量重写，插件化架构，**不再支持IE**，官方提供 Vue2/Vue3、React 组件，推荐新项目直接使用。
- **v4（旧版）**：自研DOM实现，兼容IE11，不再新增功能，适合老项目维护，不建议新项目使用。

> 仓库：github.com/wangeditor‑team/wangEditor
> 官网：www.wangeditor.com

# 特点

### 1. **开箱即用，接入简单**
原生JS即可使用，几行代码完成初始化；同时提供官方 Vue / React 封装组件，不用自己封装底层逻辑。

### 2. **丰富编辑能力**
- 基础：加粗、斜体、颜色、上下标、清除格式、标题、引用、有序/无序列表、对齐缩进
- 多媒体：图片上传、拖拽图片、视频插入、附件
- 高级：完整表格编辑、代码块高亮、分割线、公式、Markdown模式、撤销重做

### 3. **插件化模块化（v5）**
Monorepo分包架构，功能拆分为独立模块，**按需注册模块**，减小打包体积；可自定义菜单、自定义插件、自定义弹窗、自定义上传逻辑。

### 4. **安全可控**
内置HTML白名单，XSS过滤，可配置允许/禁止的标签属性，防止恶意HTML注入。

### 5. **中文友好**
中文文档、大量国内实践案例，社区问题多，踩坑资料丰富。

# 适用场景
✅ CMS内容管理、博客、资讯发布
✅ 后台管理系统：公告、产品详情、文章编辑
✅ OA、SaaS系统表单富文本输入
✅ 知识库、后台文档编辑

**注意：** **主要面向PC端**，移动端体验一般，不适合作为移动端编辑器。

# 优缺点
### 优点
1. 国产开源免费，无商业授权费用
2. 插件灵活，可深度定制菜单、上传、命令
3. TS完整类型，Vue/React官方组件，集成成本低
4. 中文文档完善，国内案例多，排错方便

### 不足
1. 移动端适配弱，不适合手机端编辑
2. v5基于Slate，相比v4学习成本略有上升；版本之间迁移改动较大
3. 不自带完整多人协同，协同需要基于Slate生态自行扩展

## 同类简单对比

- wangEditor：国产，简单易上手，后台系统首选，整体看比其他富文本编辑器要好用，但不支持移动端
- Quill：轻量，但表格、图片上传需要自己封装
- TinyMCE：功能最全，但包体积大，商业版收费