之前想在 lens 上構建一個文章發布平台,後面越做越不對勁,感覺就是 Mirror 的跨鏈版本,沒有價值,現在也是處於半棄坑狀態。這裡記錄下項目過程探索的一些富文本編輯器,及各個對比。
Editor.js https://editorjs.io/
一個模塊化、易於擴展和定制的編輯器。它採用基於塊的編輯方式,使內容組織和格式化變得簡單。
最早嘗試使用的編輯器,用它來做類似 Notion 的應用很方便。可以輸出為 JSON 格式,方便直接存儲到 IPFS 上。有很多插件覆蓋了大部分編輯器需要的功能,即插即用,針對項目對插件做些微調就行。只是缺少對 TS 的支持讓我用的難受,以及編輯器的樣式很難改,我想要的是 Mirror 的 WYSIWYG 效果,至少我改不動。抛開這些缺點,用它做一個編輯器也是夠用了。
Lexical https://lexical.dev/
Facebook 團隊搞的一個可擴展的文本編輯器框架
抛棄了 Editor.js 後,找到了 Lexical,感覺是可以符合我的需求的。研究了下確實足夠自由,對 TS 也足夠支持,可以擴展成想要的編輯器。只是深入研究發現這東西還只是個框架,足夠自由也足夠繁瑣,要定義自己的 node,插件也需要自己寫,也就是要做成自己的編輯器還要再封裝一層。而且 Lexcial 目前還處於早期開發狀態,官方文檔不夠詳細,用在個人項目裡還是有後期維護風險。感覺成本過高,就放棄使用。
PS:https://github.com/ozanyurtsever/verbum github 上一個基於 Lexical 的編輯器,使用上相對簡單點。
TinyMCE https://www.tiny.cloud/
功能豐富且成熟的富文本編輯器
TinyMCE 已經是成熟的商業應用了,可以滿足大多數富文本編輯需求,包括文本格式化、圖片和媒體插入、列表和表格創建等。提供了許多官方和社區插件,以及易於使用的 API,便於輕鬆地定制編輯器,以滿足特定需求。文檔方面也足夠詳細,基本覆蓋所有可見的問題。允許用戶定制編輯器的外觀,以適應項目的設計需求。
這是目前個人感覺綜合性價比最好的編輯器了,足夠簡單也足夠複雜,適用於各種需求。缺點是性能問題,尤其是在加載較多插件或處理大量內容時。部分插件功能需要收費,但可以自己定制插件來解決。
CKEditor https://ckeditor.com/
功能豐富且成熟的富文本編輯器
與 TinyMCE 類似,就沒深入研究了。不過 CKEditor 有個新功能我很喜歡,可以直接上傳 doc 文件,並且保留 doc 文件的樣式。這對有許多 doc 文件要處理的公司非常有用。只是局限於 HTML,CKEditor 還無法做到自動分頁,以及導入頁眉頁腳,需要手動處理。
CodeMirror https://codemirror.net/
輕量級的代碼編輯器,主要針對代碼編輯
CodeMirror 了解也不多,僅做一家之言。嚴格講 CodeMirror 確實不算富文本編輯器,但是對 markdown 的支持可以擴展為富文本編輯器,正如 xlog 目前做的這樣。最大優勢是足夠輕量,沒有上述的性能問題。只是要作為一個編輯器,在體驗上還不夠好,需要更多定制。比如,xlog 目前我上傳的圖片還無法定義圖片的大小,位置,添加 caption。
最後感想就是,要在項目裡為用戶提供一個好用的長文章編輯器真是不容易。