前言
公司内部有一款类似飞书之类的协同办公软件,客户端分为pc端(electron+vue3+javascript构建)和app端(flutter构建),前段时间因业务产品需要,客户端要做一款富文本编辑器,需求如下:
-
具备基本的富文本编辑能力,支持标题、加粗、斜体、下划线、删除线、列表、链接属性,同时要支持@人、高亮显示、分割线功能
-
富文本格式要兼容pc端和app端,两个客户端富文本显示效果要基本保持一致,app端要支持亮色和暗色两种模式
-
富文本编辑器工具栏需要定制化,要按照UI设计稿来做
分析了一下市面上的开源富文本编辑器方案,如tinymce、quill、prosemirror、
tiptap等,最终采用的技术方案如下:
- 基于quill进行富文本编辑器开发,
主要是考虑到quill功能丰富,文档完善,易于扩展,而且有flutter版本实现flutter-quill - pc端和app端输入和输出的格式都是基于Delta格式的JSON字符串,服务端保存的也是Delta格式的JSON字符串
项目截图
| 亮色模式 | 暗色模式 | 编辑超链接 | 完整页面 |
|---|---|---|---|
light_theme.jpg
|
dark_theme.jpg
|
link.jpg
|
demo.jpg
|
功能特色
- 支持标题、加粗、链接、撤销、重做等基本功能
- 支持亮色和暗色模式切换
- 支持@用户功能
- 支持高亮显示功能
- 支持输入字符数统计
- 支持自定义工具栏
项目源码
https://github.com/kongpf8848/rich_editor
参考资源
Quill - Your powerful rich text editor
Quill is a modern WYSIWYG editor built for compatibility and extensibility.
flutter-quill is a rich text editor and a Quill component for Flutter

light_theme.jpg
dark_theme.jpg
link.jpg
demo.jpg









网友评论