CN108710490B - 一种Web页面的编辑方法和装置 - Google Patents

Abstract

本发明提供一种Web页面的编辑方法、装置、电子设备和计算机可读介质，能够精确控制Web页面区域HTML代码的正确性，保证最终用户提交的Web页面部分区域HTML代码格式正确，从而保证整个Web页面格式正确，不会出现页面错乱的情况。本发明的Web页面的编辑方法包括：当收到用户选定一个所述区域进行编辑的指示时，从服务端获取该选定区域的HTML片段；从所述HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性；为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件，所述输入控件用于接收对编辑对象的编辑内容；将各输入控件中接收到的编辑内容与所述HTML片段按照预设格式拼接，得到编辑后的HTML片段。

Description

一种Web页面的编辑方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种Web页面的编辑方法、装置、电子设备和计算机可读介质。

背景技术

在各类网站的首页或频道页上往往有一些区域是需要人工设置的，例如常见的首页推广焦点图，边栏上的推荐内容等。这些区域的HTML格式需要符合给定的格式才能正确的显示页面，如果HTML格式错误，会导致页面内容错乱，影响用户体验。

目前通常采用的方案是通过HTML的超文本编辑器来编辑上述页面区域，例如tinymce、FCKEditor，FreeTextBox等编辑器，该方案主要是通过将编辑内容设置到一个新的iframe(一个HTML标签)中，然后将此iframe的document的contenteditable属性设置为true，并通过浏览器的命令来编辑该iframe的内容，其中，当编辑发生时该iframe的内容被写入到文本域中。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：上述的将iframe的contenteditable属性设置为true，然后通过浏览器进行编辑的方案，不可控制HTML区域内容的格式，可能会导致页面格式错乱。

发明内容

有鉴于此，本发明提供一种Web页面的编辑方法、装置、电子设备和计算机可读介质，能够精确控制Web页面区域HTML代码的正确性，保证最终用户提交的Web页面部分区域HTML代码格式正确，从而保证整个Web页面格式正确，不会出现页面错乱的情况。

为实现上述目的，根据本发明实施例的一个方面，提供了一种Web页面的编辑方法。

一种Web页面的编辑方法，所述Web页面包括多个区域，每个区域包括一个或多个编辑对象，所述方法包括：当收到用户选定一个所述区域进行编辑的指示时，从服务端获取该选定区域的HTML片段；从所述HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性；为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件，所述输入控件用于接收对编辑对象的编辑内容；将各输入控件中接收到的编辑内容与所述HTML片段按照预设格式拼接，得到编辑后的HTML片段，其中DOM为文档对象模型(Document Object Model)。

可选地，收到用户选定一个所述区域进行编辑的指示之前，还包括：预先为所述区域添加可隐藏的悬浮层，所述悬浮层包括用于接收用户发出的编辑该区域的指示的接口，并且，所述悬浮层在该区域被选定时显示，在该区域未被选定时隐藏，其中，当鼠标移动到该区域上时该区域被选定。

可选地，每个编辑对象具有各自的路径信息，所述路径信息为DOM路径信息，从所述HTML片段中提取该选定区域各编辑对象的HTMLDOM元素属性，包括：根据所述各编辑对象的DOM路径信息得到所述HTML片段中所述DOM路径信息指示的DOM元素；从所述各DOM元素中提取HTML DOM元素属性。

可选地，所述HTML DOM元素属性包括链接文字属性、链接地址属性、链接打开方式属性、图片属性、描述文本属性，并且，为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件包括：当HTML DOM元素属性为链接文字属性时，生成链接文字输入控件；当HTML DOM元素属性为链接地址属性时，生成URL输入控件；当HTML DOM元素属性为链接打开方式属性时，生成链接打开方式选择控件；当HTML DOM元素属性为图片属性时，生成图片上传控件；当HTML DOM元素属性为描述文本属性时，生成描述文本输入控件。

可选地，所述预设格式为所述HTML片段的代码格式。

根据本发明的另一方面，提供了一种Web页面的编辑装置。

一种Web页面的编辑装置，所述Web页面包括多个区域，每个区域包括一个或多个编辑对象，所述装置包括：HTML获取模块，用于当收到用户选定一个所述区域进行编辑的指示时，从服务端获取该选定区域的HTML片段；属性提取模块，用于从所述HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性；控件生成模块，用于为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件，所述输入控件用于接收对编辑对象的编辑内容；HTML拼接模块，用于将各输入控件中接收到的编辑内容与所述HTML片段按照预设格式拼接，得到编辑后的HTML片段。

可选地，还包括悬浮层添加模块，用于预先为所述区域添加可隐藏的悬浮层，所述悬浮层包括用于接收用户发出的编辑该区域的指示的接口，并且，所述悬浮层在该区域被选定时显示，在该区域未被选定时隐藏，其中，当鼠标移动到该区域上时该区域被选定。

可选地，每个编辑对象具有各自的路径信息，所述路径信息为DOM路径信息，所述属性提取模块还用于：根据所述各编辑对象的DOM路径信息得到所述HTML片段中所述DOM路径信息指示的DOM元素；从所述各DOM元素中提取HTML DOM元素属性。

可选地，所述HTML DOM元素属性包括链接文字属性、链接地址属性、链接打开方式属性、图片属性、描述文本属性，并且，所述控件生成模块还用于：当HTML DOM元素属性为链接文字属性时，生成链接文字输入控件；当HTML DOM元素属性为链接地址属性时，生成URL输入控件；当HTML DOM元素属性为链接打开方式属性时，生成链接打开方式选择控件；当HTML DOM元素属性为图片属性时，生成图片上传控件；当HTML DOM元素属性为描述文本属性时，生成描述文本输入控件。

可选地，所述预设格式为所述HTML片段的代码格式。

根据本发明的又一方面，提供了一种电子设备。

一种电子设备，包括：一个或多个处理器；存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现Web页面的编辑方法。

根据本发明的再一方面，提供了一种计算机可读介质。

一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现Web页面的编辑方法。。

根据本发明的技术方案，上述发明中的一个实施例具有如下优点或有益效果：当收到用户选定一个区域进行编辑的指示时，从服务端获取该选定区域的HTML片段，从HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性，并为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件，将各输入控件中接收到的对编辑对象的编辑内容与HTML片段按照HTML片段的代码格式拼接，得到编辑后的HTML片段。能够精确控制Web页面区域HTML代码的正确性，保证最终用户提交的Web页面部分区域HTML代码格式正确，从而保证整个Web页面格式正确，不会出现页面错乱的情况。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的Web页面的编辑方法的主要步骤示意图；

图2是根据本发明实施例的一个编辑对象的编辑界面示意图；

图3是根据本发明实施例的格式化界面示意图；

图4是根据本发明实施例的Web页面的编辑装置的主要模块示意图；

图5是适于用来实现本发明实施例的电子设备的计算机***的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

针对现有技术中提到的问题，本发明提出了一种Web页面的编辑方法，当收到用户选定一个区域进行编辑的指示时，从服务端获取该选定区域的HTML片段，从HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性，并为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件，将各输入控件中接收到的对编辑对象的编辑内容与HTML片段按照HTML片段的代码格式拼接，得到编辑后的HTML片段。能够精确控制Web页面区域HTML代码的正确性，保证最终用户提交的Web页面部分区域HTML代码格式正确，从而保证整个Web页面格式正确，不会出现页面错乱的情况。

图1是根据本发明实施例的Web页面的编辑方法的主要步骤示意图。

如图1所示，本发明实施例的Web页面的编辑方法主要包括如下的步骤S11至步骤S14。其中，Web页面包括多个区域，每个区域包括一个或多个编辑对象。

步骤S11：当收到用户选定一个区域进行编辑的指示时，从服务端获取该选定区域的HTML片段。

收到用户选定一个区域进行编辑的指示之前，还可预先为该区域添加可隐藏的悬浮层，该悬浮层可包括用于接收用户发出的编辑该区域的指示的接口，并且，悬浮层在该区域被选定时显示，在该区域未被选定时隐藏，其中，当鼠标移动到该区域上时该区域被选定。悬浮层具体可以为悬浮在该区域上的半透明层，接收用户发出的编辑该区域的指示的接口具体可以为预先编写的按钮。

下面详细介绍可隐藏的悬浮层的添加过程。首先，从服务端载入Web页面区域的编辑页面，执行该编辑页面的javascript脚本，指定要编辑区域的HTML节点路径，HTML节点路径指示了该要编辑的区域在HTML中对应的HTML节点。给HTML节点路径添加onmouseover事件(鼠标经过事件)，onmouseover事件指定该HTML节点对应区域上悬浮层的CSS样式为半透明，并为该悬浮层添加“编辑碎片”按钮。在鼠标悬浮到该要编辑的区域上时表示用户选定该区域，onmouseover事件会动态创建一个包括该区域HTML代码的div(块级元素)，从而在该区域上显示半透明的悬浮层，并显示添加在悬浮层上的“编辑碎片”按钮。碎片表示页面上要编辑的一个区域，每当该区域被编辑一次就会生成一个碎片内容的副本(即版本)，如需查看该版本，还可在上述悬浮层上添加“查看版本”按钮。

为在悬浮层上设置的按钮添加onclick事件(鼠标点击事件)使得用户点击按钮时做出相应的响应，其中，当用户将鼠标移动到一区域上选定该区域时，触发onmouseover事件在相应区域上显示半透明的悬浮层，当用户点击悬浮层上的“编辑碎片”按钮时，触发onclick事件弹出生成的格式化界面，点击“查看版本”按钮则显示当前编辑碎片的版本。其中，格式化界面为用户编辑该选定区域提供了可操作的界面，生成格式化界面的具体过程将在步骤S12至步骤S13中详细介绍。

在添加onmouseover事件和onclick事件之前，在编辑页面上声明一个javascript数组，并将页面区域的属性写入到此数组中，数组的每一个元素指定页面区域的区域标识、区域名称、生成格式化界面的脚本代码路径、页面区域的HTML DOM路径，然后遍历数组逐个添加事件。区域属性javascript对象描述如下：

其中，“id:9”表示页面区域的区域标识，“焦点图右侧热点产品”表示区域名称，“foolJsUrl:_ur+'fragmentclient/fools/li.js'”表示生成格式化界面的脚本代码路径，“element:'div.focusLinks[0]'”表示页面区域的HTML DOM路径。当收到用户选定一个区域进行编辑的指示时，可根据选定区域的区域标识从服务端获取该HTML片段，服务端可根据该区域标识加载对应选定区域的HTML片段。

下面详细介绍上述格式化界面的生成过程。可通过预存的javascript脚本来生成该格式化界面，javascript是一种运行在客户端的脚本语言，可以用来操作HTML页面元素。当收到用户选定一个区域进行编辑的指示时，将该选定区域的区域标识和该预存的javascript脚本的代码路径传送到服务端，服务端按照该代码路径加载该预存的javascript脚本，同时按照区域标识载入该选定区域的HTML片段，并将该HTML片段放入隐藏的div(块级元素)中，客户端通过执行服务端加载的该javascript脚本获取编辑页面上该隐藏的div，并对该隐藏的div中的HTML片段进行分析，解析HTML片段的格式，生成可供用户输入编辑内容的固定的输入控件，各输入控件组合成格式化界面。上述预存的javascript脚本具体可通过执行下述的步骤S12、步骤S13生成该格式化界面。

步骤S12：从HTML片段中提取该选定区域各编辑对象的HTMLDOM元素属性。

其中，每个编辑对象具有各自的路径信息，编辑对象具有的路径信息可以为DOM路径信息。HTML(超文本标记语言)DOM(文档对象模型)定义了访问和操作HTML文档的标准方法，它把HTML文档呈现为带有元素、属性和文本的树结构，通过DOM路径信息可以定位到DOM元素。

预存的javascript脚本中预先指定了各编辑对象的DOM路径信息，从HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性，具体可以包括：根据各编辑对象的DOM路径信息得到HTML片段中DOM路径信息指示的DOM元素，然后从各DOM元素中提取HTMLDOM元素属性。例如，li.item[0]>div表示一个编辑对象的DOM路径信息，可以通过以下方式解析得到DOM元素：首先通过‘>’符号拆分DOM路径信息，得到DOM路径段数组，然后循环分析该DOM路径段，分析的具体方法是：

通过element.getElementsByTagName(tagName)获得符合条件的元素列表，然后再遍历列表找到符合条件的元素，

该条件包括:1).item表示css class中包含item；

2)[x]表示第x个元素，默认取首个满足条件的元素；

每分析一段作为下一段的父节点去获得下一级的节点，其中li表示HTML节点标签为li，li.item表示CSS class中包含item的li元素，li.item[0]中的取第0个元素，假设得到的DOM元素为如下的形式：<div class＝"dt item_txt">文本内容</div>，则可提取其中的描述文本属性。本领域技术人员可以理解的是，如DOM路径信息指示的DOM元素中还包含其他属性，则可按照上述同样方式提取。

HTML DOM元素属性具体可以包括：链接文字属性、链接地址属性、链接打开方式属性、图片属性、描述文本属性。DOM元素中的HTML DOM元素属性通过表达式指定，语法可为[elementName][@attribute|#text]。例如strong#text表示DOM元素内strong标签的innerText属性，即描述文本属性；@href表示当前元素的href属性，即链接地址属性；img@src表示img元素的src属性，即图片属性。HTML DOM元素属性还可以包括CSS信息属性，这一属性规定了元素样式信息。当逐一提取每个编辑对象的HTML DOM元素属性之后，可对各编辑对象命名并将每个编辑对象的HTML DOM元素属性存放为一个编辑对象数组，编辑对象名称例如“分类标题链接”、“左侧推荐产品链接”等。

步骤S13：为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件，该输入控件用于接收对编辑对象的编辑内容。

其中：当HTML DOM元素属性为链接文字属性时，生成链接文字输入控件；当HTMLDOM元素属性为链接地址属性时，生成URL(统一资源定位符)输入控件；当HTML DOM元素属性为链接打开方式属性时，生成链接打开方式选择控件；当HTML DOM元素属性为图片属性时，生成图片上传控件；当HTML DOM元素属性为描述文本属性时，生成描述文本输入控件。

具体地，可根据编辑对象数组中的内容循环执行下述a至f步骤：

a：生成编辑对象分组容器DOM元素，该DOM元素包括链接地址，链接文本，描述文字，图片地址等属性；

b：如果编辑对象指定了链接文字属性，则生成编辑对象的链接文字输入控件；

c：如果编辑对象指定了链接地址属性，生成编辑对象的URL输入控件；

d：如果编辑对象指定了链接打开方式属性，生成编辑对象的链接打开方式选择控件；

e：如果编辑对象指定了图片属性，生成编辑对象的图片上传控件；

f：如果编辑对象指定了描述文本，生成描述文本输入控件。

其中，可通过document.createElement(‘input’)创建上述各输入控件，然后设置type,title,width和CSS class等HTML元素属性。并且，上述各输入控件具体可实现为输入框，例如链接文字输入框、URL输入框、链接打开方式选择框、图片上传框、描述文本输入框等。

根据编辑对象的各HTML DOM元素属性生成的多个输入控件构成该编辑对象的编辑界面，图2是根据本发明实施例的一个编辑对象的编辑界面示意图。如图2所示编辑对象名称为“左侧推荐产品链接”，其中包括“链接文字”、“链接地址”、“图片地址”、“描述文本”四个HTML DOM元素属性。图3是根据本发明实施例的格式化界面示意图。如图3所示，多个编辑对象(“分类标题链接”、“左侧推荐产品链接”、“右侧产品链接”)的编辑界面组装合成一个格式化界面。用户可在各个编辑对象的编辑界面中输入对应的“链接文字”、“链接地址”、“图片地址”、“描述文本”等信息，从而对Web页面中各编辑对象内容进行编辑。

步骤S14：将各输入控件中接收到的编辑内容与HTML片段按照预设格式拼接，得到编辑后的HTML片段。

其中，预设格式具体可以为HTML片段的代码格式。

当接收到用户在各输入控件中输入的编辑内容后，可通过前述预存的javascript脚本将编辑内容与HTML片段拼接为固定格式的HTML代码(即编辑后的HTML片段)，并提交给服务器端保存该拼接后的代码。上述拼接的过程具体如下：

i：循环遍历生成的各输入控件，获得用户输入的编辑内容；

ii：按照Web页面的HTML片段的代码格式组装生成的各输入控件，并循环获取各输入控件的编辑内容，得到编辑后的HTML片段。拼接的语法例如，原始HTML片段为：<li class＝"news_item"><a href＝""target＝"_blank"class＝"news_link">原始描述文本</a></li>，可进行如下拼接：result＝'<li class＝"news_item"><a href＝"'+url+'"target＝"_blank"class＝"news_link">'+text+'</a></li>；其中，url表示添加的链接地址，text表示更新的描述文本。

图4是根据本发明实施例的Web页面的编辑装置的主要模块示意图。Web页面包括多个区域，每个区域包括一个或多个编辑对象。

如图4所示，本发明实施例的Web页面的编辑装置40主要包括：HTML获取模块41、属性提取模块42、控件生成模块43、HTML拼接模块44。其中，

HTML获取模块41用于当收到用户选定一个区域进行编辑的指示时，从服务端获取该选定区域的HTML片段；

属性提取模块42用于从HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性；

控件生成模块43用于为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件，该输入控件用于接收对编辑对象的编辑内容；

HTML拼接模块44用于将各输入控件中接收到的编辑内容与HTML片段按照预设格式拼接，得到编辑后的HTML片段。

预设格式具体可以为HTML片段的代码格式。

本发明实施例的Web页面的编辑装置40还可以包括悬浮层添加模块，悬浮层添加模块用于预先为页面区域添加可隐藏的悬浮层，该悬浮层包括用于接收用户发出的编辑该区域的指示的接口，并且，悬浮层在该区域被选定时显示，在该区域未被选定时隐藏，其中，当鼠标移动到该区域上时该区域被选定。

其中，每个编辑对象具有各自的路径信息，路径信息为DOM路径信息，属性提取模块42还可以根据所述各编辑对象的DOM路径信息得到HTML片段中DOM路径信息指示的DOM元素，并从各DOM元素中提取HTML DOM元素属性。

HTML DOM元素属性主要包括链接文字属性、链接地址属性、链接打开方式属性、图片属性、描述文本属性。

控件生成模块43还可以用于：当HTML DOM元素属性为链接文字属性时，生成链接文字输入控件；当HTML DOM元素属性为链接地址属性时，生成URL输入控件；当HTML DOM元素属性为链接打开方式属性时，生成链接打开方式选择控件；当HTML DOM元素属性为图片属性时，生成图片上传控件；当HTML DOM元素属性为描述文本属性时，生成描述文本输入控件。

根据本发明的实施例，本发明还提供了一种电子设备和一种计算机可读介质。

本发明的电子设备包括：一个或多个处理器；存储器，用于存储一个或多个程序，当该一个或多个程序被一个或多个处理器执行，使得该一个或多个处理器实现Web页面的编辑方法。

本发明的计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现Web页面的编辑方法。

下面参考图5，其示出了适于用来实现本发明实施例的电子设备的计算机***500的结构示意图。图5示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图5所示，计算机***500包括中央处理单元(CPU)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储部分508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有***500操作所需的各种程序和数据。CPU 501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

以下部件连接至I/O接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至I/O接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。

特别地，根据本发明公开的实施例，上文Web页面的编辑方法的主要步骤示意图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行Web页面的编辑方法的主要步骤示意图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(CPU)501执行时，执行本申请的***中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的主要步骤示意图，图示了按照本申请各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，主要步骤示意图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，主要步骤示意图中的每个方框、以及主要步骤示意图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括HTML获取模块41、属性提取模块42、控件生成模块43、HTML拼接模块44。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，HTML获取模块41还可以被描述为“用于当收到用户选定一个区域进行编辑的指示时，从服务端获取该选定区域的HTML片段的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：当收到用户选定一个区域进行编辑的指示时，从服务端获取该选定区域的HTML片段；从HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性；为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件，输入控件用于接收对编辑对象的编辑内容；将各输入控件中接收到的编辑内容与HTML片段按照预设格式拼接，得到编辑后的HTML片段。

根据本发明实施例的技术方案，当收到用户选定一个区域进行编辑的指示时，从服务端获取该选定区域的HTML片段，从HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性，并为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件，将各输入控件中接收到的对编辑对象的编辑内容与HTML片段按照HTML片段的代码格式拼接，得到编辑后的HTML片段。能够精确控制Web页面区域HTML代码的正确性，保证最终用户提交的Web页面部分区域HTML代码格式正确，从而保证整个Web页面格式正确，不会出现页面错乱的情况。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (12)

1.一种Web页面的编辑方法，其特征在于，所述Web页面包括多个区域，每个区域包括一个或多个编辑对象，所述方法包括：

当收到用户选定一个所述区域进行编辑的指示时，从服务端获取该选定区域的HTML片段；

从所述HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性；

为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件，所述编辑对象的输入控件构成该编辑对象的编辑界面，所述编辑界面中的所述输入控件用于接收对编辑对象的编辑内容；生成的各所述输入控件是按照Web页面的所述HTML片段的代码格式组装的；

将所述编辑界面中各输入控件中接收到的编辑内容与所述HTML片段按照预设格式拼接，得到编辑后的HTML片段。

2.根据权利要求1所述的方法，其特征在于，收到用户选定一个所述区域进行编辑的指示之前，还包括：

预先为所述区域添加可隐藏的悬浮层，所述悬浮层包括用于接收用户发出的编辑该区域的指示的接口，并且，所述悬浮层在该区域被选定时显示，在该区域未被选定时隐藏，其中，当鼠标移动到该区域上时该区域被选定。

3.根据权利要求1所述的方法，其特征在于，每个编辑对象具有各自的路径信息，所述路径信息为DOM路径信息，从所述HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性，包括：

根据所述各编辑对象的DOM路径信息得到所述HTML片段中所述DOM路径信息指示的DOM元素；

从所述各DOM元素中提取HTML DOM元素属性。

4.根据权利要求1所述的方法，其特征在于，所述HTML DOM元素属性包括链接文字属性、链接地址属性、链接打开方式属性、图片属性、描述文本属性，

并且，为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件包括：

当HTML DOM元素属性为链接文字属性时，生成链接文字输入控件；

当HTML DOM元素属性为链接地址属性时，生成URL输入控件；

当HTML DOM元素属性为链接打开方式属性时，生成链接打开方式选择控件；

当HTML DOM元素属性为图片属性时，生成图片上传控件；

当HTML DOM元素属性为描述文本属性时，生成描述文本输入控件。

5.根据权利要求1所述的方法，其特征在于，所述预设格式为所述HTML片段的代码格式。

6.一种Web页面的编辑装置，其特征在于，所述Web页面包括多个区域，每个区域包括一个或多个编辑对象，所述装置包括：

HTML获取模块，用于当收到用户选定一个所述区域进行编辑的指示时，从服务端获取该选定区域的HTML片段；

属性提取模块，用于从所述HTML片段中提取该选定区域各编辑对象的HTML DOM元素属性；

控件生成模块，用于为每个编辑对象生成与各自的HTML DOM元素属性对应的输入控件，所述编辑对象的输入控件构成该编辑对象的编辑界面，所述编辑界面中的所述输入控件用于接收对编辑对象的编辑内容；生成的各所述输入控件是按照Web页面的所述HTML片段的代码格式组装的；

HTML拼接模块，用于将所述编辑界面中各输入控件中接收到的编辑内容与所述HTML片段按照预设格式拼接，得到编辑后的HTML片段。

7.根据权利要求6所述的装置，其特征在于，还包括悬浮层添加模块，用于预先为所述区域添加可隐藏的悬浮层，所述悬浮层包括用于接收用户发出的编辑该区域的指示的接口，并且，所述悬浮层在该区域被选定时显示，在该区域未被选定时隐藏，其中，当鼠标移动到该区域上时该区域被选定。

8.根据权利要求6所述的装置，其特征在于，每个编辑对象具有各自的路径信息，所述路径信息为DOM路径信息，所述属性提取模块还用于：

根据所述各编辑对象的DOM路径信息得到所述HTML片段中所述DOM路径信息指示的DOM元素；

从所述各DOM元素中提取HTML DOM元素属性。

9.根据权利要求6所述的装置，其特征在于，所述HTML DOM元素属性包括链接文字属性、链接地址属性、链接打开方式属性、图片属性、描述文本属性，

并且，所述控件生成模块还用于：

当HTML DOM元素属性为链接文字属性时，生成链接文字输入控件；

当HTML DOM元素属性为链接地址属性时，生成URL输入控件；

当HTML DOM元素属性为链接打开方式属性时，生成链接打开方式选择控件；

当HTML DOM元素属性为图片属性时，生成图片上传控件；

当HTML DOM元素属性为描述文本属性时，生成描述文本输入控件。

10.根据权利要求6所述的装置，其特征在于，所述预设格式为所述HTML片段的代码格式。

11.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一项所述的方法。

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

Images