一种Web页面的编辑方法和装置制造方法及图纸

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

An editing method and device for Web pages

The invention provides a Web page editing method, device, electronic equipment and computer readable medium, which can accurately control the correctness of the HTML code in the Web page area, ensure the correct format of the HTML code in part of the Web page area submitted by the end user, thereby ensuring the correct format of the whole Web page and avoiding the occurrence of page disorder. The situation. The editing method of the Web page of the present invention includes: obtaining an HTML fragment of the selected region from the server when a user selects an instruction to edit a uuuuuuuuuuuuuuuuuuuu The input control corresponding to the property is used to receive the edited content of the edited object; the edited HTML fragment is obtained by splicing the edited content received in each input control with the HTML fragment in a preset format.

【技术实现步骤摘要】
一种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片段中提取该选定区域各编辑对象的HTMLDOM元素属性；为每个编辑对象生成与各自的HTMLDOM元素属性对应的输入控件，所述输入控件用于接收对编辑对象的编辑内容；将各输入控件中接收到的编辑内容与所述HTML片段按照预设格式拼接，得到编辑后的HTML片段，其中DOM为文档对象模型(DocumentObjectModel)。可选地，收到用户选定一个所述区域进行编辑的指示之前，还包括：预先为所述区域添加可隐藏的悬浮层，所述悬浮层包括用于接收用户发出的编辑该区域的指示的接口，并且，所述悬浮层在该区域被选定时显示，在该区域未被选定时隐藏，其中，当鼠标移动到该区域上时该区域被选定。可选地，每个编辑对象具有各自的路径信息，所述路径信息为DOM路径信息，从所述HTML片段中提取该选定区域各编辑对象的HTMLDOM元素属性，包括：根据所述各编辑对象的DOM路径信息得到所述HTML片段中所述DOM路径信息指示的DOM元素；从所述各DOM元素中提取HTMLDOM元素属性。可选地，所述HTMLDOM元素属性包括链接文字属性、链接地址属性、链接打开方式属性、图片属性、描述文本属性，并且，为每个编辑对象生成与各自的HTMLDOM元素属性对应的输入控件包括：当HTMLDOM元素属性为链接文字属性时，生成链接文字输入控件；当HTMLDOM元素属性为链接地址属性时，生成URL输入控件；当HTMLDOM元素属性为链接打开方式属性时，生成链接打开方式选择控件；当HTMLDOM元素属性为图片属性时，生成图片上传控件；当HTMLDOM元素属性为描述文本属性时，生成描述文本输入控件。可选地，所述预设格式为所述HTML片段的代码格式。根据本专利技术的另一方面，提供了一种Web页面的编辑装置。一种Web页面的编辑装置，所述Web页面包括多个区域，每个区域包括一个或多个编辑对象，所述装置包括：HTML获取模块，用于当收到用户选定一个所述区域进行编辑的指示时，从服务端获取该选定区域的HTML片段；属性提取模块，用于从所述HTML片段中提取该选定区域各编辑对象的HTMLDOM元素属性；控件生成模块，用于为每个编辑对象生成与各自的HTMLDOM元素属性对应的输入控件，所述输入控件用于接收对编辑对象的编辑内容；HTML拼接模块，用于将各输入控件中接收到的编辑内容与所述HTML片段按照预设格式拼接，得到编辑后的HTML片段。可选地，还包括悬浮层添加模块，用于预先为所述区域添加可隐藏的悬浮层，所述悬浮层包括用于接收用户发出的编辑该区域的指示的接口，并且，所述悬浮层在该区域被选定时显示，在该区域未被选定时隐藏，其中，当鼠标移动到该区域上时该区域被选定。可选地，每个编辑对象具有各自的路径信息，所述路径信息为DOM路径信息，所述属性提取模块还用于：根据所述各编辑对象的DOM路径信息得到所述HTML片段中所述DOM路径信息指示的DOM元素；从所述各DOM元素中提取HTMLDOM元素属性。可选地，所述HTMLDOM元素属性包括链接文字属性、链接地址属性、链接打开方式属性、图片属性、描述文本属性，并且，所述控件生成模块还用于：当HTMLDOM元素属性为链接文字属性时，生成链接文字输入控件；当HTMLDOM元素属性为链接地址属性时，生成URL输入控件；当HTMLDOM元素属性为链接打开方式属性时，生成链接打开方式选择控件；当HTMLDOM元素属性为图片属性时，生成图片上传控件；当HTMLDOM元素属性为描述文本属性时，生成描述文本输入控件。可选地，所述预设格式为所述HTML片段的代码格式。根据本专利技术的又一方面，提供了一种电子设备。一种电子设备，包括：一个或多个处理器；存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现Web页面的编辑方法。根据本专利技术的再一方面，提供了一种计算机可读介质。一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现Web页面的编辑方法。。根据本专利技术的技术方案，上述专利技术中的一个实施例具有如下优点或有益效果：当收到用户选定一个区域进行编辑的指示时，从服务端获取该选定区域的HTML片段，从HTML片段中提取该选定区域各编辑对象的HTMLDOM元素属性，并为每个编辑对象生成与各自的HTMLDOM元素属性对应的输入控件，将各输入控件中接收到的对编辑对象的编辑内容与HTML片段按照HTML片段的代码格式拼接，得到编辑后的HTML片段。能够精确控制Web页面区域HTML代码的正确性，保证最终用户提交的Web页面部分区域HTML代码格式正确，从而保证整个Web页面格式正确，不会出现页面错乱的情况。上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。附图说明附图用于更好地理解本专利技术，不构成对本专利技术的不当限定。其中：图1是根据本专利技术实施例的Web页面的编辑方法的主要步骤示意图；图2是根据本专利技术实施例的一个编辑对象的编辑界面示意图；图3是根据本专利技术实施例的格式化界面示意图；图4是根据本专利技术实施例的Web页面的编辑装置的主要模块示意图；图5是适于用来实现本专利技术实施例的电子设备的计算机系统的结构示意图。具体实施方式以下结合附图对本专利技术的示范性实施例做出说明，其中包括本专利技术实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修本文档来自技高网...

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

【技术特征摘要】
1.一种Web页面的编辑方法，其特征在于，所述Web页面包括多个区域，每个区域包括一个或多个编辑对象，所述方法包括：当收到用户选定一个所述区域进行编辑的指示时，从服务端获取该选定区域的HTML片段；从所述HTML片段中提取该选定区域各编辑对象的HTMLDOM元素属性；为每个编辑对象生成与各自的HTMLDOM元素属性对应的输入控件，所述输入控件用于接收对编辑对象的编辑内容；将各输入控件中接收到的编辑内容与所述HTML片段按照预设格式拼接，得到编辑后的HTML片段。2.根据权利要求1所述的方法，其特征在于，收到用户选定一个所述区域进行编辑的指示之前，还包括：预先为所述区域添加可隐藏的悬浮层，所述悬浮层包括用于接收用户发出的编辑该区域的指示的接口，并且，所述悬浮层在该区域被选定时显示，在该区域未被选定时隐藏，其中，当鼠标移动到该区域上时该区域被选定。3.根据权利要求1所述的方法，其特征在于，每个编辑对象具有各自的路径信息，所述路径信息为DOM路径信息，从所述HTML片段中提取该选定区域各编辑对象的HTMLDOM元素属性，包括：根据所述各编辑对象的DOM路径信息得到所述HTML片段中所述DOM路径信息指示的DOM元素；从所述各DOM元素中提取HTMLDOM元素属性。4.根据权利要求1所述的方法，其特征在于，所述HTMLDOM元素属性包括链接文字属性、链接地址属性、链接打开方式属性、图片属性、描述文本属性，并且，为每个编辑对象生成与各自的HTMLDOM元素属性对应的输入控件包括：当HTMLDOM元素属性为链接文字属性时，生成链接文字输入控件；当HTMLDOM元素属性为链接地址属性时，生成URL输入控件；当HTMLDOM元素属性为链接打开方式属性时，生成链接打开方式选择控件；当HTMLDOM元素属性为图片属性时，生成图片上传控件；当HTMLDOM元素属性为描述文本属性时，生成描述文本输入控件。5.根据权利要求1所述的方法，其特征在于，所述预设格式为所述HTML片段的代码格式。6.一种Web页面的编辑装置，其特征在于，所述Web页面包括多个区域，每个区域包括一个或多个编辑对象，所述装置包括：HTML获取模块，用于当...

【专利技术属性】
技术研发人员：赵玉开，者文明，赵波，蔚伟，
申请(专利权)人：北京京东尚科信息技术有限公司，北京京东世纪贸易有限公司，
类型：发明
国别省市：北京,11