接上篇:
二、 扩展能力
扩展能力是我们设计之初就非常重视的能力,为接入方提供简单、强大的自定义扩展能力,支持复杂、不断变化的业务诉求;接下来我们就以自定义主题和撤销功能的实现,来看一看Mural在扩展能力方面的设计。
1. 自定义Node——主题能力
原文为gif
如上面视频演示的,当输入两个#中间包含字符,则变成一个主题的样式,点击可以跳转到对应的主题落地页;可以对主题进行编辑,如果删掉其中一个#,则变成普通的文本。
要实现这样一个自定义主题,我们需要实现以下几个步骤:自定义Element、自定义Normalizing。
首先是定义Element:
接下来就轮到强大的自定义Normalizing出场了,通过自定义规则,处理主题Node节点校验:
只需要这样简单两步,就实现了主题能力的支持;业务还可以根据自己的需求定制更加复杂的场景,比如有序段落等等。
2. Plugin扩展——实现撤销功能
原文为gif
如上面图所示,我们实现了一个简单的Plugin层的扩展——撤销功能;在前面讲到协议层设计的时候,我们讨论过Slate的精简的Opeartion设计,每一次交互的Commond,最终都会拆解成一个或者多个Opeartion执行;我们可以通过以下三步实现plugin的扩展:
• 重写Operation的apply方法,通过过滤、合并等操作,记录Opeartion执行的历史。
• 实现Opeartion的reverse方法。
• 根据Opeartion执行历史,调用Opeartion的reverse方法,执行reverse操作。
三、 总结
通过两篇文章,我们介绍了富文本编辑器协议层、渲染层设计和实现,完成了一个功能完善的Flutter富文本编辑器;接下来我们会介绍Flutter富文本编辑器体验优化方面闲鱼的一些实践和挑战。