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 春招闖關活動」, 點擊查看 活動詳情