CN114548056A - 富文本编辑方法、装置及设备 - Google Patents

Abstract

本申请提供一种富文本编辑方法、装置及设备。本申请的方法，基于配置了富文本编辑器协议的富文本编辑器框架，在启动富文本编辑器时，在富文本编辑页面显示富文本编辑区域，并基于配置的富文本编辑器协议信息，创建富文本编辑器的文档内容的数据模型；响应于富文本编辑区域内的交互操作，执行交互操作对应的命令，更新数据模型；根据更新后的数据模型，创建控件树；根据控件树，创建渲染树；根据渲染树进行布局和绘制，以更新富文本编辑器的文档内容的显示效果，应用于Flutter上时，基于在Flutter上配置Slate富文本编辑器协议的富文本编辑器框架，能够基于Flutter实现复杂的富文本编辑能力。

Description

富文本编辑方法、装置及设备

技术领域

本申请涉及计算机技术，尤其涉及一种富文本编辑方法、装置及设备。

背景技术

Flutter是一种移动UI(User Interface，用户界面)框架，是一个用于构建跨平台手机APP的开源SDK(Software Development Kit，软件开发工具包)，可以快速地在Android和iOS系统上构建高质量的用户界面。

Flutter本身没有富文本编辑器，Flutter自带的文本输入框Textfield，只支持最基本的文本输入编辑能力，原生的富文本展示能力相对比较简单，不具有支持自定义表情、主题、有序段落等富文本编辑能力。

发明内容

本申请提供一种富文本编辑方法、装置及设备，用以解决现有的Flutter不具有支持富文本编辑能力的问题。

一方面，本申请提供一种富文本编辑方法，包括：

响应于启动富文本编辑器，在富文本编辑页面显示富文本编辑区域，并基于配置的富文本编辑器协议信息，创建富文本编辑器的文档内容的数据模型；

响应于所述富文本编辑区域内的交互操作，执行所述交互操作对应的命令，更新所述数据模型；

根据更新后的数据模型，创建控件树；

根据所述控件树，创建渲染树；

根据所述渲染树进行布局和绘制，以更新所述富文本编辑器的文档内容的显示效果。

另一方面，本申请提供一种富文本编辑装置，包括：

启动模块，用于响应于启动富文本编辑器，在富文本编辑页面显示富文本编辑区域，并基于配置的富文本编辑器协议信息，创建富文本编辑器的文档内容的数据模型；

交互处理模块，用于响应于所述富文本编辑区域内的交互操作，执行所述交互操作对应的命令，更新所述数据模型；

渲染模块，用于：

根据更新后的数据模型，创建控件树；

根据所述控件树，创建渲染树；

根据所述渲染树进行布局和绘制，以更新所述富文本编辑器的文档内容的显示效果。

另一方面，本申请提供一种电子设备，包括：处理器，以及与所述处理器通信连接的存储器；

所述存储器存储计算机执行指令；

所述处理器执行所述存储器存储的计算机执行指令，以实现上述所述的富文本编辑方法。

另一方面，本申请提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现上述所述的富文本编辑方法。

本申请提供的富文本编辑方法、装置及设备，基于配置了富文本编辑器协议的富文本编辑器框架，在启动富文本编辑器时，在富文本编辑页面显示富文本编辑区域，并基于配置的富文本编辑器协议信息，创建富文本编辑器的文档内容的数据模型；响应于富文本编辑区域内的交互操作，执行交互操作对应的命令，更新数据模型；根据更新后的数据模型，创建控件树；根据控件树，创建渲染树；根据渲染树进行布局和绘制，以更新富文本编辑器的文档内容的显示效果，应用于Flutter上时，基于在Flutter上配置Slate富文本编辑器协议的富文本编辑器框架，能够从而基于Flutter实现复杂的富文本编辑能力。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1为本申请一示例性实施例提供的基于富文本编辑器协议的富文本编辑器框架的示意图；

图2为本申请一示例性实施例提供的Slate数据模型的示意图；

图3为本申请一示例性实施例提供的富文本编辑方法流程图；

图4为本申请一示例性实施例提供的一文档内容的示例图；

图5为本申请一示例性实施例提供的一Slate数据模型的树形结构示例图；

图6为本申请另一示例性实施例提供的富文本编辑方法流程图；

图7为本申请一示例性实施例提供的富文本编辑器的文档内容与可视区域和渲染缓冲区的相对位置关系的示意图；

图8为本申请一示例性实施例提供的一Widget树的示例图；

图9为本申请一示例性实施例提供的一RenderObject树的示例图；

图10为本申请一示例性实施例提供的富文本编辑方法的总体流程示意图；

图11为本申请一示例性实施例提供的富文本编辑装置的结构示意图。

通过上述附图，已示出本申请明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围，而是通过参考特定实施例为本领域技术人员说明本申请的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

首先对本申请所涉及的名词进行解释：

Flutter：一种移动UI框架，是一个用于构建跨平台手机APP的开源SDK，可以快速地在Android和iOS系统上构建高质量的用户界面。

Slate js：一种typescript实现的开源的富文本编辑框架。

Section：富文本编辑器中的段落，每个段落之间使用换行符隔开。

Element：富文本编辑器中的容器节点(Node)，本申请中富文本编辑器中的一个段落对应一个Element节点。

Text：富文本编辑器中最小的渲染节点(Node)。

另外，术语“第一”、“第二”、“第三”等仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。在以下各实施例的描述中，“多个”的含义是两个以上，除非另有明确具体的限定。

针对Flutter本身没有富文本编辑器，Flutter自带的文本输入框Textfield，只支持最基本的文本输入编辑能力，原生的富文本展示能力相对比较简单，不具有支持自定义表情、主题、有序段落等富文本编辑能力的问题，本申请提供一种在Flutter上配置富文本编辑器协议的富文本编辑器框架。示例性地，以在Flutter上配置Slate富文本编辑器协议为例，如图1所示，富文本编辑器框架可以包括：协议层、能力扩展层、渲染层和业务层。

具体地，协议层配置了Slate富文本编辑器协议信息，基于Slate富文本编辑器协议，主要定义了协议层控制组件(Editor)、Slate数据模型(Data Model)、Slate命令(Commond)、逻辑相关的配置(Config)、原子操作(Operation)以及数据模型标准化逻辑(Normalizing)等。其中逻辑相关的配置(Config)可以自定义，比如异常上报参数、上报采样率等。

示例性地，协议层配置的Slate富文本编辑器协议中，包括如下三种最基本的Node节点类型：Editor、Element、Text。其中：

Editor：包含富文本编辑器的整个文档数据的Editor根节点。

Element：在自定义域中拥有语义的Element容器节点。

Text：包含文档文本的Text叶子节点。

富文本编辑器的整个文档内容的Node节点组成了一个类似Dom树的Data Model。图2为本申请一示例性实施例提供的Slate数据模型的示意图，如图2所示，Editor节点为文档内容的Slate数据模型中的根节点，Slate数据模型包括Element(image)、Element(Paragraph)等多个Element容器节点，以及Text叶子节点。每个节点具有节点属性信息(properties)。其中每一Element节点可以具有孩子(children)节点，同时也可以作为另一节点的孩子节点。

同时协议层定义了如下至少一种原子操作(Opeartion)：插入节点(insert_node)、插入文本(insert_text)、合并节点(merge_node)、移动节点(move_node)、删除节点(remove_node)、删除文本(remove_text)、设置节点属性(set_node)、设置选择区域(set_selection)、断开节点(split_node)。协议层使用Operation作为文档的最小抽象，每一Slate命令(Commond)调用的结果是生成一个或者多个Operation，逐个执行这些Opeartion，完成协议层Data Mode的更新，即可获得新的文档内容。

能力扩展层定义了监测控制模块(Monitor)等工具，以及实现一系列基础能力的插件(Plugin)，如基于History插件实现undo/redo能力、基于Serialization插件实现序列化能力等。其中监测控制模块用于对富文本编辑器运行过程中出现的内部错误信息进行监测及控制，以及一些外部Commond调用的参数错误信息的上报等。监测控制模块的具体功能支持自定义。

渲染层包括：Editor、Controller、实现文档内容的渲染的Render、实现非文档内容的渲染的Decoration等组件，实现Flutter侧的富文本渲染展示，以及富文本手势交互操作(如点击、长按、拖拽等)、光标绘制、Selection选择区域绘制、复制全选粘贴Overlay操作、渲染相关配置(Config)等能力；同时渲染层根据用户的交互操作，通过调用协议层的Commond命令，实现富文本的编辑与展示。另外，新框架中的渲染层还包括Flutter原有渲染层的功能。

渲染层主要根据协议层的Slate数据模型(Data Model)，实现将Slate数据模型中自定义的Node节点转换为富文本的多Span(段落)渲染方式，定义了RenderEditorInlineBox多Node场景，自定义渲染以及手势点击、长按、拖拽等交互能力；自定义底层渲染逻辑以及Selection选择，文本Offset逻辑等，实现与纯文本无差别的选择能力，从而支持自定义表情的所见即所得编辑能力。渲染层需要处理从Data Model到Widget树(也称为控件树)、渲染树的转换和渲染处理，以及光标显示、手势交互、Overlay菜单、与平台系统(iOS或Android系统)的Native同步等一系列工作。

示例性地，可以在渲染层定义核心类(如可以命名为MuralMultiRenderEditable)，主要处理Slate协议中多个Element节点的布局管理，以及处理点击、光标、Selection区域绘制等逻辑。可以在RenderEditorInlineBox类中抽象定义Element渲染接口，实现如下功能：

1.处理多Element场景，手势点击操作信息转换为Point对象，从而设置Selection(选择区域)，绘制光标、选择区域等；

2.获取指定位置行高；

3.通过输入的Point对象，获取光标在整个富文本文档(Document)的偏移(offset)；

4.根据输入的Point对象，获取光标单词(如双击选中的某一个单词)的文本区域(TextRange)。

可选地，还可以在RenderEditorTextBox类中抽象定义inline类型的Text Node的渲染接口，实现如下功能：

1.根据光标位置(TextPosition)，获取光标所在行(inlineBox)相对Element的偏移(offset)；

2.根据光标位置(TextPosition)，获取光标所在的行高；

3.根据光标位置(TextPosition)，获取光标当前确定的单词的文本区域(TextRange)；

4.根据当前选择的文本区域(TextSelection)(可能选中一行或多行中的文本)，获取选择区域(Selection)范围内，需要渲染的文本区域(TextBox)相对整个富文本文档(Document)的位置信息。例如，如果当前选择的文本区域包括多行中的文本，那么在选择区域范围内，同一行的文本形成一个矩形的文本区域(TextBox)，返回每一文本区域相对整个富文本文档的位置信息。

渲染层实现了每一类型的节点的渲染实现对象，用于实现对应节点的渲染所需的自定义能力。示例性地，文档内容中的一个段落对应一个Block类型的Element，在Flutter的渲染层对应一个RenderBox对象，基于RenderEditorInlineBox类实现协议层定义的Element的渲染接口。每一个inline类型的Text Node，在Flutter的渲染层对应一个RenderBox对象，实现RenderEditorTextBox类实现协议层定义的inline类型的Text Node的渲染接口。

在业务层，支持灵活的自定义能力使用者可以通过自定义Node、自定义Render、自定义Plugin以及自定义Normalizing等，实现丰富的富文本自定义能力，例如自定义表情、自定义主题、自定义段落、自定义格式等能力。

本申请提供的富文本编辑方法，基于配置了富文本编辑器协议的富文本编辑器框架，在启动富文本编辑器时，在富文本编辑页面显示富文本编辑区域，并基于配置的富文本编辑器协议信息，创建富文本编辑器的文档内容的数据模型；响应于富文本编辑区域内的交互操作，执行交互操作对应的命令，更新数据模型；根据更新后的数据模型，创建控件树；根据控件树，创建渲染树；根据渲染树进行布局和绘制，以更新富文本编辑器的文档内容的显示效果，应用于Flutter上时，基于在Flutter上配置Slate富文本编辑器协议的富文本编辑器框架，能够基于Flutter实现复杂的富文本编辑能力。应用于其他不具备富文本编辑的文本编辑器时，也能够实现复杂的富文本编辑能力。

本申请提供的富文本编辑方法，具体可以应用于电子商务平台的产品信息发布场景，在发布页面提供实现复杂的富文本编辑能力的富文本编辑器，提供更开放的产品信息编辑能力，给用户更多的发挥空间，让用户可以灵活地定制要发布的产品信息，产出更加优质的内容。另外，本申请提供的的富文本编辑方法，还可以应用于需要进行富文本编辑的其他场景中，此处对于应用场景不做具体限定。

下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

图3为本申请一示例性实施例提供的富文本编辑方法流程图。本实施例提供的富文本编辑方法具体可以应用于进行富文本编辑的电子设备。该电子设备可以是智能手机、平板电脑等移动终端，也可以是个人电脑、服务器、云计算设备等，此处不做具体限定。

如图3所示，该方法具体步骤如下：

步骤S301、响应于启动富文本编辑器，在富文本编辑页面显示富文本编辑区域，并基于配置的富文本编辑器协议信息，创建富文本编辑器的文档内容的数据模型。

在实际应用时，用户需要进行富文本编辑时，通过打开富文本编辑页面等操作启动富文本编辑器。在启动富文本编辑器时，在富文本编辑页面显示富文本编辑区域，以在富文本编辑区域显示用户编辑的文档内容，并支持用户在富文本编辑区域内进行富文本编辑的交互操作，例如，输入文本，删除文本，点击、长按、拖拽等手势交互。

在启动富文本编辑器，基于配置的富文本编辑器协议信息，创建富文本编辑器的文档内容的数据模型。

示例性地，基于图1所示的富文本编辑器框架，协议层预先定义和配置了Slate富文本编辑器协议信息，定义并配置了Slate数据模型、Slate命令(Commond)、原子操作(Opeartion)、数据模型标准化逻辑(Normalizing)等。基于协议层的Slate富文本编辑器协议信息，可以创建富文本编辑器的文档内容的Slate数据模型。

示例性地，可以基于配置的Slate富文本编辑器协议信息，创建富文本编辑器的文档内容的Slate数据模型。

步骤S302、响应于富文本编辑区域内的交互操作，执行交互操作对应的命令，更新数据模型。

该步骤中，富文本编辑区域内的交互操作是指用户在富文本编辑页面显示富文本编辑区域进行富文本编辑的交互操作，例如输入、点击(如点击加粗、添加下划线、设置字体颜色等菜单控件等)、双击、长按、拖拽等操作，用于实现用于输入文本、删除文本、移动文本、加粗、设置字体颜色等富文本编辑。

这些交互操作可以触发调用交互操作对应的命令。通过执行交互操作对应的命令实现对数据模型的更新，从而更新文档内容。

示例性地，基于图1所示的富文本编辑器框架，渲染层主要根据协议层的Slate数据模型(Data Model)，实现将Slate数据模型中自定义的Node节点转换为富文本的多Span(段落)渲染方式，定义了RenderEditorInlineBox多Node场景，自定义渲染以及手势点击、长按、拖拽等交互能力；自定义底层渲染逻辑以及Selection选择，文本Offset逻辑等，实现与纯文本无差别的选择能力，从而支持自定义表情的所见即所得编辑能力。

示例性地，该步骤中交互操作可以触发调用交互操作对应的Slate命令。通过执行交互操作对应的Slate命令实现对Slate数据模型的更新，从而更新文档内容。

步骤S303、根据更新后的数据模型，创建控件树。

当交互操作导致文档内容发生变化，在更新数据模型之后，根据更新后的数据模型，创建对应的控件树，从而将基于富文本编辑器协议的数据模型转换为控件树，从而能够根据控件树将富文本编辑器中修改后的文档内容渲染到屏幕上。

示例性地，当交互操作导致文档内容发生变化，在更新Slate数据模型之后，根据更新后的Slate数据模型，创建Flutter的Widget树(即控件树)，从而将基于Slate富文本编辑器协议的Slate数据模型转换为Flutter的Widget树，从而能够基于Flutter将富文本编辑器中修改后的文档内容渲染到屏幕上。

步骤S304、根据控件树，创建渲染树。

在创建更新后的数据模型对应的控件树之后，创建控件树对应的渲染树，也即更新后的文档数据对应的渲染树。

示例性地，在创建更新后的Slate数据模型对应的Widget树之后，创建Widget树对应的渲染树(也即RenderObject树)，也即更新后的文档数据对应的渲染树。

步骤S305、根据渲染树进行布局和绘制，以更新富文本编辑器的文档内容的显示效果。

在创建渲染树之后，根据渲染树进行布局(layout)和绘制(paint)，将更新后的文档内容渲染到屏幕上，从而刷新富文本编辑器中文档内容的显示效果。

本实施例基于配置了富文本编辑器协议的富文本编辑器框架，在启动富文本编辑器时，在富文本编辑页面显示富文本编辑区域，并基于配置的富文本编辑器协议信息，创建富文本编辑器的文档内容的数据模型；响应于富文本编辑区域内的交互操作，执行交互操作对应的命令，更新数据模型；根据更新后的数据模型，创建控件树；根据控件树，创建渲染树；根据渲染树进行布局和绘制，以更新富文本编辑器的文档内容的显示效果，基于在Flutter上配置Slate富文本编辑器协议的富文本编辑器框架，能够基于Flutter实现复杂的富文本编辑能力。

图6为本申请另一示例性实施例提供的富文本编辑方法流程图。在上述方法实施例的基础上，基于富文本编辑器的可视区域(Viewport)和/或渲染缓冲区，当富文本编辑器内的文档内容发生变化时，只对可视区域内和/或渲染缓冲区内的内容进行布局(layout)和绘制(paint)，而不是布局和绘制富文本编辑器的整个文档内容，在进行超长文本编辑时，能够显著提升富文本编辑器的渲染性能。

本实施例中，以在Flutter上配置Slate富文本编辑器协议为例，对富文本编辑的方法进行详细地示例性地说明。本申请的其他实施例中，可以在其他不具备富文本编辑能力的文本编辑器上配置富文本编辑器协议，并采用类似的方法实现富文本编辑的功能。

如图6所示，该方法具体步骤如下：

步骤S601、响应于启动富文本编辑器，在富文本编辑页面显示富文本编辑区域，并基于配置的Slate富文本编辑器协议信息，创建富文本编辑器的文档内容的Slate数据模型。

在实际应用时，用户需要进行富文本编辑时，通过打开富文本编辑页面等操作启动富文本编辑器。在启动富文本编辑器时，在富文本编辑页面显示富文本编辑区域，以在富文本编辑区域显示用户编辑的文档内容，并支持用户在富文本编辑区域内进行富文本编辑的交互操作，例如，输入文本，删除文本，点击、长按、拖拽等手势交互。

在启动富文本编辑器，基于配置的Slate富文本编辑器协议信息，创建富文本编辑器的文档内容的Slate数据模型。

示例性地，以富文本编辑器中的文档内容为图4所示的富文本为例，该富文本包含两个段落，第一个段落中包括内容分别为“青青子衿”“悠悠我心”“但为君故”的三个具有不同属性的文本块。第二段落为引用型段落(起始部分带有“|”引用标记)，包含内容为“沉吟至今”的文本块。基于配置的Slate富文本编辑器协议信息所创建的该文档内容的Slate数据模型可以如下：

图4所示的文档内容的Slate数据模型可以表示如图5所示的树形结构，包括Editor根节点，根节点下有两个Element节点，其中一个Element节点是与文档内容中的第一个段落对应Block类型的Element节点，如图5中从上数第二层中左起第一个节点；该Element节点下有三个inline类型的Text节点，如图5中从上数第三层中左起的三个Text叶子节点，分别对应文档内容中的第一个段落中的三个具有不同属性的文本块，三个Text叶子节点具有不同的属性信息。根节点下的另一个Element节点是与文档内容中的第二个段落对应Quote类型的Element节点，如图5中从上数第二层中左起第二个节点(Quote)，该Quote节点表示应用段落，段落头部包含了一个竖线修饰，body部分则是一个嵌套的Element节点，也即Quote节点有一个子节点为Block类型的Element节点，如图5中从上数第三层中的Element节点，Quote节点的Element子节点具有一个inline类型的Text节点，如图5中从上数第四层中的Text叶子节点，对应文档内容中的第二个段落中的文本内容。

本实施例中，协议层配置了Slate富文本编辑器协议信息，基于Slate富文本编辑器协议，配置了Slate命令(Commond)、原子操作(Operation)。

示例性地，协议层配置了如下至少一种原子操作(Opeartion)：插入节点(insert_node)、插入文本(insert_text)、合并节点(merge_node)、移动节点(move_node)、删除节点(remove_node)、删除文本(remove_text)、设置节点属性(set_node)、设置选择区域(set_selection)、断开节点(split_node)。

协议层使用原子操作作为文档的最小抽象，每一Slate命令(Commond)调用的结果是生成一个或者多个原子操作，按照一定顺序排列形成原子操作序列，逐个执行原子操作序列中的原子操作，完成协议层Data Mode的更新，即可获得新的文档内容。

响应于富文本编辑区域内的交互操作，通过步骤S602-S603，执行交互操作对应的Slate命令，更新Slate数据模型。

步骤S602、响应于富文本编辑区域内的交互操作，调用交互操作对应的Slate命令，生成Slate命令对应的原子操作序列，原子操作序列包括按照特定顺序排列的至少一个原子操作。

其中，富文本编辑区域内的交互操作是指用户在富文本编辑页面显示富文本编辑区域进行富文本编辑的交互操作，例如输入、点击(如点击加粗、添加下划线、设置字体颜色等菜单控件等)、双击、长按、拖拽等操作，用于实现用于输入文本、删除文本、移动文本、加粗、设置字体颜色等富文本编辑。

当有用户在富文本编辑区域内进行交互操作时，调用交互操作对应的Slate命令。Slate命令被调用时，生成Slate命令对应的原子操作序列，该原子操作序列包括按照特定顺序排列的至少一个原子操作。通过依次执行原子操作序列中每一原子操作，可以实现对Slate数据模型的更新，从而更新文档内容。

步骤S603、根据原子操作序列，执行Slate命令对应的至少一个原子操作，更新Slate数据模型。

在Slate命令对应的原子操作序列之后，根据原子操作序列中原子操作的排列顺序，依次执行原子操作序列中的每一个原子操作，每一原子操作执行时更新Slate数据模型。

步骤S604、对更新后的Slate数据模型进行标准化处理。

在执行完交互操作对应的Slate命令的原子操作序列之后，可以对更新后的Slate数据模型进行标准化处理(Nomallizing)，使得标准化处理后的Slate数据模型满足预先配置的富文本编辑器的文档内容的一套文档标准。一旦制定了文档标准，那么任何对文档的操作，都应当满足：执行前基于符合标准的文档，执行后产出符合标准的文档。

其中，对Slate数据模型进行标准化处理的具体规则、文档标准可以根据实际应用场景进行配置和调整，此处不做具体限定。

示例性地，对Slate数据模型进行标准化处理，可以包括对Slate数据模型进行的合法性校验，例如合并相邻文本等。

另外，如果任何文档内容的变更，都要对文档内容的Slate数据模型做一次全量的标准化处理，开销就特别大，尤其是在大文档下，用户的每个操作都会被延迟响应。为了缩减标准化处理的范围，加快标准化处理的执行效率，可以标记当前操作影响了哪些节点，受影响的路径被标记为脏路径(dirty path)。例如，以删除节点这个Operation为例，被删除的节点祖先都会被标记为脏(被删除的节点路径则因为已经被删除了，不需要进行标准化处理，也就不需要被标记)。基于记录的脏路径对Slate数据模型中当前操作影响了的节点进行标准化处理，从而保证更新后的文档数据仍然满足预先配置的文档标准。

在Slate数据模型更新完成或标准化处理完成之后，可以通过Notification的方式通知到Flutter渲染层，使得渲染层通过步骤S605-S607将当前的Slate数据模型渲染到屏幕上。

示例性地，通过Notification的方式是指通过调用Flutter渲染层提供的Notifications API的通知接口通知到Flutter渲染层，其中Notifications API的通知接口用于向用户配置和显示桌面通知。

步骤S605、根据富文本编辑器的文档内容与可视区域的相对位置信息，确定待渲染的文本信息；根据当前的Slate数据模型，创建待渲染的文本信息对应的Widget树。

其中，可视区域是指富文本编辑区域内落入用户可视范围内的区域，通常可视区域可以为富文本编辑区域。待渲染的文本信息包括文档内容中的至少部分数据。

在实际应用中，为便于用户操作，富文本编辑区域在屏幕上的可视范围内，可以将富文本编辑区域作为富文本编辑器的可视区域。

对于超长文本编辑，富文本编辑器的可视区域中无法显示整个文档内容，只能显示部分内容，用户进行富文本编辑的范围也限定于可视区域所显示的部分文档内容。传统的Flutter原生的文本编辑区域(Text field)中每一次文档内容的变更，如输入、删除、手势交互等，都会重新布局(layout)、绘制(paint)整个文本编辑区域，导致性能较差，不够流畅。

本实施例中引入可视区域(Viewport)，根据更新后的Slate数据模型，创建用于进行渲染的Widget树时，基于富文本编辑器的文档内容与可视区域的相对位置信息，确定待渲染的文本信息，该待渲染的文本信息为文档内容中的部分数据，后续仅仅将待渲染的文本信息渲染到屏幕，只有在富文本编辑器的文档内容较少时，才会渲染整个文档数据，在超长文本编辑场景下，能够显著提高富文本编辑器的渲染性能。

一种可选地实施方式中，该步骤中根据富文本编辑器的文档内容与可视区域的相对位置信息，确定待渲染的文本信息，具体可以采用如下方式实现：

根据富文本编辑器的文档内容与可视区域的相对位置信息，确定至少部分内容处于可视区域内的文本段落，将文本段落内的所有文本信息确定为待渲染的文本信息。

这一实施方式中，在对当前的Slate数据模型进行渲染时，只需对富文本编辑区域中处于当前可视区域内的文档内容进行渲染，能够提升渲染性能。

另一种可选地实施方式中，还可以设置渲染缓冲区，该步骤中根据富文本编辑器的文档内容与可视区域的相对位置信息，确定待渲染的文本信息，具体可以采用如下方式实现：

根据富文本编辑器的文档内容与可视区域的相对位置信息，以及渲染缓冲区的配置信息，确定至少部分内容处于可视区域或渲染缓冲区内的文本段落，将文本段落内的所有文本信息确定为待渲染的文本信息。

可选地，渲染缓冲区可以包括可视区域之前的部分区域和可视区域之后的部分区域，渲染缓冲区的大小可以根据实际应用场景的需要进行配置和调整，此处不做具体限定。

示例性地，图7示出了富文本编辑器的完整文档内容与可视区域和渲染缓冲区的相对位置关系。如图7所示，可视区域和渲染缓冲区在屏幕上的宽度均与文档内容(富文本编辑区域)在屏幕上的宽度一致，2L表示可视区域的显示高度，渲染缓冲区可以包括可视区域上方高为L的区域和可视区域下方高为L的区域。其中，L为正整数。

这一实施方式中，在对当前的Slate数据模型进行渲染时，对富文本编辑区域中处于当前可视区域内和渲染缓冲区内的文档内容进行渲染，能够进一步提升渲染性能，缩短渲染响应时间。

步骤S606、根据Widget树，创建渲染树。

在创建更新后的Slate数据模型对应的Widget树之后，创建Widget树对应的渲染树(也即RenderObject树)，也即更新后的文档数据对应的渲染树。

示例性地，根据Widget树，通过调用Widget上的createElement()方法创建每个Element对象，形成Element树。最后调用Element的createRenderObject()方法创建每个渲染对象renderObject，形成一个RenderObject树。Element就是Widget在UI树具体位置的一个实例化对象，大多数Element只有唯一的renderObject，但还有一些Element会有多个子节点，如继承自RenderObjectElement的一些类。最终所有Element的RenderObject构成一棵树，称之为“RenderObject树”，即渲染树。

示例性地，根据图5所示的Slate数据模型，基于可视区域Viewport可以创建得到如图8所示的Widget树。根据图8所示的Widget树，可以创建得到如图9所示的RenderObject树。

步骤S607、根据渲染树进行布局和绘制，以更新富文本编辑器的文档内容的显示效果。

在创建渲染树之后，根据渲染树进行布局(layout)和绘制(paint)，将更新后的文档内容渲染到屏幕上，从而刷新富文本编辑器中文档内容的显示效果。

本实施例中，基于在Flutter上配置了Slate富文本编辑器协议的富文本编辑器框架，协议层延续了Slate js的部分设计原则：支持灵活且高效自定义能力，嵌套文档模型，明确的层级划分，完善的单元测试。基于在Flutter上配置了Slate富文本编辑器协议的富文本编辑器框架，支持对文本编辑器中Node节点、Element渲染接口、交互操作类型、交互操作对应的Slate命令信息、渲染Widget、数据模型标准化逻辑中至少一项的自定义配置，可以在协议层基于Slate协议实现富文本展示、编辑、操作协议；在渲染层实现自定义表情、主题、标签等能力，表情支持所见即所得渲染、编辑、Selection等能力。

示例性地，响应于自定义请求，提供自定义配置页面；根据所自定义配置页面上的自定义操作，实现对配置的Slate富文本编辑器协议信息中节点、Element渲染接口、交互操作类型、交互操作对应的Slate命令信息、渲染Widget、数据模型标准化逻辑中至少一项的自定义配置。

示例性地，以自定义表情为例，首先定义表情Element节点，设置Inline、Void属性为true：

完成了自定义的Element、初始化注册之后，当用户点击自定义表情时，调用协议的′insert_node′方法：

final EmojiElement emoji＝MuralCustomEmoji()..emojiUrl＝′…′；

muralController.insertNodes(<Node>[emoji]，move：true)；

这样就实现行内自定义表情的能力扩展。

示例性地，图10为本申请一示例性实施例提供的基于Flutter的富文本编辑方法的总体流程图，图10中以交互操作为文本加粗的操作为例，对基于Flutter的富文本编辑方法的总体流程进行示例性地说明，如图10所示，具体步骤如下：

步骤S1、用户触发加粗操作。

其中，用户可以通过点击加粗按钮来加粗选中的文本。

步骤S2、富文本编辑器实例对象调用加粗方法。

示例性地，富文本编辑器的实例对象可以是Editor组件，可以通过Editor.addMark()来调用定义好的加粗方法。

步骤S3、转换为加粗命令。

示例性地，可以通过Transforms.setNodes()来将加粗操作转换为对应的加粗命令。

加粗命令执行时，可以产生如10中所示的split_node、set_selection、set_node这三个原子操作，依次执行split_node、set_selection、set_node这三个原子操作，实现Slate数据模型的更新。

步骤S4、执行split_node。

步骤S5、更新Slate数据模型。

步骤S6、执行set_selection。

步骤S7、更新Slate数据模型。

步骤S8、执行set_node。

步骤S9、更新Slate数据模型。

步骤S10、标准化处理。

该步骤中，对更新后的Slate数据模型进行标准化处理(Normalizing)。

步骤S11、通知渲染层。

该步骤中通过Notification的方式通知Flutter渲染层。

步骤S12、重新渲染。

该步骤中，根据标准化处理后的Slate数据模型创建Widget树，根据Widget树创建渲染树，并根据渲染树进行布局和绘制，以更新富文本编辑器的文档内容的显示效果。

本实施例基于在Flutter上配置了Slate富文本编辑器协议的富文本编辑器框架，在启动富文本编辑器时，在富文本编辑页面显示富文本编辑区域，并基于配置的Slate富文本编辑器协议信息，创建富文本编辑器的文档内容的Slate数据模型；响应于富文本编辑区域内的交互操作，执行交互操作对应的Slate命令，更新Slate数据模型；根据更新后的Slate数据模型，创建Widget树；根据Widget树，创建渲染树；根据渲染树进行布局和绘制，以更新富文本编辑器的文档内容的显示效果，从而基于Flutter实现复杂的富文本编辑能力。进一步地，通过引入富文本编辑器的可视区域(Viewport)和/或渲染缓冲区，当富文本编辑器内的文档内容发生变化时，只对可视区域内和/或渲染缓冲区内的内容进行布局(layout)和绘制(paint)，而不是布局和绘制富文本编辑器的整个文档内容，在进行超长文本编辑时，能够显著提升富文本编辑器的渲染性能。

图11为本申请一示例性实施例提供的富文本编辑装置的结构示意图。本申请实施例提供的富文本编辑装置可以执行富文本编辑方法实施例提供的处理流程。如图11所示，富文本编辑装置110包括：启动模块111，交互处理模块112和渲染模块113。

具体地，启动模块111，用于响应于启动富文本编辑器，在富文本编辑页面显示富文本编辑区域，并基于配置的富文本编辑器协议信息，创建富文本编辑器的文档内容的数据模型。

交互处理模块112，用于响应于富文本编辑区域内的交互操作，执行交互操作对应的命令，更新数据模型。

渲染模块113，用于：

根据更新后的数据模型，创建控件树；根据控件树，创建渲染树；根据渲染树进行布局和绘制，以更新富文本编辑器的文档内容的显示效果。

可选地，交互处理模块还用于：

响应于富文本编辑区域内的交互操作，调用交互操作对应的命令，生成命令对应的原子操作序列，原子操作序列包括按照特定顺序排列的至少一个原子操作；根据原子操作序列，执行命令对应的至少一个原子操作，更新数据模型。

可选地，交互处理模块还用于：

执行命令对应的至少一个原子操作，更新数据模型之后，对更新后的数据模型进行标准化处理。

可选地，渲染模块还用于：

根据富文本编辑器的文档内容与可视区域的相对位置信息，确定待渲染的文本信息，可视区域为富文本编辑区域，待渲染的文本信息包括文档内容中的至少部分数据；根据更新后的数据模型，创建待渲染的文本信息对应的控件树。

可选地，渲染模块还用于：

根据富文本编辑器的文档内容与可视区域的相对位置信息，确定至少部分内容处于可视区域内的文本段落，将文本段落内的所有文本信息确定为待渲染的文本信息。

可选地，渲染模块还用于：

根据富文本编辑器的文档内容与可视区域的相对位置信息，以及渲染缓冲区的配置信息，确定至少部分内容处于可视区域或渲染缓冲区内的文本段落，将文本段落内的所有文本信息确定为待渲染的文本信息。

可选地，富文本编辑装置还可以包括：

自定义配置模块，用于：

响应于自定义请求，提供自定义配置页面；根据所自定义配置页面上的自定义操作，实现对配置的富文本编辑器协议信息中节点、容器节点渲染接口、交互操作类型、交互操作对应的命令信息、渲染控件、数据模型标准化逻辑中至少一项的自定义配置。

本申请实施例提供的装置可以具体用于执行上述任一方法实施例所提供的方案，具体功能和所能实现的技术效果此处不再赘述。

本申请还提供一种电子设备，包括：处理器，以及与处理器通信连接的存储器，存储器存储计算机执行指令。其中，处理器执行存储器存储的计算机执行指令，以实现上述任一方法实施例所提供的方案，具体功能和所能实现的技术效果此处不再赘述。

本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机执行指令，计算机执行指令被处理器执行时用于实现上述任一方法实施例所提供的方案，具体功能和所能实现的技术效果此处不再赘述。

本申请实施例还提供了一种计算机程序产品，程序产品包括：计算机程序，计算机程序存储在可读存储介质中，电子设备的至少一个处理器可以从可读存储介质读取计算机程序，至少一个处理器执行计算机程序使得电子设备执行上述任一方法实施例所提供的方案，具体功能和所能实现的技术效果此处不再赘述。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求书指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求书来限制。

Claims (10)

1.一种富文本编辑方法，其特征在于，包括：

响应于启动富文本编辑器，在富文本编辑页面显示富文本编辑区域，并基于配置的富文本编辑器协议信息，创建富文本编辑器的文档内容的数据模型；

响应于所述富文本编辑区域内的交互操作，执行所述交互操作对应的命令，更新所述数据模型；

根据更新后的数据模型，创建控件树；

根据所述控件树，创建渲染树；

根据所述渲染树进行布局和绘制，以更新所述富文本编辑器的文档内容的显示效果。

2.根据权利要求1所述的方法，其特征在于，所述响应于所述富文本编辑区域内的交互操作，执行所述交互操作对应的命令，更新所述数据模型，包括：

响应于所述富文本编辑区域内的交互操作，调用所述交互操作对应的命令，生成所述命令对应的原子操作序列，所述原子操作序列包括按照特定顺序排列的至少一个原子操作；

根据所述原子操作序列，执行所述命令对应的至少一个原子操作，更新所述数据模型。

3.根据权利要求2所述的方法，其特征在于，所述执行所述命令对应的至少一个原子操作，更新所述数据模型之后，还包括：

对更新后的所述数据模型进行标准化处理。

4.根据权利要求1所述的方法，其特征在于，所述根据更新后的数据模型，创建控件树，包括：

根据所述富文本编辑器的文档内容与可视区域的相对位置信息，确定待渲染的文本信息，所述可视区域为所述富文本编辑区域，所述待渲染的文本信息包括所述文档内容中的至少部分数据；

根据更新后的数据模型，创建所述待渲染的文本信息对应的控件树。

5.根据权利要求4所述的方法，其特征在于，所述根据所述富文本编辑器的文档内容与可视区域的相对位置信息，确定待渲染的文本信息，包括：

根据所述富文本编辑器的文档内容与可视区域的相对位置信息，确定至少部分内容处于所述可视区域内的文本段落，将所述文本段落内的所有文本信息确定为待渲染的文本信息。

6.根据权利要求4所述的方法，其特征在于，所述根据所述富文本编辑器的文档内容与可视区域的相对位置信息，确定待渲染的文本信息，包括：

根据所述富文本编辑器的文档内容与可视区域的相对位置信息，以及渲染缓冲区的配置信息，确定至少部分内容处于所述可视区域或所述渲染缓冲区内的文本段落，将所述文本段落内的所有文本信息确定为待渲染的文本信息。

7.根据权利要求1-6中任一项所述的方法，其特征在于，还包括：

响应于自定义请求，提供自定义配置页面；

根据所自定义配置页面上的自定义操作，实现对配置的富文本编辑器协议信息中节点、容器节点渲染接口、交互操作类型、交互操作对应的命令信息、渲染控件、数据模型标准化逻辑中至少一项的自定义配置。

8.一种基于的富文本编辑装置，其特征在于，包括：

启动模块，用于响应于启动富文本编辑器，在富文本编辑页面显示富文本编辑区域，并基于配置的富文本编辑器协议信息，创建富文本编辑器的文档内容的数据模型；

交互处理模块，用于响应于所述富文本编辑区域内的交互操作，执行所述交互操作对应的命令，更新所述数据模型；

渲染模块，用于：

根据更新后的数据模型，创建控件树；

根据所述控件树，创建渲染树；

根据所述渲染树进行布局和绘制，以更新所述富文本编辑器的文档内容的显示效果。

9.一种电子设备，其特征在于，包括：处理器，以及与所述处理器通信连接的存储器；

所述存储器存储计算机执行指令；

所述处理器执行所述存储器存储的计算机执行指令，以实现如权利要求1-7中任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如权利要求1-7中任一项所述的方法。

Images