CN117032666A - 基于编辑器的页面编辑方法、装置、终端设备及存储介质 - Google Patents

Abstract

本发明公开了一种基于编辑器的页面编辑方法、装置、终端设备及存储介质，方法包括：通过处理器执行软件应用并在显示器上渲染得到编辑器界面；其中，编辑器界面包括页面编辑界面和页面预览界面；获取待编辑页面，并渲染在页面预览界面；响应作用于待编辑页面中任意一组件的选定操作，确定选定组件，并生成选定组件所对应的组件编辑界面；其中，所述组件编辑界面包括：与选定组件对应的若干可编辑参数；响应用户在组件编辑界面中对可编辑参数的修改操作，获取选定组件的参数名及修改后的参数值；根据选定组件的参数名，确定选定组件所对应的原始参数，将原始参数替换为修改后的参数值；在页面预览界面中根据修改后的参数值对选定组件进行重渲染。

Description

基于编辑器的页面编辑方法、装置、终端设备及存储介质

技术领域

本发明涉及编辑器生成技术领域，尤其涉及一种基于编辑器的页面编辑方法、装置、终端设备及存储介质。

背景技术

随着信息技术的发展，媒体行业页面编辑器能够为用户提供更多的服务，媒体平台的内容提供方可以通过对内容页面进行编辑和美化，以提高用户体验。在现有的媒体行业中，在对页面内容进行编辑时，需要对页面内容所对应的代码进行直接修改，以完成对页面内容的编辑；这种页面编辑方式对操作人员的技术要求较高，操作较繁琐。

发明内容

本发明实施例提供一种基于编辑器的页面编辑方法、装置、终端设备及存储介质，能有效解决现有技术在页面修改时需对底层代码直接修改的问题，本发明通过简单的可视化选取组件和组件参数修改的操作，降低了对页面内容编辑的操作人员的技术要求，提高了页面编辑的效率。

本发明一实施例提供一种基于编辑器的页面编辑方法，包括：

通过处理器执行软件应用并在显示器上渲染得到编辑器界面；其中，所述编辑器界面包括页面编辑界面和页面预览界面；

获取待编辑页面，并将所述待编辑页面渲染在所述页面预览界面；

响应作用于待编辑页面中任意一组件的选定操作，确定选定组件，并生成选定组件所对应的组件编辑界面；其中，所述组件编辑界面包括：与所述选定组件对应的若干可编辑参数；

响应用户在组件编辑界面中对可编辑参数的修改操作，获取所述选定组件的参数名以及对应的修改后的参数值；

根据选定组件的参数名，确定选定组件所对应的原始参数，将所述原始参数替换为修改后的参数值；

在页面预览界面中根据修改后的参数值对选定组件进行重渲染。

进一步地，所述编辑器界面还包括：页面选取界面；其中，所述页面选取界面包括若干由编辑器提供的模板页面；

所述获取待编辑页面，包括：

响应作用于所述页面选取界面的模板页面选取操作，将所选取的模板页面作为待编辑页面。

进一步地，所述编辑器界面还包括：代码导入控件；

所述获取待编辑页面，包括：

响应作用于所述代码导入控件的SVG格式代码导入操作，获取导入的SVG格式代码；

根据所述SVG格式代码生成所述待编辑页面。

进一步地，所述根据所述SVG格式代码生成所述待编辑页面，包括：

识别所述SVG格式代码中的顶层标签和与顶层标签所对应的结束标签；

根据所述顶层标签和与顶层标签所对应的结束标签将SVG格式代码切割为若干代码片段，并将每一代码片段转换为一对应的数组；

对于每一数组，用正则将数组中SVG格式的标签属性解析成json对象属性，生成属性转换后的数组；

构建初始化的json树对象，识别属性转换后的数组中的json对象属性；

重复执行json对象属性写入json树对象的操作，直至将属性转换后的数组中的所有json对象属性写入json树对象中；

根据所有的json树对象生成所述待编辑页面；

其中，所述json对象属性写入json树对象的操作，包括：

在识别到json对象属性为开头标签或与开头标签对应的相邻标签时，向json树对象当前层级写入json对象属性；在识别到json对象属性为子标签时，向子标签所对应的父标签的json对象属性所在的json树对象层级的下一层级写入json对象属性；在识别到与所述子标签对应的结束标签或与所述开头标签对应的结束标签时，返回对应子标签在json树对象中层级的上一层级。

进一步地，所述根据所述顶层标签和与顶层标签所对应的结束标签将SVG格式代码切割为若干代码片段，包括：

对所述SVG格式代码中每一标签逐一进行识别；

在识别到一顶层标签时，确定代码片段的起始代码位置，直至识别到与所述顶层标签对应的结束标签时，确定代码片段的结束代码位置；

根据代码片段的起始代码位置和对应的结束代码位置进行SVG格式代码的切割，生成若干代码片段。

进一步地，所述确定选定组件，并生成选定组件所对应的组件编辑界面，包括：

确定选定组件所对应的组件代码，在识别到组件代码中包含ur l或img标签时，确定所述选定组件为图片组件，生成图片组件编辑界面；其中，所述图片组件编辑界面的可编辑参数包括：图片宽度、图片长度、图片位置、图片内容和图片动画效果；

在识别到组件代码中仅包含字符串时，确定所述选定组件为文本组件，生成文本组件编辑界面；其中，所述文本组件编辑界面的可编辑参数包括：文本字体、文本字体大小、文本显示效果和文本动画效果。

在上述方法项实施例的基础上，本发明对应提供了装置项实施例；

本发明一实施例对应提供了一种基于编辑器的页面编辑装置，包括：编辑器界面渲染模块、待编辑页面渲染模块、组件选定模块和页面编辑模块；

所述编辑器界面渲染模块，用于通过处理器执行软件应用并在显示器上渲染得到编辑器界面；其中，所述编辑器界面包括页面编辑界面和页面预览界面；

所述待编辑页面渲染模块，用于获取待编辑页面，并将所述待编辑页面渲染在所述页面预览界面；

所述组件选定模块，用于响应作用于待编辑页面中任意一组件的选定操作，确定选定组件，并生成选定组件所对应的组件编辑界面；其中，所述组件编辑界面包括：与所述选定组件对应的若干可编辑参数；

所述页面编辑模块，用于响应用户在组件编辑界面中对可编辑参数的修改操作，获取所述选定组件的参数名以及对应的修改后的参数值；根据选定组件的参数名，确定选定组件所对应的原始参数，将所述原始参数替换为修改后的参数值；在页面预览界面中根据修改后的参数值对选定组件进行重渲染。

本发明另一实施例提供了一种终端设备，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述处理器执行所述计算机程序时实现上述发明实施例所述的一种基于编辑器的页面编辑方法。

本发明另一实施例提供了一种存储介质，所述存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述存储介质所在设备执行上述发明实施例所述的一种基于编辑器的页面编辑方法。

通过实施本发明具有如下有益效果：

本发明提供了一种基于编辑器的页面编辑方法、装置、终端设备及存储介质，该方法通过获取待编辑页面，将待编辑页面渲染在页面预览界面中，并根据用户在待编辑页面中的组件选取操作，确定对应选定组件的页面编辑界面；从而使用户在页面编辑界面中对选定组件的参数值进行修改，即可实现对页面中所包含的组件的编辑操作，同时编辑器响应用户的参数值修改操作将修改后的参数值重新赋值给选定组件中对应的参数，并对选定组件进行重新渲染；通过该方法避免了在页面修改时需对底层代码直接修改的问题，且通过简单的可视化选取组件和组件参数修改的操作，降低了对页面内容编辑的操作人员的技术要求，提高了页面编辑的效率。

附图说明

图1是本发明一实施例提供的一种基于编辑器的页面编辑方法的流程示意图。

图2是本发明一实施例提供的一种编辑器界面在完成界面渲染后的显示效果图。

图3是本发明一实施例提供的一种json格式数组的代码。

图4是本发明一实施例提供的文本组件编辑界面。

图5是本发明一实施例提供的图片组件编辑界面。

图6是本发明一实施例提供的文本快捷编辑面板。

图7是本发明一实施例提供的图片快捷编辑面板。

图8是本发明一实施例提供的一种基于编辑器的页面编辑装置的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，是本发明一实施例提供的一种基于编辑器的页面编辑方法，包括：

步骤S1：通过处理器执行软件应用并在显示器上渲染得到编辑器界面；其中，所述编辑器界面包括页面编辑界面和页面预览界面；

步骤S2：获取待编辑页面，并将所述待编辑页面渲染在所述页面预览界面；

步骤S3：响应作用于待编辑页面中任意一组件的选定操作，确定选定组件，并生成选定组件所对应的组件编辑界面；其中，所述组件编辑界面包括：与所述选定组件对应的若干可编辑参数；

步骤S4：响应用户在组件编辑界面中对可编辑参数的修改操作，获取所述选定组件的参数名以及对应的修改后的参数值；

步骤S5：根据选定组件的参数名，确定选定组件所对应的原始参数，将所述原始参数替换为修改后的参数值；

步骤S6：在页面预览界面中根据修改后的参数值对选定组件进行重渲染。

对于步骤S1、如图2所示，是本发明一实施例提供的一种编辑器界面在完成界面渲染后的显示效果图；在本实施例中，所采用的编辑器为SVG编辑器，在所述SVG编辑器界面中，至少包括页面编辑界面和页面预览界面；页面预览界面主要用于显示待编辑页面，以及提供用户对待编辑页面中需编辑的组件的操作的界面；页面编辑界面主要用于提供用户对页面预览界面中的待编辑页面在编辑页面时所需使用到的编辑工具，待编辑页面中包括多种待编辑页面的编辑方式，如提供样式修改工具、预加载的模板页面和动画效果工具等；各编辑方式所对应的编辑控件在待编辑页面中的布局方式不受限制，图2所提供的仅为一种可能的布局方式。

对于步骤S2、获取待编辑界面，并将其导入SVG编辑器，以使SVG编辑器将待编辑页面显示在页面预览界面中。

在一个优选的实施例中，所述编辑器界面还包括：页面选取界面；其中，所述页面选取界面包括若干由编辑器提供的模板页面；所述获取待编辑页面，包括：响应作用于所述页面选取界面的模板页面选取操作，将所选取的模板页面作为待编辑页面。

具体的，用户可通过在页面选取界面中选取所需的模板页面，以使SVG编辑器响应用户选取模板页面的操作，将所选取的模板页面在页面预览界面进行渲染，继而使用户基于所选取的模板页面作为待编辑页面。

在另一个优选的实施例中，所述编辑器界面还包括：代码导入控件；所述获取待编辑页面，包括：响应作用于所述代码导入控件的SVG格式代码导入操作，获取导入的SVG格式代码；根据所述SVG格式代码生成所述待编辑页面。

具体的，除采用SVG编辑器预加载的模板页面作为待编辑页面外，还可通过SVG编辑器所提供的代码导入控件来生成对应的待编辑页面；通常所导入的代码文件需是与SVG编辑器所对应的SVG格式代码文件。

优选的，SVG编辑器还提供有如导入文章控件、导出HTML控件、手机预览控件和快速保存控件等功能性控件；从而使用户在使用导入文章控件时，可将导入文章渲染到页面预览界面，完成对导入文章的编辑；在使用到出HTML控件时，将页面预览界面中的页面内容转化为对应HTML格式的文件；在使用手机预览控件时，页面预览界面响应用户所选定的目标预览手机型号，将页面预览界面中的内容放大或缩小至适应用户选定手机型号的预览界面中，使用户可便捷查看当前待编辑页面在选定手机型号下的显示效果；在使用快速保存控件时，可选的，将待编辑页面转化为图片格式输出给用户，或将当前待编辑界面缓存至SVG编辑器的草稿中。

在一个优选的实施例中，所述根据所述SVG格式代码生成所述待编辑页面，包括：识别所述SVG格式代码中的顶层标签和与顶层标签所对应的结束标签；根据所述顶层标签和与顶层标签所对应的结束标签将SVG格式代码切割为若干代码片段，并将每一代码片段转换为一对应的数组；对于每一数组，用正则将数组中SVG格式的标签属性解析成json对象属性，生成属性转换后的数组；构建初始化的json树对象，识别属性转换后的数组中的json对象属性；重复执行json对象属性写入json树对象的操作，直至将属性转换后的数组中的所有json对象属性写入json树对象中；根据所有的json树对象生成所述待编辑页面；其中，所述json对象属性写入json树对象的操作，包括：在识别到json对象属性为开头标签或与开头标签对应的相邻标签时，向json树对象当前层级写入json对象属性；在识别到json对象属性为子标签时，向子标签所对应的父标签的json对象属性所在的json树对象层级的下一层级写入json对象属性；在识别到与所述子标签对应的结束标签或与所述开头标签对应的结束标签时，返回对应子标签在json树对象中层级的上一层级。

具体的，将导入的SVG格式代码转化为待编辑页面需经过将导入的SVG格式代码转化为json格式的json树对象后，再根据json树对象生成待编辑页面；将SVG格式代码转化为json树对象主要包括以下步骤：

步骤S101：识别SVG格式代码中的<svg>标签(即上述顶层标签)和与之配对出现的</svg>标签(即上述与顶层标签所对应的结束标签)；

步骤S201：根据所述顶层标签和与顶层标签所对应的结束标签将SVG格式代码切割为若干代码片段，并将每一代码片段转换为一对应的数组；

在一个优选的实施例中，所述根据所述顶层标签和与顶层标签所对应的结束标签将SVG格式代码切割为若干代码片段，包括：对所述SVG格式代码中每一标签逐一进行识别；在识别到一顶层标签时，确定代码片段的起始代码位置，直至识别到与所述顶层标签对应的结束标签时，确定代码片段的结束代码位置；根据代码片段的起始代码位置和对应的结束代码位置进行SVG格式代码的切割，生成若干代码片段。

具体的，对于步骤S201、以<svg>标签和</svg>标签作为一组对切割标识，对SVG格式代码进行切割，得到切割后的若干代码片段，并将每一以<svg>标签为开头，以</svg>标签为结尾的代码片段通过预设的正则表达式转换为对应的数组格式；例如：在一代码片段为：“<svg><g>...</g></svg>”时，通过设定正则表达式“/<[^>]*？>|([^<]*)？/g”对上述代码片段进行转换，继而得到对应数组格式的代码片段：“[<svg>,<g>,...,</g>,</svg]”。

步骤S301：在获取到若干由代码片段转换后的数组后，需将每一代码片段转化为对应的json格式。对于每一数组均需执行以下步骤:

步骤S301(a)：用正则将数组中的SVG格式的标签属性解析成json对象属性，生成属性转换后的数组；

为更好的理解步骤S301(a)中数组的转换，下面进行举例说明：

一待转换的SVG格式代码如下：

通过上述列举的SVG格式代码，可以理解的是，SVG格式代码是一种xml结构；在当前实施例中，采用约定好的正则表达式，将SVG格式代码的xml结构进行抽象归类成规则的过程即为将SVG格式的标签属性解析成json对象属性的过程，在执行该操作后，可得到如图3所示的与上述SVG格式代码对应转换后的json格式数组。在转换完成后，即可从转换后的数组中获取原始代码所包含的属性及该属性对应的属性值。例如：在标签animate中所包含的属性dur的值为10s，在转换后，即可从数组查找到标签名为animate(即图3中的tagName:"animate")同一数组下的dur，并确定其所对应的值为10s。

需要说明的是，json对象属性的确定取决于SVG代码中所包含的元素，例如在上述例子中json对象属性有诸如svg、rect、animate等标签名(tabName)、id及其他标签属性如style、class等。

步骤S301(b)：构建初始化的json树对象，识别属性转换后的数组中的json对象属性；

需要说明的是，json对象属性与代码片段中的代码标签对应，即通过json对象属性可确定识别过程中的标签属性；如：属性转换后的数组为：“[<svg>,<g>,<span>...,</span>，</g>,<g>,...,</g></svg>]”时，<svg>是开头标签，</svg>是<svg>标签对应的结束标签，“<g>,<span>...,</span>，</g>”“<g>,...,</g>”是“<svg>...</svg>”下的两个同级相邻的代码，即“<g>,<span>...,</span>，</g>”中的<g>标签和“<g>,...,</g>”中的<g>标签为相邻标签；两者的<g>标签均为<svg>的子标签，</g>是与各自对应的<g>的结束标签；<span>标签则是<g>标签的子标签。

步骤S301(c)：根据对json对象属性的识别结果生成一json树对象；

例如：属性转换后的数组为：“[<svg>,<g>,<span>...,</span>，</g>,<g>,...,</g></svg>]”时，对其进行依次识别，在识别到<svg>时，将其写入json树对象的第一层级，在识别到第一个<g>时，将其写入<svg>下的第二层级；在识别到<span>时，将其写入第一个<g>下的第三层级；在识别到</span>时，返回第一个<g>所在的第二层级；在识别到第一个</g>时，返回<svg>所在的第一层级；在识别到第二个<g>时，将其写入<svg>下的第二层级，且与第一个<g>为并列层级关系；在识别到第二个</g>时，返回<svg>所在的第一层级；在识别到</svg>时，结束对应json树对象的写入，生成json树对象。

步骤S401：根据所有数组所生成的json树对象合并成一总的json树，继而根据json树生成对应的待编辑页面。可选的，生成待编辑页面的方式可以是通过引入289编辑器或CMS等编发系统。

通过上述方法构建了json树所生成的待编辑页面，由于json树中对每一json树对象及各json树对象中的层级进行了逐一分级写入，因此，在后续对待编辑页面中的内容进行修改时，可根据需修改的内容在json树中准确定位到json树的哪一分支的哪一参数需要修改，使得查找和修改时所需的时间更少，能更快的响应用户的编辑操作，提高编辑效率。

需要补充的是，在生成json树对象时，若识别到json对象属性中包含<backgroundImage>、<background>或<img>等用于指示图片的代码时，需判断其是否具有对应的ur l地址，若存在，则认为该json树对象在生成待编辑页面时对应的组件包含图片组件；若识别到json对象属性中各标签均是字符串，则认为该json树对象在生成待编辑页面时对应的组件为文本组件。

对于步骤S3、SVG编辑器响应用户在页面预览界面中对待编辑页面中的组件选定操作，继而根据所选定的组件向用户生成对应的组件编辑界面。

在一个优选的实施例中，所述确定选定组件，并生成选定组件所对应的组件编辑界面，包括：确定选定组件所对应的组件代码，在识别到组件代码中包含ur l或img标签时，确定所述选定组件为图片组件，生成图片组件编辑界面；其中，所述图片组件编辑界面的可编辑参数包括：图片宽度、图片长度、图片位置、图片内容和图片动画效果；在识别到组件代码中仅包含字符串时，确定所述选定组件为文本组件，生成文本组件编辑界面；其中，所述文本组件编辑界面的可编辑参数包括：文本字体、文本字体大小、文本显示效果和文本动画效果。

待编辑页面的组件主要包括文本类型组件和图片类型组件；根据选定组件类型的不同向用户所展示的组件编辑界面也不尽相同。如图4所示是本发明实施例提供的文本组件编辑界面。在用户选取文本控件时，向用户展示该界面，其中，用户选定的文本在文本组件编辑界面的图层展示界面中以高亮效果进行展示，为便于用户对待编辑页面中其余文本进行编辑，其余文本所对应的组件以与当前选定文本图层并列的其他图层在图层展示界面进行展示，且每一文本对应于一图层，以便于用户选取其他图层对文本进行快捷修改；在选定一文本组件时，SVG编辑器渲染对应的图层属性界面，提供对当前文本的字体、文本字体大小、文本显示效果和文本动画效果等参数，从而使用户可根据所提供的参数对待编辑页面中的文本进行修改。

如图5所示是本发明实施例提供的图片组件编辑界面。在用户选取图片控件时，向用户展示该界面，其中，用户选定的图片在图片组件编辑界面的图层展示界面中以高亮效果进行展示，为便于用户对待编辑页面中其余图片进行编辑，其余图片所对应的组件以与当前选定图片图层并列的其他图层在图层展示界面进行展示，且每一图片对应于一图层，以便于用户选取其他图层对图片进行快捷修改；在选定一图片组件时，SVG编辑器渲染对应的图层属性界面，提供对当前图片宽度、图片长度、图片位置、图片内容和图片动画效果等参数，从而使用户可根据所提供的参数对待编辑页面中的图片进行修改。

对于步骤S4和步骤S5、根据用户在组件编辑界面中对所提供的可编辑参数的参数值修改操作，获取选定组件的参数名以及对应的修改后的参数值，并根据选定组件的参数名，确定选定组件所对应的原始参数，将所述原始参数替换为修改后的参数值。例如：在图片组件编辑界面中替换图片的操作，获取替换后的图片地址和替换的参数为图片内容；根据图片内容在该图片组件所对应的代码中找到用于表示图片内容的字段及该字段的参数值，将该字段的参数值修改为替换后的图片地址。

对于步骤S6、在完成步骤S5的替换操作后，在页面预览界面中对该选定组件进行重新渲染。

优选的，除在待编辑页面中对组件的选定操作可对组件进行修改外，在用户选定一组件进行拖动时，若所拖动的组件为文本组件，SVG编辑器渲染如图6所示的文本快捷编辑面板以供用户对文本进行快捷编辑；若所拖动的组件为图片组件时，SVG编辑器渲染如图7所示的图片快捷编辑面板以供用户对图片进行快捷编辑。通过响应用户拖拽组件的方式向用户提供快捷编辑面板，使得对页面中组件的编辑操作更为便捷，进一步提高了页面编辑的效率。

在上述方法项实施例的基础上，本发明对应提供了装置项实施例。

如图8所示，本发明一实施例提供了一种基于编辑器的页面编辑装置，包括：编辑器界面渲染模块、待编辑页面渲染模块、组件选定模块和页面编辑模块；

所述编辑器界面渲染模块，用于通过处理器执行软件应用并在显示器上渲染得到编辑器界面；其中，所述编辑器界面包括页面编辑界面和页面预览界面；

所述待编辑页面渲染模块，用于获取待编辑页面，并将所述待编辑页面渲染在所述页面预览界面；

所述组件选定模块，用于响应作用于待编辑页面中任意一组件的选定操作，确定选定组件，并生成选定组件所对应的组件编辑界面；其中，所述组件编辑界面包括：与所述选定组件对应的若干可编辑参数；

所述页面编辑模块，用于响应用户在组件编辑界面中对可编辑参数的修改操作，获取所述选定组件的参数名以及对应的修改后的参数值；根据选定组件的参数名，确定选定组件所对应的原始参数，将所述原始参数替换为修改后的参数值；在页面预览界面中根据修改后的参数值对选定组件进行重渲染。

需说明的是，以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。另外，本发明提供的装置项实施例附图中，模块之间的连接关系表示它们之间具有通信连接，具体可以实现为一条或多条通信总线或信号线。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

所述领域的技术人员可以清楚地了解到，为了方便和简洁，上述描述的装置的具体工作过程，可参考前述方法实施例中对应的过程，在此不再赘述。

在上述方法项实施例的基础上，本发明对应提供了终端设备项实施例。

本发明一实施例提供了一种终端设备，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述处理器执行所述计算机程序时实现本发明中任意一项所述的一种基于编辑器的页面编辑方法。

终端设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述终端设备可包括，但不仅限于，处理器、存储器。

所称处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述终端设备的控制中心，利用各种接口和线路连接整个终端设备的各个部分。

所述存储器可用于存储所述计算机程序，所述处理器通过运行或执行存储在所述存储器内的计算机程序，以及调用存储在存储器内的数据，实现所述终端设备的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据手机的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

在上述方法项实施例的基础上，本发明对应提供了存储介质项实施例。

本发明一实施例提供了一种存储介质，所述存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述存储介质所在设备执行本发明中任意一项所述的一种基于编辑器的页面编辑方法。

所述存储介质为计算机可读存储介质，所述计算机程序存储在所述计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。

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

Claims (9)

1.一种基于编辑器的页面编辑方法，其特征在于，包括：

通过处理器执行软件应用并在显示器上渲染得到编辑器界面；其中，所述编辑器界面包括页面编辑界面和页面预览界面；

获取待编辑页面，并将所述待编辑页面渲染在所述页面预览界面；

响应作用于待编辑页面中任意一组件的选定操作，确定选定组件，并生成选定组件所对应的组件编辑界面；其中，所述组件编辑界面包括：与所述选定组件对应的若干可编辑参数；

响应用户在组件编辑界面中对可编辑参数的修改操作，获取所述选定组件的参数名以及对应的修改后的参数值；

根据选定组件的参数名，确定选定组件所对应的原始参数，将所述原始参数替换为修改后的参数值；

在页面预览界面中根据修改后的参数值对选定组件进行重渲染。

2.如权利要求1所述的一种基于编辑器的页面编辑方法，其特征在于，所述编辑器界面还包括：页面选取界面；其中，所述页面选取界面包括若干由编辑器提供的模板页面；

所述获取待编辑页面，包括：

响应作用于所述页面选取界面的模板页面选取操作，将所选取的模板页面作为待编辑页面。

3.如权利要求1所述的一种基于编辑器的页面编辑方法，其特征在于，所述编辑器界面还包括：代码导入控件；

所述获取待编辑页面，包括：

响应作用于所述代码导入控件的SVG格式代码导入操作，获取导入的SVG格式代码；

根据所述SVG格式代码生成所述待编辑页面。

4.如权利要求3所述的一种基于编辑器的页面编辑方法，其特征在于，所述根据所述SVG格式代码生成所述待编辑页面，包括：

识别所述SVG格式代码中的顶层标签和与顶层标签所对应的结束标签；

根据所述顶层标签和与顶层标签所对应的结束标签将SVG格式代码切割为若干代码片段，并将每一代码片段转换为一对应的数组；

对于每一数组，用正则将数组中SVG格式的标签属性解析成json对象属性，生成属性转换后的数组；

构建初始化的json树对象，识别属性转换后的数组中的json对象属性；

重复执行json对象属性写入json树对象的操作，直至将属性转换后的数组中的所有json对象属性写入json树对象中；

根据所有的json树对象生成所述待编辑页面；

其中，所述json对象属性写入json树对象的操作，包括：

在识别到json对象属性为开头标签或与开头标签对应的相邻标签时，向json树对象当前层级写入json对象属性；在识别到json对象属性为子标签时，向子标签所对应的父标签的json对象属性所在的json树对象层级的下一层级写入json对象属性；在识别到与所述子标签对应的结束标签或与所述开头标签对应的结束标签时，返回对应子标签在json树对象中层级的上一层级。

5.如权利要求4所述的一种基于编辑器的页面编辑方法，其特征在于，所述根据所述顶层标签和与顶层标签所对应的结束标签将SVG格式代码切割为若干代码片段，包括：

对所述SVG格式代码中每一标签逐一进行识别；

在识别到一顶层标签时，确定代码片段的起始代码位置，直至识别到与所述顶层标签对应的结束标签时，确定代码片段的结束代码位置；

根据代码片段的起始代码位置和对应的结束代码位置进行SVG格式代码的切割，生成若干代码片段。

6.如权利要求1所述的一种基于编辑器的页面编辑方法，其特征在于，所述确定选定组件，并生成选定组件所对应的组件编辑界面，包括：

确定选定组件所对应的组件代码，在识别到组件代码中包含url或img标签时，确定所述选定组件为图片组件，生成图片组件编辑界面；其中，所述图片组件编辑界面的可编辑参数包括：图片宽度、图片长度、图片位置、图片内容和图片动画效果；

在识别到组件代码中仅包含字符串时，确定所述选定组件为文本组件，生成文本组件编辑界面；其中，所述文本组件编辑界面的可编辑参数包括：文本字体、文本字体大小、文本显示效果和文本动画效果。

7.一种基于编辑器的页面编辑装置，其特征在于，包括：编辑器界面渲染模块、待编辑页面渲染模块、组件选定模块和页面编辑模块；

所述编辑器界面渲染模块，用于通过处理器执行软件应用并在显示器上渲染得到编辑器界面；其中，所述编辑器界面包括页面编辑界面和页面预览界面；

所述待编辑页面渲染模块，用于获取待编辑页面，并将所述待编辑页面渲染在所述页面预览界面；

所述组件选定模块，用于响应作用于待编辑页面中任意一组件的选定操作，确定选定组件，并生成选定组件所对应的组件编辑界面；其中，所述组件编辑界面包括：与所述选定组件对应的若干可编辑参数；

所述页面编辑模块，用于响应用户在组件编辑界面中对可编辑参数的修改操作，获取所述选定组件的参数名以及对应的修改后的参数值；根据选定组件的参数名，确定选定组件所对应的原始参数，将所述原始参数替换为修改后的参数值；在页面预览界面中根据修改后的参数值对选定组件进行重渲染。

8.一种终端设备，其特征在于，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所诉处理器执行所述计算机程序时实现如权利要求1至6中任意一项所述的一种基于编辑器的页面编辑方法。

9.一种介质，其特征在于，所述介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述介质所在设备执行如权利要求1至6中任意一项所述的一种基于编辑器的页面编辑方法。