历时 1 年，TinyEditor v4.0 正式发布！

本文由体验技术团队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标签，一起参与开源贡献~