作者:光酒
闲鱼作为一个二手闲置交易平台,卖家发布商品产出优质的供给尤为重要。商品发布器希望拥有富文本编辑能力,让用户简单便捷的方式产出更加优质的内容;Flutter本身没有富文本编辑器的能力的,只有最基础的文本编辑器TextField。
对于更加复杂的场景,比如支持自定义表情、主题、有序段落等能力,目前flutter组件是无法满足我们的业务诉求,另外在交互体验上与Native仍然存在一定的差距。为了解决业务中面临的以上问题,我们决定设计并实现一个Flutter场景下高性能、可扩展的富文本编辑器。
一、 富文本编辑器整体架构设计
首先我们来看一看整体的架构设计分层:
自下而上主要分四层:
• 协议层:主要负责Model的定义、Selection描述、Commond事件逻辑处理,以及协议Normalizing校验。
• 能力扩展层:能力扩展层提供丰富的plugin能力,既有内置的plugin,如:纯文本转换,undo/redo等能力,同时也非常方便的支持业务层自定义的扩展,例如支持站外H5页面展示的model to HTML的序列化plugin。
• 渲染层:渲染层主要实现将富文本Model转换成Flutter Widget渲染,以及光标、选区、ToolBar等计算和渲染,以及用户手势交互事件等。
• 业务扩展层:在Mural的设计之初,可扩展就是设计过程中非常重要的一部分,我们为业务方提供了非常灵活、功能强大的扩展能力,通过自定义Node、Plugin、Normalizing,实现如自定义表情、主题、段落、语法高亮等能力。
二、 协议层设计
富文本编辑器对大家来说并不陌生,发展至今,已经涌现出非常多有优秀的开源富文本编辑器;当我们想要做Flutter富文本协议的时候,第一个想法就是先了解优秀的开源富文本编辑器方案,避免闭门造车。
目前比较优秀的开源富文本编辑器,如CKEditor、Quill、Prosemirror、Draft、Slate等等;在了解和对比过后,我们决定使用Slate作为我们的富文本编辑器的协议。
1. why Slatejs
我们为什么选择Slate?
• 插件是一等公民,能够很好的满足我们对于扩展性的要求。
• Slatjs在设计上支持嵌套结构,可以满足复杂的业务场景。
• 与Dom相同的Data model,对于后面flutter渲染层的实现,也变得更加方便。
• 直观的指令设计,能够非常好的支持plugin的自定义扩展。
• Slate在设计上,协议层与渲染层是有明确的核心划分,这让我们可以复用Slate协议层的设计,渲染层交给flutter来处理。
除了上面的原因,我们选择Slate另外一个很重要的原因,就是它的单元测试覆盖率和完整度,让我们对它的稳定性更有信心。
接下篇:https://developer.aliyun.com/article/1225978?groupCode=idlefish