Flutter从0到1实现高性能、多功能的富文本编辑器(模块分析篇)

前言:

经过前面两篇文章的基础知识铺垫,我们终于要进入到专栏的核心内容 — 富文本。富文本编辑器可以说是APP中最复杂,但使用场景又极广的组件之一。例如各大笔记APP的核心功能、闲鱼的商品发布功能、还有掘金APP的发布文章&发布沸点功能等,可以说是富文本编辑器让用户能以更简单更便携的方式记录内容。不过Flutter只有最基础的文本编辑组件TextField,在遇到复杂场景时就比较吃力了,例如图片的添加,有序段落.....本文通过分析市场上的各大富文本编辑器的功能和Flutter优秀的富文本插件,从而来自定义自己的富文本编辑器,与大家一起探索文本的世界...

注:Flutter目前已经有许多优秀的开源富文本编辑器,例如:flutter_quill。为了更好的实现属于自己的`富文本编辑器,我们必须要先了解&学习这些优秀的开源项目。

对比分析各大APP的富文本编辑器


对比各大APP的富文本编辑器后,我们可以将富文本功能总结为这些部分:

基础功能 扩展功能
文本斜体 撤回←→
可改变文本大小 图片📸
可改变文本字体格式 视频🎬
可改变文本样式(颜色、粗细) 代码块💻
文本下划线&删除线 链接🔍
标题(h1,h2,h3) 语音📢
文本缩进 绘画块🎨
文本对齐 自定义背景🖼
..... .....

协议选择

如今有很多优秀的富文本编辑器,例如QuillwangEditorProsemirror。根据开源协议、可扩展性、生态等方面的对比考虑之后,本专栏选用Quill协议做为我们富文本编辑器的协议。

——图片来源:Quill富文本编辑器的实践 - DevUI

富文本插件基础分析 — FlutterQuill

FlutterQuill是Quill在Flutter的版本,我们来分析下它的基础构成部分、以便更好的实现我们的富文本。

——注:分析的为部分代码,目的在于了解Flutter实现富文本需要哪些部分。

  • 定义配置文件

    为了保存输入的文本与样式,需要定义JSON配置文件,在文本需要保存时,只需将JSON提交到服务器。在渲染时,只需通过解析JSON内容进行渲染。

  • 定义样式文件

    富文本存在许多的样式,例如一二三级的标题样式,字体的颜色,字体的格式...若不定义这些样式文件,那么代码将难以修改维护。

    颜色基础样式类:

    字体大小基础类:

    样式

  • 自定义控件
    • 自定义光标

      在android和在ios上的输入框光标是差距很大的,若没有分开适配,那会出现许多奇怪的问题。

      • 定义光标的样式

      • 定义光标控制器

        通过ChangeNotifier监听更新光标的动画与样式。

      • 绘制光标

      • 适配iOS浮动光标

    • 通过继承RenderObjectWidget自定义输入框控件

      为了有更好的可扩展性,对于文本的输入和编辑,就最好不要使用TextField这些Flutter已经提供的组件了。我们通过RenderEditableBox去实现可编辑的输入框。我们可以通过RenderEditableBox实现文本选择、文本光标的操作。

    • 自定义文本选择范围
    • ....
  • 自定义全局控制器

  • 定义基础规则(插入、删除、其他)

    ——因规则较多,此处我们只分析部分规则

    保留该行文本的样式。在用户按下回车键时,或粘贴包含多行的文本时,触发该规则。

  • 总结

    看到这里,是不是觉得还是有点不清晰,毕竟我们是分析了部分内容,对于拥有富文本的模块,我们可以总结成为下面这张图。

解析JSON,渲染文本

看到这里,相信你已经知道富文本编辑器由哪些模块组成了。那么就让我们开始实现属于我们的富文本编辑器吧。

  • 定义JSON配置文件

    好的组件都是一点点迭代起来的,刚开始我们不需要定义太多的参数,后面一点一点迭代优化即可。在这里,我们定义一个基础的JSON文件。用于控制文本的大小和颜色。

  • 编写颜色解析方法

  • 编写JSON实体类

  • 解析JSON方法

  • 使用

    这样一番操作下来后,我们就实现了将JSON数据解析为富文本的功能。但需要注意的一点,目前是模拟从服务端获取数据,所以需要确保在上传数据的时候,colortextSize都是有一个默认值的。效果图如下:

尾述

在这篇文章中,我们分析了一个富文本编辑器需要有哪些功能,也分析了优秀的富文本编辑器Flutter Quill,知道了实现富文本编辑器需要有哪些模块。最后我们对自定义富文本编辑器做了一个开头,简单实现了对富文本JSON配置数据的解析。在下一篇文章中,会详细分析自定义富文本编辑器。希望这篇文章能对你有所帮助,有问题欢迎在评论区留言讨论~

参考

flutter_quill

参考链接


Flutter从0到1实现高性能、多功能的富文本编辑器(模块分析篇)

发布者

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注