CN108495192B - 页面编辑处理方法及装置 - Google Patents

Abstract

本发明实施例提供了一种页面编辑处理方法及装置，所述方法包括：对添加到页面编辑器的当前编辑页面中的页面组件进行初始化；通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据；根据用户提供的自定义配置数据更新所述页面组件的组件状态。本发明能对当前编辑页面中的页面组件进行自定义设计，实现页面功能和样式的多样化，提高开发效率，节约开发成本。

Description

页面编辑处理方法及装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种页面编辑处理方法及装置。

背景技术

目前，随着网络通信技术的进步和宽带网络的提速，网络视频直播得到了越来越多的应用，而且越来越受到大家的欢迎。越来越多的观众会观看主播的直播，而且为了吸引更多的观众，满足观众的各种需求，直播间经常有各种专题活动。

但是，不同专题活动对应的直播页面功能各不一样，样式也是五花八门，无法通用，甚至页面某个区域的html脚本也是需要经常更换，结构不固定，进而导致开发效率比较低，开发成本较高。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的页面编辑处理方法及装置。

本发明的一个方面，提供了一种页面编辑处理方法，所述方法包括：

对添加到页面编辑器的当前编辑页面中的页面组件进行初始化；

通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据；

根据用户提供的自定义配置数据更新所述页面组件的组件状态。

其中，所述对添加到页面编辑器的当前编辑页面中的页面组件进行初始化，包括：

获取所述当前编辑页面中的页面组件在进行当前页面编辑的上一次页面编辑时的历史组件状态数据，根据获取到的历史组件状态数据对所述页面组件进行初始化，或

根据所述当前编辑页面中的页面组件对应的默认组件状态数据对所述页面组件进行初始化。

其中，所述通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据，包括：

监测所述页面组件对应的属性编辑框触发的change事件；

当监测到所述页面组件对应的属性编辑框触发的change事件时，将用户在所述属性编辑框内输入的数据作为用户为所述页面组件提供的自定义配置数据。

其中，所述根据用户提供的自定义配置数据更新所述页面组件的组件状态，包括：

根据所述自定义配置数据对应的属性编辑框的属性类型获取所述自定义配置数据对应的组件属性标识；

根据所述组件属性标识以及所述页面组件的组件标识生成相应组件属性的状态更新标识；

根据预先建立的状态更新标识与用于对页面组件中各个组件属性进行状态更新的回调函数之间的对应关系，查找相应的回调函数；

执行获取到的回调函数以更新相应页面组件的组件属性。

其中，所述执行获取到的回调函数以更新相应页面组件的属性状态，包括：

若所述自定义配置数据对应的组件属性为HTML模板或可执行脚本，则根据所述页面组件的组件标识查找所述自定义配置数据在模板引擎中的位置，将解码后的自定义配置数据传入对应的位置，并将传入数据后的模板引擎解析成目标html模板，将得到的得到目标html模板添加到所述页面组件的父容器；

若所述自定义配置数据对应的组件属性为css样式或JavaScript脚本，则根据所述自定义配置数据生成对应的link标签或script标签，将所述link标签或script标签插入在所述页面组件所属页面的html头部。

本发明的另一个方面，提供了一种页面编辑处理装置，所述装置包括：

初始化模块，用于对添加到页面编辑器的当前编辑页面中的页面组件进行初始化；

获取模块，用于通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据；

处理模块，用于根据用户提供的自定义配置数据更新所述页面组件的组件状态。

其中，所述初始化模块，具体用于获取所述当前编辑页面中的页面组件在进行当前页面编辑的上一次页面编辑时的历史组件状态数据，根据获取到的历史组件状态数据对所述页面组件进行初始化，或，根据所述当前编辑页面中的页面组件对应的默认组件状态数据对所述页面组件进行初始化。

其中，所述获取模块，包括：

检测单元，用于监测所述页面组件对应的属性编辑框触发的change事件；

获取单元，用于当监测到所述页面组件对应的属性编辑框触发的change事件时，将用户在所述属性编辑框内输入的数据作为用户为所述页面组件提供的自定义配置数据。

此外，本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上所述方法的步骤。

此外，本发明还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上所述方法的步骤。

本发明实施例提供的页面编辑处理方法及装置，通过为页面编辑器可添加的页面组件设置对应的属性编辑框，为用户提供页面组件自定义数据的配置入口，通过页面组件对应的属性编辑框获取用户为该页面组件提供的自定义配置数据，并基于自定义配置数据更新页面组件的组件状态。本发明能对当前编辑页面中的页面组件进行自定义设计，实现页面功能和样式的多样化，提高开发效率，节约开发成本。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1为本发明实施例的一种页面编辑处理方法的流程图；

图2为本发明实施例的一种页面编辑处理装置的结构框图；

图3为本发明实施例的计算机设备的示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本发明所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非被特定定义，否则不会用理想化或过于正式的含义来解释。

图1示意性示出了本发明一个实施例的页面编辑处理方法的流程图。参照图1，本发明实施例的页面编辑处理方法具体包括以下步骤：

步骤S11、对添加到页面编辑器的当前编辑页面中的页面组件进行初始化。

本发明实施例中，所述页面编辑处理方法应用于智能设备，所述智能设备运行有页面编辑器以及所述页面编辑器可添加的页面组件。

本实施例中的页面编辑器的架构具体为：左侧为自定义页面组件列表，右侧为每个页面组件选中后，每个页面组件对应的属性编辑栏，中间空白区域为编辑器里的编辑页面也即预览区域，用户可拖入左侧组件添加到编辑页面。通过拖入自定义组件，生成自定义容器，例如：装js的script脚本的容器jsBox，装css的link标签的容器cssBox，装自定义html模板的容器custom-child-html，装自定义脚本的容器custom-child-js。

页面组件的组件属性包括有HTML模板、可执行脚本以及css样式或JavaScript脚本，在一个具体示例中所述属性编辑栏可以包括三个属性编辑框，选中自定义组件后，右侧编辑区域出现四个文本框，这四个文本框，分别为，自定义模板填写区域，自定义可执行脚本填写区域，自定义样式路径填写区域和自定义JavaScript脚本路径填写区域。其中，组件属性中的HTML模板采用用于自定义模板填写区域的文本框实现；组件属性中的自定义可执行脚本采用用于自定义脚本填写区域的文本框实现；组件属性中的css样式的自定义配置采用用于自定义样式路径填写的文本框实现；组件属性中的JavaScript脚本采用用于自定义JavaScript脚本路径填写区域的文本框实现。

步骤S12、通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据。

本实施例中，所述通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据，具体实现流程如下：

监测所述页面组件对应的属性编辑框触发的change事件；

当监测到所述页面组件对应的属性编辑框触发的change事件时，将用户在所述属性编辑框内输入的数据作为用户为所述页面组件提供的自定义配置数据。其中，自定义配置数据主要包括用户输入的html标签，自定义脚本，自定义JavaScript脚本路径，自定义样式路径中的一种或多种。

步骤S13、根据用户提供的自定义配置数据更新所述页面组件的组件状态。

本发明实施例提供的页面编辑处理方法，通过为页面编辑器可添加的页面组件设置对应的属性编辑框，为用户提供页面组件自定义数据的配置入口，通过页面组件对应的属性编辑框获取用户为该页面组件提供的自定义配置数据，并基于自定义配置数据更新页面组件的组件状态。本发明能对当前编辑页面中的页面组件进行自定义设计，实现页面功能和样式的多样化，提高开发效率，节约开发成本。

本发明实施例中，步骤S12中的所述对添加到页面编辑器的当前编辑页面中的页面组件进行初始化，具体实现流程如下：

获取所述当前编辑页面中的页面组件在进行当前页面编辑的上一次页面编辑时的历史组件状态数据，根据获取到的历史组件状态数据对所述页面组件进行初始化，或

根据所述当前编辑页面中的页面组件对应的默认组件状态数据对所述页面组件进行初始化。

本实施例中，如果用户在之前的页面编辑过程中，编辑过当前编辑页面中的页面组件，用户在每次编辑后会将页面中的自定义组件的状态数据保存在本地，作为最新的编辑数据，在这种情况下，页面组件的初始化，具体包括获取所述当前编辑页面中的页面组件在进行当前页面编辑的上一次页面编辑时的历史组件状态数据，根据获取到的历史组件状态数据对所述页面组件进行初始化。如果当前编辑页面中的页面组件是新拖入的自定义组件，则取默认组件状态数据，在这种情况下，页面组件的初始化，具体包括根据所述当前编辑页面中的页面组件对应的默认组件状态数据对所述页面组件进行初始化。

本发明实施例中，步骤S13中的所述根据用户提供的自定义配置数据更新所述页面组件的组件状态，具体实现流程如下：

根据所述自定义配置数据对应的属性编辑框的属性类型获取所述自定义配置数据对应的组件属性标识；

根据所述组件属性标识以及所述页面组件的组件标识生成相应组件属性的状态更新标识；

根据预先建立的状态更新标识与用于对页面组件中各个组件属性进行状态更新的回调函数之间的对应关系，查找相应的回调函数；

执行获取到的回调函数以更新相应页面组件的组件属性。

下面通过一个具体实施例对更新相应页面组件的html模板属性的实现方式进行详细说明，具体实现细节如下：更新html模板状态数据，调用this.update('html',function(params){})；拼接‘com.’+自定义组件key+‘.’+‘html’，作为更新html模板状态的标识，以该标识作为updateCallbacks对象的键，function(params){}函数作为updateCallbacks对象的值，存入updateCallbacks对象数据中。当用户编辑自定义html模板文本框时，触发文本框change事件，并获取html模板状态的标识，执行模板标识对应的function(params){}函数。可理解的是，更新相应页面组件的其他组件属性的实现方式与更新相应页面组件的html模板属性的实现方式相类似，在此不再重复说明。

本实施例采用了观察者模式，将标识和函数绑定，也就是标识作为对象的键，函数作为对象的值，一一对应，当编辑的文本框对应标识在对象中匹配到，则取出对应标识的回调函数执行，调用对应的函数去更新该组件状态。

进一步地，所述执行获取到的回调函数以更新相应页面组件的属性状态，具体包括：若所述自定义配置数据对应的组件属性为HTML模板或可执行脚本，则根据所述页面组件的组件标识查找所述自定义配置数据在模板引擎中的位置，将解码后的自定义配置数据传入对应的位置，并将传入数据后的模板引擎解析成目标html模板，将得到的得到目标html模板添加到所述页面组件的父容器；若所述自定义配置数据对应的组件属性为css样式或JavaScript脚本，则根据所述自定义配置数据生成对应的link标签或script标签，将所述link标签或script标签插入在所述页面组件所属页面的html头部。

本实施例中，若所述自定义配置数据对应的组件属性为HTML模板或可执行脚本，则在执行获取到的回调函数对相应页面组件的属性状态进行更新时，通过artTemplate模板以页面组件id作为标识找到自定义配置数据在模板中的插入位置，将解码后的自定义配置数据传入对应的位置，解析成目标html模板，将得到的得到目标html模板添加到所述页面组件的父容器。具体实现如下：

获取自定义脚本模板数据htmlStr，并通过decodeURIComponent解码，获取自定义可执行js脚本，decodeURIComponent解码。然后通过artTemplate模板以组件id作为标识找模板插入位置，传入对应的模板数据，解析成html模板，塞入组件父容器。

本实施例以模板渲染的方式，实现自定义模板，和自定义可执行脚本的嵌入，而不是动态插入，在页面渲染的时候，能立马出现用户自定义的模板容器，不会有延迟，用户体验好。

本实施例中，若所述自定义配置数据对应的组件属性为css样式或JavaScript脚本，则在执行获取到的回调函数对相应页面组件的属性状态进行更新时，只需要传入即将渲染的模块类型和模块链接即可。就是根据用户输入的自定义样式路径生成link标签，或根据用户输入的自定义脚本路径(字符串)生成script标签，然后直接插入在页面的html头部，在加载页面时浏览器会自动解析link标签和script标签，并会加载对应路径下的样式文件和脚本文件。具体实现如下：

如果传入模块类型为css，则会创建link标签元素，并设置该元素的href属性的值为该css模块链接，设置元素type类型为‘text/css’，设置元素的rel属性为‘stylesheet’，并将该link标签元素追加到装css的link标签的容器cssBox中。如果传入模块类型为js，则会创建script标签元素，并设置该元素的src属性的值为该js模块链接，设置元素type类型为‘text/javascript’，设置元素的charset属性为‘utf-8’，并将该script标签元素追加到装js的script脚本的容器jsBox中。

进一步地，如果要引入多个js或css模块，则将多个link标签或script标签以&分隔。在代码模块中，会以&来进行拆分，生成一个数组，循环遍历数组，依次对数组的每一项执行嵌入link或者script标签的操作。

本实施例通过动态脚本插入方式，异步加载js模块和css模块。并且实现了多个模块引入的功能，达到了多样化定制模板，功能和样式的目的。

对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

图2示意性示出了本发明一个实施例的页面编辑处理装置的结构示意图。参照图2，本发明实施例的页面编辑处理装置具体包括初始化模块201、获取模块202以及处理模块203，其中：

初始化模块201，用于对添加到页面编辑器的当前编辑页面中的页面组件进行初始化；

获取模块202，用于通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据；

处理模块203，用于根据用户提供的自定义配置数据更新所述页面组件的组件状态。

本实施例中，所述页面编辑处理装置应用于智能设备，所述智能设备运行有页面编辑器以及所述页面编辑器可添加的页面组件。

在本发明的一个实施例中，如果用户在之前的页面编辑过程中，编辑过当前编辑页面中的页面组件，用户在每次编辑后会将页面中的自定义组件的状态数据保存在本地，作为最新的编辑数据，在这种情况下，所述初始化模块201，具体用于获取所述当前编辑页面中的页面组件在进行当前页面编辑的上一次页面编辑时的历史组件状态数据，根据获取到的历史组件状态数据对所述页面组件进行初始化。

在本发明的另一个实施例中，如果当前编辑页面中的页面组件是新拖入的自定义组件，则取默认组件状态数据，在这种情况下，所述初始化模块201，具体用于根据所述当前编辑页面中的页面组件对应的默认组件状态数据对所述页面组件进行初始化。

本发明实施例中，所述获取模块，具体包括检测单元和获取单元，其中：所述的检测单元，用于监测所述页面组件对应的属性编辑框触发的change事件；所述获取单元，用于当监测到所述页面组件对应的属性编辑框触发的change事件时，将用户在所述属性编辑框内输入的数据作为用户为所述页面组件提供的自定义配置数据。

进一步地，所述处理模块203，具体包括组件属性标识获取单元、生成单元、回调函数查找单元以及执行单元，其中：

组件属性标识获取单元，用于根据所述自定义配置数据对应的属性编辑框的属性类型获取所述自定义配置数据对应的组件属性标识；

生成单元，用于根据所述组件属性标识以及所述页面组件的组件标识生成相应组件属性的状态更新标识；

回调函数查找单元，用于根据预先建立的状态更新标识与用于对页面组件中各个组件属性进行状态更新的回调函数之间的对应关系，查找相应的回调函数；

执行单元，用于执行获取到的回调函数以更新相应页面组件的组件属性。

其中，所述执行单元，具体用于若所述自定义配置数据对应的组件属性为HTML模板或可执行脚本，则根据所述页面组件的组件标识查找所述自定义配置数据在模板引擎中的位置，将解码后的自定义配置数据传入对应的位置，并将传入数据后的模板引擎解析成目标html模板，将得到的得到目标html模板添加到所述页面组件的父容器；若所述自定义配置数据对应的组件属性为css样式或JavaScript脚本，则根据所述自定义配置数据生成对应的link标签或script标签，将所述link标签或script标签插入在所述页面组件所属页面的html头部。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

本发明实施例提供的页面编辑处理方法及装置，通过为页面编辑器可添加的页面组件设置对应的属性编辑框，为用户提供页面组件自定义数据的配置入口，通过页面组件对应的属性编辑框获取用户为该页面组件提供的自定义配置数据，并基于自定义配置数据更新页面组件的组件状态。本发明能对当前编辑页面中的页面组件进行自定义设计，实现页面功能和样式的多样化，提高开发效率，节约开发成本。

此外，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上所述方法的步骤。

本实施例中，所述页面编辑处理装置集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

图3为本发明实施例提供的计算机设备的示意图。本发明实施例提供的计算机设备，包括存储器301、处理器302及存储在存储器301上并可在处理器302上运行的计算机程序，所述处理器302执行所述计算机程序时实现上述各个页面编辑处理方法实施例中的步骤，例如图1所示的步骤S11、对添加到页面编辑器的当前编辑页面中的页面组件进行初始化；步骤S12、通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据；步骤S13、根据用户提供的自定义配置数据更新所述页面组件的组件状态。或者，所述处理器302执行所述计算机程序时实现上述各页面编辑处理装置实施例中各模块/单元的功能，例如图2所示的初始化模块201、获取模块202以及处理模块203。

示例性的，所述计算机程序可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器中，并由所述处理器执行，以完成本发明。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序在所述页面编辑处理装置中的执行过程。例如，所述计算机程序可以被分割成初始化模块201、获取模块202以及处理模块203，各模块具体功能如下：初始化模块201，用于对添加到页面编辑器的当前编辑页面中的页面组件进行初始化；获取模块202，用于通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据；处理模块203，用于根据用户提供的自定义配置数据更新所述页面组件的组件状态。所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可包括，但不仅限于，处理器、存储器。本领域技术人员可以理解，所述示意图3仅仅是计算机设备的示例，并不构成对计算机设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述计算机设备还可以包括输入输出设备、网络接入设备、总线等。

所述处理器可以是中央处理单元(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)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

本领域的技术人员能够理解，尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (8)

1.一种页面编辑处理方法，其特征在于，所述方法包括：

对添加到页面编辑器的当前编辑页面中的页面组件进行初始化；

通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据；

根据用户提供的自定义配置数据更新所述页面组件的组件状态；

所述页面编辑器的架构具体为：左侧为自定义页面组件列表，右侧为每个页面组件选中后，每个页面组件对应的属性编辑栏，所述属性编辑栏包括四个属性编辑框，中间空白区域为编辑器里的编辑页面，用户可拖入左侧组件添加到编辑页面，通过拖入自定义组件，生成自定义容器，包括：装js的script脚本的容器jsBoX，装css的link标签的容器cssBox，装自定义html模板的容器custom-child-html，装自定义脚本的容器custom-child-js；

页面组件的组件属性包括HTML模板、可执行脚本以及css样式和JavaScript脚本，选中自定义组件后，右侧编辑区域出现四个属性编辑框，分别为：自定义模板填写区域，自定义可执行脚本填写区域，自定义样式路径填写区域和自定义JavaScript脚本路径填写区域，其中，组件属性中的HTML模板采用用于自定义模板填写区域的文本框实现；组件属性中的自定义可执行脚本采用用于自定义脚本填写区域的文本框实现；组件属性中的css样式的自定义配置采用用于自定义样式路径填写的文本框实现；组件属性中的JavaScript脚本采用用于自定义JavaScript脚本路径填写区域的文本框实现；

其中，所述通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据，包括：

监测所述页面组件对应的属性编辑框触发的change事件；

当监测到所述页面组件对应的属性编辑框触发的change事件时，将用户在所述属性编辑框内输入的数据作为用户为所述页面组件提供的自定义配置数据。

2.根据权利要求1所述的方法，其特征在于，所述对添加到页面编辑器的当前编辑页面中的页面组件进行初始化，包括：

获取所述当前编辑页面中的页面组件在进行当前页面编辑的上一次页面编辑时的历史组件状态数据，根据获取到的历史组件状态数据对所述页面组件进行初始化，或

根据所述当前编辑页面中的页面组件对应的默认组件状态数据对所述页面组件进行初始化。

3.根据权利要求1所述的方法，其特征在于，所述根据用户提供的自定义配置数据更新所述页面组件的组件状态，包括：

根据所述自定义配置数据对应的属性编辑框的属性类型获取所述自定义配置数据对应的组件属性标识；

根据所述组件属性标识以及所述页面组件的组件标识生成相应组件属性的状态更新标识；

根据预先建立的状态更新标识与用于对页面组件中各个组件属性进行状态更新的回调函数之间的对应关系，查找相应的回调函数；

执行获取到的回调函数以更新相应页面组件的组件属性。

4.根据权利要求3所述的方法，其特征在于，所述执行获取到的回调函数以更新相应页面组件的组件属性，包括：

若所述自定义配置数据对应的组件属性为HTML模板或可执行脚本，则根据所述页面组件的组件标识查找所述自定义配置数据在模板引擎中的位置，将解码后的自定义配置数据传入对应的位置，并将传入数据后的模板引擎解析成目标html模板，将得到的目标html模板添加到所述页面组件的父容器；

若所述自定义配置数据对应的组件属性为css样式或JavaScript脚本，则根据所述自定义配置数据生成对应的link标签或script标签，将所述link标签或script标签插入在所述页面组件所属页面的html头部。

5.一种页面编辑处理装置，其特征在于，所述装置包括：

初始化模块，用于对添加到页面编辑器的当前编辑页面中的页面组件进行初始化；

获取模块，用于通过所述页面组件对应的属性编辑框获取用户为所述页面组件提供的自定义配置数据；

处理模块，用于根据用户提供的自定义配置数据更新所述页面组件的组件状态；

其中，所述获取模块，包括：

检测单元，用于监测所述页面组件对应的属性编辑框触发的change事件；

获取单元，用于当监测到所述页面组件对应的属性编辑框触发的change事件时，将用户在所述属性编辑框内输入的数据作为用户为所述页面组件提供的自定义配置数据；

所述页面编辑器的架构具体为：左侧为自定义页面组件列表，右侧为每个页面组件选中后，每个页面组件对应的属性编辑栏，所述属性编辑栏包括四个属性编辑框，中间空白区域为编辑器里的编辑页面，用户可拖入左侧组件添加到编辑页面，通过拖入自定义组件，生成自定义容器，包括：装js的script脚本的容器jsBoX，装css的link标签的容器cssBox，装自定义html模板的容器custom-child-html，装自定义脚本的容器custom-child-js；

页面组件的组件属性包括HTML模板、可执行脚本以及css样式和JavaScript脚本，选中自定义组件后，右侧编辑区域出现四个属性编辑框，分别为：自定义模板填写区域，自定义可执行脚本填写区域，自定义样式路径填写区域和自定义JavaScript脚本路径填写区域，其中，组件属性中的HTML模板采用用于自定义模板填写区域的文本框实现；组件属性中的自定义可执行脚本采用用于自定义脚本填写区域的文本框实现；组件属性中的css样式的自定义配置采用用于自定义样式路径填写的文本框实现；组件属性中的JavaScript脚本采用用于自定义JavaScript脚本路径填写区域的文本框实现。

6.根据权利要求5所述的装置，其特征在于，所述初始化模块，具体用于获取所述当前编辑页面中的页面组件在进行当前页面编辑的上一次页面编辑时的历史组件状态数据，根据获取到的历史组件状态数据对所述页面组件进行初始化，或，根据所述当前编辑页面中的页面组件对应的默认组件状态数据对所述页面组件进行初始化。

7.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-4任一项所述方法的步骤。

8.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-4任一项所述方法的步骤。

Images