🎉历时1年,TinyEditor v4.0 正式发布!

你好,我是 Kagol,个人公众号:前端开源星球

TinyEditor 是一个基于 Quill 2.0 的富文本编辑器,在 Quill 基础上扩展了丰富的模块和格式,框架无关、功能强大、开箱即用。

去年1月2日,我们发布了 v3.25 版本,功能基本已经完备,之后 v3.x 版本进入了维护期,同时开启了漫长的 v4.0 版本的开发,v4.0 的核心目标是体验优化和稳定性提升,并支持多人协同编辑。

在长达1年的开发和打磨后,我们荣幸地宣布 TinyEditor v4.0 正式发布!这个版本汇聚了团队的心血,带来了激动人心多人协同编辑新功能、以及大量体验优化和稳定性改进。

重点特性:

  • 支持多人协同编辑:一起在编辑器写(玩)文档(贪吃蛇游戏摸鱼)🐶
  • 基于 quill-table-up 的新表格方案:表格操作体验++⚡️
  • 基于 emoji-mart 的 Emoji 表情:表情党最爱😍
  • 支持斜杆菜单和丰富的快捷键:键盘流的福音😄
  • 图片/视频/文件上传体验优化🌄

详细的 Release Notes 请参考:github.com/opentiny/ti...

欢迎安装 v4.0 版本体验:

shell 复制代码
npm i @opentiny/fluent-editor@4.0.0

1 亮点特性

1.1 多人协作编辑

v4.0 最重磅的功能之一是引入了完整的协作编辑能力。我们集成了 quill-cursor 模块,支持多人实时协作编辑,并提供了独立的 npm 包供开发者集成。无论是需要离线支持还是云端协作,TinyEditor 都能胜任。

你可以在我们的演示项目中进行体验:opentiny.github.io/tiny-editor...

效果如下:

关于协同编辑更详细的介绍,参考:如何使用 TinyEditor 快速部署一个多人协同富文本编辑器?

1.2 表格能力升级

集成了 table-up 模块,大幅提升了表格编辑和操作能力,支持更复杂的表格场景。

体验地址:opentiny.github.io/tiny-editor...

效果如下:

详细介绍可以参考之前的文章:更强大的表格

1.3 更丰富的 Emoji 表情😘

  • 集成 emoji-mart,提供丰富的表情选择
  • 修复了插入表情后的光标位置问题
  • 完善了表情插入的交互体验

体验地址:opentiny.github.io/tiny-editor...

效果如下:

详细介绍可以参考之前的文章:更丰富的表情

1.4 快捷键和快速菜单

新增了强大的快捷键系统和快速菜单功能,让高级用户能够更高效地操作编辑器。

体验地址:opentiny.github.io/tiny-editor...

效果如下:

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 标准化:scrollIntoViewscrollSelectionIntoView
  • 示例代码 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 变得更好!

注:排名不分先后,按名字首字母排序。

如果你有任何建议或反馈,欢迎通过 GitHub Issues 与我们联系。

往期推荐文章

联系我们

GitHub:github.com/opentiny/ti...(欢迎 Star ⭐)

官网:opentiny.github.io/tiny-editor

个人博客:kagol.github.io/blogs/

小助手微信:opentiny-official

公众号:OpenTiny

相关推荐
小圣贤君3 分钟前
Electron 桌面应用接入通义万相:文生图从 0 到 1 实战
前端·electron·ai写作·通义万相·ai生图·写作软件·小说封面
南风知我意9578 分钟前
【前端面试1】基础JS的面试题
前端·javascript·面试
wjhx18 分钟前
在Qt Design Studio中进行页面切换
前端·javascript·qt
钱多多先森18 分钟前
【Dify】使用 python 调用 Dify 的 API 服务,查看“知识检索”返回内容,用于前端溯源展示
开发语言·前端·python·dify
霍理迪19 分钟前
JS—数组
开发语言·前端·javascript
Surplusx19 分钟前
运用VS Code前端开发工具完成微博发布案例
前端·html
哪里不会点哪里.20 分钟前
Nginx 详解:高性能 Web 服务器与反向代理
服务器·前端·nginx
Ulyanov21 分钟前
超越平面:用impress.js打造智能多面棱柱演示器
开发语言·前端·javascript·平面
HWL567922 分钟前
vue抽离自定义指令的方法
前端·javascript·vue.js
2601_9495758623 分钟前
Flutter for OpenHarmony艺考真题题库+个人信息管理实现
java·前端·flutter