前言

公司内部有一款类似飞书之类的协同办公软件，客户端分为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

参考资源

• https://quilljs.com

Quill - Your powerful rich text editor

• https://github.com/quilljs/quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility.

• https://github.com/singerdmx/flutter-quill

flutter-quill is a rich text editor and a Quill component for Flutter