wangEditor | 项目复盘

楔子

自从加入 wangEditor 团队已有大半年了。

wangEditor V4 版本也已经愈来愈趋于稳定了。

目前也由于一个任务，让我想要对目前的 wangEditor 作一个总体复盘。

1、项目介绍

wangEditor 是一款 TypeScript 开发的 Web 富文本编辑器。

主打 轻量、简洁、易用

目标是 争作国内使用体验Z好的开源 Web 富文本编辑器！

我在 wangEditor 作过的事情

前期作过以下一些功能：

1. 引用
2. 插入视频
3. 缩进
4. 序列
5. 多语言
6. auto focus
7. 丰富和优化内部核心模块的功能，例如: getNodeTop、getSelectionRangeTopNodes、prev、next、css 等等
8. 以及若干 bug 和 测试

后期在 wangEditor 当中主要负责:

1. issues 和 bug 的回复和收集
2. 对已收集的 issues 和 bug 分门别类
3. 进行任务的分配
4. 参与 code review

2、项目背景

富文本编辑器所面向的业务场景有不少，例如:

1. 留言板
2. 邮箱
3. 博客
4. 新闻媒体
5. 社区
6. 贴吧
7. 文档
8. 资料库
9. ...

这些场景都有一个共同点，那就是 所见即所得。

这也是富文本编辑器所解决的业务痛点。

实际上开发一个简易的富文本编辑器至关的简单，只须要你简单的了解 contenteditable、execCommand、Selection、Range 的使用，就能快速的开发出一个简单的富文本编辑器。

固然该编辑器还存在着不少的问题，例如 execCommand 实际上在 MDN 上标记为已废弃。

还有各个浏览器对 execCommand 的实现和支持各不相同，以及 execCommand 自己提供的能力也十分的简单。

因此开发一个简单的富文本编辑器虽然十分简单，可是要作一款优秀的富文本编辑器是至关之难的，须要处理各类各样匪夷所思的问题，并且 execCommand 所提供的能力也十分有限，因此不少的富文本编辑器都是抛弃了浏览器提供的 execCommand 转而研发本身的一套 execCommand，更甚者自主实现了富文本输入框，只依赖少数的浏览器 API。

3、代码结构

该部分的内容能够在 wangEditor 的 github 仓库中的 doc 目录下能够找到 doc

技术选型

wangEditor 自己不依赖任何框架

• 使用语言：TypeScript
• 打包工具：Webpack
• 测试工具：jest、cypress

主要目录

• .github/workflows github actions（持续集成）的配置文件
• .vscode vscode 编辑器配置（推荐你们使用 vscode）
• attachment 附件，和程序运行无关，但不可删除
• build webpack 配置
• dist 打包产出的目录。刚下载时没有该目录，本地运行 npm run build 便可生成
• docs 开发文档
• examples 本地测试用的 html 文件
• server 服务端，用于联调图片或文件上传的功能
• src 编辑器代码
• test 单元测试代码
• cypress E2E测试代码

Src 目录

• wangEditor.ts 总入口
• assets/ CSS 字体文件 图片
• config/ 编辑器默认配置。配置项较多，因此按照分类拆分了多个文件。
• editor/ 编辑器核心功能
  • index.ts 入口文件，产出编辑器的 class
  • change/ 编辑器 change 捕捉
  • disable/ 禁用编辑器
  • history/ 历史记录
  • init-fns/ 初始化的功能
  • upload/ 文件上传底层能力
  • z-index/ 层级
  • command.ts 封装 document.execCommand
  • selection.ts 封装 Selection 和 Range
• lib/ 用到的第三方 js lib （没法经过 npm 安装的）
• menus/ 菜单栏和菜单
  • index.ts 菜单栏 class
  • menu-constructors/ 生成单个菜单所用到的 class
  • menu-list.ts 汇总全部的菜单
  • 其余文件夹，具体的各个菜单，如 bold link 等
• text/ 文本编辑区域
  • index.ts 入口文件，产出 class ，封装各个 API
  • event-hooks/ 初始化 text 的各个事件钩子，如回车、粘贴、删除时应该作哪些特殊处理
  • paste/ 处理粘贴事件
  • getChildrenJSON.ts 获取子元素的 JSON 格式数据
  • getHtmlByNodeList.ts 从 nodeList json 格式中遍历生成dom元素
• utils/ 工具
  • const.ts 常量
  • dom-core.ts DOM 操做的封装
  • util.ts 各个工具函数
  • custom-event 自定义事件
  • polyfill 兼容
  • data-structure/ 数据结构
  • observer/ 封装 MutationObserver

5、建立流程

6、菜单构造

7、结构关系

其实由下图可见，wangEditor 在不断的升级、迭代、修复中，已然开始有些杂乱了。

不少功能和模块都互相依赖很是的耦合在了一块儿，在修复 Bug 中也开始出现一些连锁反应，例如 A 修改了 Bug A，形成了 Bug B 的出现；B 修改了 Bug B，结果 Bug A 又死灰复燃了。

这也是咱们编辑器急需突破和解决的问题，也是我作这一次复盘的主要缘由

8、总结思考

实际上目前我只是比较了解 wangEditor 一款富文本编辑器，对其余著名的富文本编辑器知之甚少，做为一名富文本编辑器的开发者而言这是不合格的，这方面我应该要去多多增强对富文本编辑器领域的深耕。

另外这段时间我其实在面试找工做，一方面是迫于生活的压力，一方面也是想寻求技术上的突破。同时在面试的过程当中，以及在这次任务中时常有种无从下手的感受，让我也了解到本身底子薄、思惟定式、设计模式了解不深、基础知识欠缺、架构思惟弱等等，因此还需加倍努力才行呀。

最后，若是你对富文本编辑器和开源项目感兴趣，欢迎加入咱们 wangEditor 团队

本文正在参与「掘金 2021 春招闯关活动」, 点击查看 活动详情