一种组件型富文本页面生成方法和装置

技术领域

本发明涉及人工智能领域中的数据处理和人机交互技术，尤指一种组件型富文本页面生成方法和装置。

背景技术

现有的富文本编辑器，无法满足编辑出符合定制化内容的要求，且对于可编辑的内容存在较大的局限性。目前的编辑器只适合纯文本，或者简单的图文排列。当需要编辑包含较多的定制化内容展示页面时，现有的编辑器不足以支撑多样性内容生成业务。

发明内容

本发明的目的是提供一种组件型富文本页面生成方法和装置，解决上述问题。

本发明提供的技术方案如下：

一方面，提供一种组件型富文本页面生成方法，包括：

遍历组件型富文本页面的元数据中结构类型数据、样式类型数据；

将所述结构类型数据、所述样式类型数据与对应的网页属性节点建立关联关系；

基于所述关联关系，将所述元数据转换为所述组件型富文本页面。

进一步优选的，所述遍历组件型富文本页面的元数据中结构类型数据、样式类型数据，包括：

在所述元数据中，查找页面模块的样式类型数据；

查找与所述页面模块的样式类型数据处于同一级别的主图层属性数据；

当获取所述主图层属性数据后，在所述主图层属性数据中查找组件模块的样式类型数据；

根据所述组件模块的样式类型数据，查找同一级别的子图层属性数据；

基于所述子图层属性数据，查找同一级别的样式类型数据；

其中，所述结构类型数据包括主图层属性数据和多个子图层属性数据。

进一步优选的，所述基于所述关联关系，将所述元数据转换为所述组件型富文本页面，包括：

基于所述页面模块的样式类型数据，与对应的网页属性节点的关联关系，将所述页面模块的样式类型数据，转换为所述组件富文本页面的基础结构；

基于所述组件模块的样式类型数据，与对应的网页属性节点的关联关系，将所述组件模块的样式类型数据转换为所述组件富文本页面的组件内容。

进一步优选的，在所述遍历组件型富文本页面的元数据中结构类型数据、样式类型数据之前，还包括：

解析组件型富文本页面的源文件，得到树状结构的组件型富文本页面的元数据。

进一步优选的，所述基于所述关联关系，将所述元数据转换为所述组件型富文本页面，包括：

基于所述关联关系，将所述元数据转换为所述组件型富文本页面的网页文件；

将所述网页文件上传至内容传送网络，以生成可编辑的所述组件型富文本页面。

一种组件型富文本页面生成装置，包括：

遍历模块，用于遍历组件型富文本页面的元数据中结构类型数据、样式类型数据；

关联模块，用于将所述结构类型数据、所述样式类型数据与对应的网页属性节点建立关联关系；

转换模块，用于基于所述关联关系，将所述元数据转换为所述组件型富文本页面。

进一步优选的，所述遍历模块，还用于：

在所述元数据中，查找页面模块的样式类型数据；

查找与所述页面模块的样式类型数据处于同一级别的主图层属性数据；

当获取所述主图层属性数据后，在所述主图层属性数据中查找组件模块的样式类型数据；

根据所述组件模块的样式类型数据，查找同一级别的子图层属性数据；

基于所述子图层属性数据，查找同一级别的样式类型数据；

其中，所述结构类型数据包括主图层属性数据和多个子图层属性数据。

进一步优选的，所述关联模块，还用于：

基于所述页面模块的样式类型数据，与对应的网页属性节点的关联关系，将所述页面模块的样式类型数据，转换为所述组件富文本页面的基础结构；

基于所述组件模块的样式类型数据，与对应的网页属性节点的关联关系，将所述组件模块的样式类型数据转换为所述组件富文本页面的组件内容。

进一步优选的，还包括：

解析模块，用于解析组件型富文本页面的源文件，得到树状结构的组件型富文本页面的元数据。

进一步优选的，所述转换模块，还用于：

基于所述关联关系，将所述元数据转换为所述组件型富文本页面的网页文件；

将所述网页文件上传至内容传送网络，以生成可编辑的所述组件型富文本页面。

本发明提供的一种组件型富文本页面生成方法和装置至少具有以下技术效果：

本发明将定制化业务效果图转换切分成较小的UI组件，再组合编辑生成可访问的html页面，以实现具有可定制化、便于拓展功能、便于维护且具有完整自主可控的组件型富文本页面生成方法。

附图说明

下面结合附图和具体实施方式对本发明作进一步详细说明：

图1是本发明的一种组件型富文本页面生成方法的一个实施例的示意图；

图2是本发明的转换流程中的结构数据图；

图3是本发明中一种组件型富文本页面生成装置的数据层示意图；

图4是本发明中一种组件型富文本页面生成装置的一个实施例的结构示意图。

具体实施方式

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

为使图面简洁，各图中只示意性地表示出了与本发明相关的部分，它们并不代表其作为产品的实际结构。另外，以使图面简洁便于理解，在有些图中具有相同结构或功能的部件，仅示意性地绘示了其中的一个，或仅标出了其中的一个。在本文中，“一个”不仅表示“仅此一个”，也可以表示“多于一个”的情形。

还应当进一步理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

在本文中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

另外，在本申请的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对照附图说明本发明的具体实施方式。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图，并获得其他的实施方式。

实施例一

本发明提供一种组件型富文本页面生成方法，如图1所示，包括：

S100遍历组件型富文本页面的元数据中结构类型数据、样式类型数据。

在所述遍历组件型富文本页面的元数据中结构类型数据、样式类型数据之前，还包括：

解析组件型富文本页面的源文件，得到树状结构的组件型富文本页面的元数据。

具体的，设计师提供的设计稿源文件(数据包)是可以解析并序列化成树状的数据结构，通过解析该树状结构的数据，基于得到的数据，可以通过代码还原出设计稿的样式。

S200将所述结构类型数据、所述样式类型数据与对应的网页属性节点建立关联关系。

S300基于所述关联关系，将所述元数据转换为所述组件型富文本页面。

具体的，解析设计师提供的设计稿，获得元数据。将元数据中的节点信息与web开发中的元素类型匹配后，生成web页面。

具体包括：1、解析设计稿源文件；2、解析数据结构；3、将解析出来的数据结构与web开发中的dom节点进行映射；4、生产html页面。

示例性的，如图2所示，识别切分设计稿，并生成尽可能小的UI组件模块。UI组件模块的规格主要是根据设计稿元数据来点定，通过解析数据源文件，可以得到很多的layer(图层)。其中较为重要的图层名为artboard，可将其理解为一个完整的页面模块。因此，最小组件便是以artboard为单位的设计模块，也是代码生成的最小组件。

由开发者将生成的UI组件模块的数据进行整合，开发出一个可视化的组件操作管理界面，交由内容同学使用管理，内容同学在可视化界面选择并组合组件之后保存数据，此时数据会提交到后端服务，后端服务将数据解析后生成html文件，并将生成的html文件上传到远端cdn服务，并将对应的文件存储地址保存到数据库。

其中，dom节点是指HTML DOM节点，是指网页文档对象模型节点DOM(DocumentObject Model)是指文档对象模型，通过它可以访问HTML文档的所有元素。

在实际操作场景中，目前内容管理人员可以在内容管理系统操作使用，具体包括：

比如：当一用户打开内容管理系统，进入可视化界面，在组件列表中选择具体的组件进行内容编辑，此时可对组件进文字编辑、图片上传、顺序调整、大小编辑、颜色选取等操作，在一系列操作完成之后便可以进行保存操作。

关于组件模块可以实现多功能编辑操作的方法具体包括：

在将设计稿切分完成,并以代码的形式还原之后,可在代码中添加相关属性,属性名为contentEditable＝‘true’；此时相关的网页便会编程可以编辑状态。

在本实施例中，通过将设计稿切分成尽量小的UI组件模块，开发者将生成的UI组件数据整合排列，提供出一个完整的可视化操作界面供内容同学使用，由内容同学操作组合组件模块生成可供展示访问的html页面,并将数据存储。解决了现有的富文本编辑器无法编辑生成定制化的设计稿，解决现有编辑的可维护，可拓展性较低，以及技术不受控等问题。

实施例二

基于上述实施例，在本实施例中，与上述实施例相同的部分就不一一赘述了，本实施例提供一种组件型富文本页面生成方法，具体包括：

优选的，所述遍历组件型富文本页面的元数据中结构类型数据、样式类型数据，包括：

在所述元数据中，查找页面模块的样式类型数据；查找与所述页面模块的样式类型数据处于同一级别的主图层属性数据；当获取所述主图层属性数据后，在所述主图层属性数据中查找组件模块的样式类型数据；根据所述组件模块的样式类型数据，查找同一级别的子图层属性数据；基于所述子图层属性数据，查找同一级别的样式类型数据；其中，所述结构类型数据包括主图层属性数据和多个子图层属性数据。

优选的，所述基于所述关联关系，将所述元数据转换为所述组件型富文本页面，包括：

基于所述页面模块的样式类型数据，与对应的网页属性节点的关联关系，将所述页面模块的样式类型数据，转换为所述组件富文本页面的基础结构；基于所述组件模块的样式类型数据，与对应的网页属性节点的关联关系，将所述组件模块的样式类型数据转换为所述组件富文本页面的组件内容。

示例性的，如图3所示的转换流程图，具体的转换流程包括：

1.解析设计稿源文件。

2.查找artboard属性。

3.查找artboard属性中的style数据，根据style属性先转换成一个整体的页面基础结构，比如宽高、背景色等。

4.查找与style同级的layers属性，layers数据主要构成页面中的内容模块，继续查找layers属性中的style属性，根据此style属性转换成页面模块的中的数据。

5.查找layers子属性中的layers属性，然后执行步骤4。

6.以此往复直到将layers属性递归遍历完成，最终转换成对应页面。

优选的，所述基于所述关联关系，将所述元数据转换为所述组件型富文本页面，包括：

基于所述关联关系，将所述元数据转换为所述组件型富文本页面的网页文件；将所述网页文件上传至内容传送网络，以生成可编辑的所述组件型富文本页面。

具体的，解析设计师提供的设计稿，将解析出的设计稿元数据解析成树状结构的数据。遍历设计稿元数据中的结构类型，样式类型与网页开发中对应的属性关联。元数据中的数据类型与页面节点关系一一对应之后，输出代码到以.html后缀结尾的文件中。将生成的文件上传CDN，CDN(Content Delivery Network)是指内容分发网络，也称为内容传送网络。此时页面就可以接受用户访问了。

在本实施例中，将设计师针对定制化业务所设计的效果图转换切分成较小的UI组件，再由内容同学组合编辑生成可访问的html页面，以满足定制化App内需要展示的多样性内容需求。

本实施例提供了一个具有可定制化、便于拓展功能、便于维护且具有完整自主可控的组件型富文本页面生成方法。

实施例三

基于上述实施例，在本实施例中，与上述实施例相同的部分就不一一赘述了，本实施例提供一种组件型富文本页面生成装置，如图3、4所示，包括：

遍历模块401，用于遍历组件型富文本页面的元数据中结构类型数据、样式类型数据。

关联模块402，用于将所述结构类型数据、所述样式类型数据与对应的网页属性节点建立关联关系。

转换模块403，用于基于所述关联关系，将所述元数据转换为所述组件型富文本页面。

具体的，在本实施例中，组件型富文本页面生成装置包括细颗粒度的组件型富文本编辑器。

示例性的，如图3所示，在本实施例中，通过将设计稿切分成尽量小的UI组件模块，开发者将生成的UI组件数据整合排列，提供出一个完整的可视化操作界面供内容同学使用，由内容同学操作组合组件模块生成可供展示访问的html页面,并将数据存储。解决了现有的富文本编辑器无法编辑生成定制化的设计稿，解决现有编辑的可维护，可拓展性较低，以及技术不受控等问题。

在访问层中包括UI设计师和内容运营进行操作，UI设计师制作设计稿。在业务层中，接收设计稿并进行识别，分析UI设计师上传的设计稿并切分设计稿生成组件。内容运营组合业务组件，具体包括识别组件、组合组件、生成页面、上传CDN。在业务层中，还需要完成数据对接，执行组件存库、页面地址存库、页面元数据存库、页面地址更新、页面元数据更新。将上述数据都存进数据库，即持久层。基于上述数据进行用户管理、日志记录以及用户鉴权。

优选的，所述遍历模块，还用于：

在所述元数据中，查找页面模块的样式类型数据；

查找与所述页面模块的样式类型数据处于同一级别的主图层属性数据；

当获取所述主图层属性数据后，在所述主图层属性数据中查找组件模块的样式类型数据；

根据所述组件模块的样式类型数据，查找同一级别的子图层属性数据；

基于所述子图层属性数据，查找同一级别的样式类型数据；

其中，所述结构类型数据包括主图层属性数据和多个子图层属性数据。

优选的，所述关联模块，还用于：

基于所述页面模块的样式类型数据，与对应的网页属性节点的关联关系，将所述页面模块的样式类型数据，转换为所述组件富文本页面的基础结构；

基于所述组件模块的样式类型数据，与对应的网页属性节点的关联关系，将所述组件模块的样式类型数据转换为所述组件富文本页面的组件内容。

优选的，还包括：

解析模块，用于解析组件型富文本页面的源文件，得到树状结构的组件型富文本页面的元数据。

优选的，所述转换模块，还用于：

基于所述关联关系，将所述元数据转换为所述组件型富文本页面的网页文件；

将所述网页文件上传至内容传送网络，以生成可编辑的所述组件型富文本页面。

在本实施例中，通过将设计稿切分成尽量小的UI组件模块，开发者将生成的UI组件数据整合排列，提供出一个完整的可视化操作界面供内容同学使用，由内容同学操作组合组件模块生成可供展示访问的html页面,并将数据存储。解决了现有的富文本编辑器无法编辑生成定制化的设计稿，解决现有编辑的可维护，可拓展性较低，以及技术不受控等问题。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详细描述或记载的部分，可以参见其他实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

在本申请所提供的实施例中，应该理解到，所揭露的装置/电子设备和方法，可以通过其他的方式实现。示例性的，以上所描述的装置/电子设备实施例仅仅是示意性的，示例性的，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，示例性的，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性、机械或其他的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可能集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

应当说明的是，上述实施例均可根据需要自由组合。以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。