闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——渲染篇(下)

简介: 闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——渲染篇

接上篇:


二、 扩展能力

 

扩展能力是我们设计之初就非常重视的能力,为接入方提供简单、强大的自定义扩展能力,支持复杂、不断变化的业务诉求;接下来我们就以自定义主题和撤销功能的实现,来看一看Mural在扩展能力方面的设计。

 

1. 自定义Node——主题能力

 

image.png

原文为gif

 

如上面视频演示的,当输入两个#中间包含字符,则变成一个主题的样式,点击可以跳转到对应的主题落地页;可以对主题进行编辑,如果删掉其中一个#,则变成普通的文本。

 

要实现这样一个自定义主题,我们需要实现以下几个步骤:自定义Element、自定义Normalizing

 

首先是定义Element:

 

image.png


接下来就轮到强大的自定义Normalizing出场了,通过自定义规则,处理主题Node节点校验:

 

image.png


只需要这样简单两步,就实现了主题能力的支持;业务还可以根据自己的需求定制更加复杂的场景,比如有序段落等等。

 

2. Plugin扩展——实现撤销功能

 

image.png

原文为gif

 

如上面图所示,我们实现了一个简单的Plugin层的扩展——撤销功能;在前面讲到协议层设计的时候,我们讨论过Slate的精简的Opeartion设计,每一次交互的Commond,最终都会拆解成一个或者多个Opeartion执行;我们可以通过以下三步实现plugin的扩展:

 

重写Operation的apply方法,通过过滤、合并等操作,记录Opeartion执行的历史

实现Opeartion的reverse方法

根据Opeartion执行历史,调用Opeartion的reverse方法,执行reverse操作

 

三、 总结

 

通过两篇文章,我们介绍了富文本编辑器协议层、渲染层设计和实现,完成了一个功能完善的Flutter富文本编辑器;接下来我们会介绍Flutter富文本编辑器体验优化方面闲鱼的一些实践和挑战。

相关文章
|
26天前
|
SQL 分布式计算 大数据
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
22 10
|
26天前
|
新零售 前端开发 小程序
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
22 2
|
17天前
|
Kubernetes Cloud Native 搜索推荐
探索云原生技术:Kubernetes入门与实践打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第31天】云原生技术正改变着应用开发和部署的方式。本文将带你了解云原生的基石——Kubernetes,通过实际的代码示例,从安装到部署一个简单的应用,让你迅速掌握Kubernetes的核心概念和操作方法。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你进入云原生世界的桥梁。
|
3月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
4月前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
|
4天前
|
JSON Dart Java
flutter开发多端平台应用的探索
flutter开发多端平台应用的探索
19 6
|
4天前
|
JSON Dart Java
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)
|
7天前
|
安全 Android开发 开发者
探索安卓开发的未来:Kotlin的崛起与Flutter的挑战
在移动开发的广阔天地中,安卓平台始终占据着举足轻重的地位。随着技术的不断进步和开发者需求的多样化,Kotlin和Flutter成为了改变游戏规则的新玩家。本文将深入探讨Kotlin如何以其现代化的特性赢得开发者的青睐,以及Flutter凭借跨平台的能力如何挑战传统的安卓开发模式。通过实际案例分析,我们将揭示这两种技术如何塑造未来的安卓应用开发。
23 6
|
24天前
|
开发框架 Android开发 iOS开发
Flutter相关痛点解决问题之淘特选择桌面端开发框架如何解决
Flutter相关痛点解决问题之淘特选择桌面端开发框架如何解决
|
1月前
|
移动开发 前端开发 JavaScript
"跨界大战!React Native、Weex、Flutter:三大混合开发王者正面交锋,揭秘谁才是你移动应用开发的终极利器?"
【8月更文挑战第12天】随着移动应用开发的需求日益增长,高效构建跨平台应用成为关键。React Native、Weex与Flutter作为主流混合开发框架各具特色。React Native依托Facebook的强大支持,以接近原生的性能和丰富的组件库著称;Weex由阿里巴巴开发,性能优越尤其在大数据处理上表现突出;Flutter则凭借Google的支持及独特的Dart语言和Skia渲染引擎,提供出色的定制能力和开发效率。选择时需考量项目特性、团队技能及生态系统的成熟度。希望本文对比能助你做出最佳决策。
95 1