本文由體驗技術團隊Kagol原創。

TinyEditor 是一個基於 Quill 2.0 的富文本編輯器，在 Quill 基礎上擴展了豐富的模塊和格式，框架無關、功能強大、開箱即用。

• 源碼：https://github.com/opentiny/tiny-editor
• 官網：https://opentiny.github.io/tiny-editor

去年1月2日，我們發佈了 v3.25 版本，功能基本已經完備，之後 v3.x 版本進入了維護期，同時開啓了漫長的 v4.0 版本的開發，v4.0 的核心目標是體驗優化和穩定性提升，並支持多人協同編輯。

在長達1年的開發和打磨後，我們榮幸地宣佈 TinyEditor v4.0 正式發佈！這個版本匯聚了團隊的心血，帶來了激動人心多人協同編輯新功能、以及大量體驗優化和穩定性改進。

重點特性：

• 支持多人協同編輯：一起在編輯器寫（玩）文檔（貪吃蛇遊戲摸魚）🐶
• 基於 quill-table-up 的新表格方案：表格操作體驗++⚡️
• 基於 emoji-mart 的 Emoji 表情：表情黨最愛😍
• 支持斜杆菜單和豐富的快捷鍵：鍵盤流的福音😄
• 圖片/視頻/文件上傳體驗優化🌄

詳細的 Release Notes 請參考：https://github.com/opentiny/tiny-editor/releases/tag/v4.0.0

歡迎安裝 v4.0 版本體驗：

npm i @opentiny/fluent-editor@4.0.0

1 亮點特性

1.1 多人協作編輯

v4.0 最重磅的功能之一是引入了完整的協作編輯能力。我們集成了 quill-cursor 模塊，支持多人實時協作編輯，並提供了獨立的 npm 包供開發者集成。無論是需要離線支持還是雲端協作，TinyEditor 都能勝任。

你可以在我們的演示項目中進行體驗：https://opentiny.github.io/tiny-editor/projects/

效果如下：

關於協同編輯更詳細的介紹，參考：如何使用 TinyEditor 快速部署一個多人協同富文本編輯器？

1.2 表格能力升級

集成了 table-up 模塊，大幅提升了表格編輯和操作能力，支持更復雜的表格場景。

體驗地址：https://opentiny.github.io/tiny-editor/docs/demo/table-up

效果如下：

詳細介紹可以參考之前的文章： TinyEditor v4.0 alpha：表格更強大，表情更豐富，上傳體驗超乎想象！

1.3 更豐富的 Emoji 表情😘

• 集成 emoji-mart，提供豐富的表情選擇
• 修復了插入表情後的光標位置問題
• 完善了表情插入的交互體驗

體驗地址：https://opentiny.github.io/tiny-editor/docs/demo/emoji

效果如下：

詳細介紹可以參考之前的文章：TinyEditor v4.0 alpha：表格更強大，表情更豐富，上傳體驗超乎想象！

1.4 快捷鍵和快速菜單

新增了強大的快捷鍵系統和快速菜單功能，讓高級用户能夠更高效地操作編輯器。

體驗地址：https://opentiny.github.io/tiny-editor/projects/

效果如下：

1.5 顏色選擇器升級

自定義顏色選擇器現在能保存當前選擇，並支持添加更多顏色。

效果如下：

1.6 文本模板與國際化

• 支持 i18n 文本模板替換
• 完善了國際化翻譯（header、picker 等組件）
• 更好的多語言支持體驗

1.7 圖片和文件增強

• 圖片工具欄：選中圖片時顯示專門的操作工具欄
• 自定義上傳 ：增加 allowInvalidUrl 選項，支持 Electron 等特定場景
• 改進的上傳邏輯：優化了失敗狀態的處理

2 技術改進

2.1 構建和工程化

• 修復了 SSR 構建問題
• 優化了 Vite 配置，解決了 PostCSS 和 Tailwind 的兼容性問題
• 改進了 SCSS 文件引入方式
• 輸出文件名稱優化

2.2 依賴管理

• 外部化 emoji-mart 和 floating-ui 依賴，減少包體積
• 移除了 better-table 和 lodash-es，優化依賴樹

2.3 代碼質量

• 完整的測試覆蓋率提升
• 重構優化：移除冗餘代碼
• API 標準化：scrollIntoView → scrollSelectionIntoView
• 示例代碼 async/await 改造，代碼現代化

2.4 類型安全

• 修復了因 TypeScript 類型導致的編譯錯誤
• 改進了類型定義

2.5 API 導出增強

v4.0 導出了工具欄配置常量，方便開發者定製：

• DEFAULT_TOOLBAR：默認工具欄配置
• FULL_TOOLBAR：完整工具欄配置

2.6 增加自動發包工作流

• 增加 auto-publish / auto-deploy 等自動化工作流，支持打 tag 之後自動發版本、生成 Release Notes
• PR 門禁在單元測試基礎上增加 npm 包和網站構建，確保合入 PR 之前，npm 包構建和網站構建是正常的，通過自動化方式保障版本質量。

3 問題修復

v4.0 修復了大量已知問題，包括：

• 工具欄選擇器不跟隨光標變化的問題
• 行高作用域問題
• 列表樣式顯示不正確
• 背景色 SVG 圖標問題
• VitePress 默認樣式影響的問題
• 自定義上傳失敗時表格數據結構破壞的問題
• 多項文檔和國際化翻譯問題

4 社區貢獻

感謝所有為 v4.0 做出貢獻的開發者！你們的辛勤付出讓 TinyEditor 變得更好！

• @chenxi-20
• @GaoNeng-wWw
• @jany55555
• @qwangry
• @shenyaofeng
• @vaebe
• @wuyiping0628
• @Yinlin124
• @zzxming

注：排名不分先後，按名字首字母排序。

如果你有任何建議或反饋，歡迎通過 GitHub Issues 與我們聯繫。

往期推薦文章

• 👍TinyEditor：一個基於 Quill 2.0 的富文本編輯器，功能強大、開箱即用！
• 🎈TinyEditor 富文本開源2個月的總結：增加格式刷、截屏、TypeScript 類型聲明等新特性
• 🥳重磅更新！TinyEditor 開源富文本支持 LaTeX 可編輯公式啦~
• 🎉喜報！TinyEditor 開源富文本迎來了第一位貢獻者
• 👏讓我們一起來建設 TinyEditor 開源富文本編輯器吧！
• ✨TinyEditor v3.25.0 正式發佈！2025年第一個版本，增加標題列表導航、分隔線等實用特性
• ⚡️TinyEditor v4.0 alpha 版本發佈：更強大的表格、更豐富的表情、更好的上傳體驗

關於OpenTiny

歡迎加入 OpenTiny 開源社區。添加微信小助手：opentiny-official 一起參與交流前端技術～

OpenTiny 官網：https://opentiny.design

OpenTiny 代碼倉庫：https://github.com/opentiny

TinyVue 源碼：https://github.com/opentiny/tiny-vue

TinyEngine 源碼： https://github.com/opentiny/tiny-engine

歡迎進入代碼倉庫 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~

如果你也想要共建，可以進入代碼倉庫，找到 good first issue標籤，一起參與開源貢獻~