CN111562911A - 一种网页编辑方法、装置及存储介质 - Google Patents

Abstract

本发明公开了网页编辑方法，该方法适于在计算设备中执行，包括步骤：获取目标页面中的至少一部分网页代码，网页代码适于在目标页面呈现时提供对应的网页内容，并包含一个或者多个网页元素；渲染所获取的网页代码以呈现可编辑网页内容，可编辑网页内容以与对应网页内容在目标页面中呈现相同的方式来呈现；确定与可编辑网页内容中的当前编辑位置相对应的网页元素，并根据用户对网页元素的内容和属性进行的编辑操作对所述网页代码进行修改；以及更新网页代码并存储以包括编辑后的网页元素的内容和属性。本发明还公开了相应的装置及存储介质。

Description

一种网页编辑方法、装置及存储介质

技术领域

本发明涉及互联网信息技术领域，特别涉及一种网页编辑方法、装置及存储介质。

背景技术

在各类网站的首页或列表页上往往有一些区域是需要人工设置的，例如常见的首页推广焦点图，边栏上的推荐内容等。

现有技术方案中，当网站管理人员需要对推荐区焦点文字和链接等进行修改时，需将推荐区代码复制出来，并在代码编辑器的代码编辑区进行操作。这对不具备代码编写知识的非专业人员来说具有一定的难度，实现效率低，易造成误操作代码、格式错误、样式修改不方便等问题。而且由于代码编辑器和浏览器的环境不同，在将代码粘贴进代码编辑器时，会出现冗余代码，进而可能影响整个网页的展示。

发明内容

为此，本发明提供了一种网页编辑方法、装置及存储介质，以力图解决或者至少缓解上面存在的至少一个问题。

根据本发明的一个方面，提供了一种网页编辑方法，该方法适于在计算设备中执行，包括步骤：本发明公开了网页编辑方法，该方法适于在计算设备中执行，包括步骤：获取目标页面中的至少一部分网页代码，网页代码适于在目标页面呈现时提供对应的网页内容，并包含一个或者多个网页元素；渲染所获取的网页代码以呈现可编辑网页内容，可编辑网页内容以与对应网页内容在目标页面中呈现相同的方式来呈现；确定与可编辑网页内容中的当前编辑位置相对应的网页元素，并根据用户对网页元素的内容和属性进行的编辑操作对所述网页代码进行修改；以及更新网页代码并存储以包括编辑后的网页元素的内容和属性。

可选地，在根据本发明的网页编辑方法中，渲染所获取的网页代码以呈现可编辑网页内容包括步骤：获取网页代码所包含每个网页元素的标签样式，根据所述标签样式对网页代码进行渲染。

可选地，在根据本发明的网页编辑方法中，渲染所获取的网页代码以呈现可编辑网页内容还包括步骤：获取网页代码的所在的目标页面区域的区域样式，根据区域样式对网页代码进行渲染。

可选地，在根据本发明的网页编辑方法中，渲染所获取的网页代码以呈现可编辑网页内容还包括步骤：判断网页代码所包含的每个网页元素是否是超链接元素；若是超链接元素，修改网页代码以使所述网页元素的属性为可编辑；根据修改后的网页代码进行渲染以呈现可编辑网页内容。

可选地，在根据本发明的网页编辑方法中，根据用户对网页元素的内容和属性进行的编辑操作对网页代码进行修改包括步骤：根据元素的属性生成与属性对应的编辑单元，编辑单元用于接收用户对网页元素的属性进行的编辑操作；根据用户对网页元素的属性进行的编辑操作对网页代码进行修改。

可选地，在根据本发明的网页编辑方法中，根据用户对网页元素的内容和属性进行的编辑操作对网页代码进行修改包括步骤：获取用户直接在与网页元素对应的可编辑网络内容上进行的编辑操作；根据用户对网页元素的内容进行的编辑操作对网页代码进行修改。

可选地，在根据本发明的网页编辑方法中，根据用户对网页元素的内容和属性进行的编辑操作对网页代码进行修改还包括步骤：将用户进行编辑操作前的网页元素存入数组，编辑操作还包括撤销，撤销时将根据数组恢复用户进行对其编辑操作前的网页元素。

可选地，在根据本发明的网页编辑方法中，网页元素的属性包括：颜色、字体、标记。

可选地，在根据本发明的网页编辑方法中，对网页元素的内容进行的编辑操作包括：修改、删除、增加。

根据本发明的又一个方面，提供了一种网页编辑装置，包括：网页代码获取模块，用于获取目标页面中的至少一部分网页代码，网页代码适于在目标页面呈现时提供对应的网页内容，并包含一个或者多个网页元素；渲染模块，用于渲染所获取的网页代码以呈现可编辑网页内容，可编辑网页内容以与对应网页内容在所述目标页面中呈现相同的方式来呈现；编辑模块，用于确定与可编辑网页内容中的当前编辑位置相对应的网页元素，并根据用户对网页元素的内容和属性进行的编辑操作对代码进行修改；网页代码存储模块，用于获取修改后的网页代码并存储。

可选地，在根据本发明的网页编辑装置中，渲染模块进一步用于获取、网页代码所包含的每个网页元素的标签样式，根据标签样式对网页代码进行渲染。

可选地，在根据本发明的网页编辑装置中，渲染模块进一步用于获取网页代码的所在的目标页面区域的区域样式，根据区域样式对网页代码进行渲染。

可选地，在根据本发明的网页编辑装置中，渲染模块进一步用于判断网页代码所包含的每个网页元素是否是超链接元素，若是超链接元素，修改网页代码以使网页元素的属性为可编辑，根据修改后的网页代码进行渲染以呈现可编辑网页内容。

可选地，在根据本发明的网页编辑装置中，编辑模块包括属性编辑单元，属性编辑单元用于呈现编辑菜单，编辑菜单跟随元素的属性而变化，并接收用户对网页元素的属性进行的编辑操作，根据用户对网页元素的属性进行的编辑操作对网页代码进行修改。

可选地，在根据本发明的网页编辑装置中，编辑模块包括网页内容容器，网页内容容器用于呈现渲染后的可编辑网页内容，并获取用户直接在与网页元素对应的可编辑网络内容上进行的编辑操作，根据用户对网页元素的内容进行的编辑操作对网页代码进行修改。

可选地，在根据本发明的网页编辑装置中，网页代码存储模块进一步用于将用户进行编辑操作前的网页元素存入数组，编辑操作还包括撤销，撤销时将根据数组恢复用户进行对其编辑操作前的网页元素。

可选地，在根据本发明的网页编辑装置中，网页元素的属性包括：颜色、字体、标记。

可选地，在根据本发明的网页编辑装置中，对网页元素的内容进行的编辑操作包括：修改、删除、增加。

根据本发明的又一个方面，提供了一种计算设备，包括至少一个处理器；以及存储器，存储有程序指令，其中程序指令被配置为适于由至少一个处理器执行，程序指令包括用于执行根据本发明的网页编辑方法。

根据本发明的又一个方面，提供了一种存储有程序指令的可读存储介质，当该程序指令被客户端读取并执行时，使得客户端执行本发明的网页编辑方法。

根据本发明的技术方案，获取目标页面中的至少一部分网页代码，渲染所获取的网页代码以呈现可编辑网页内容，代码经过渲染之后用户可以看到和实际页面一样的内容，根据用户对可编辑网页内容中网页元素的内容和属性进行的编辑操作对网页代码进行修改并保存，可以减少非专业人员在修改代码过程中可能会出现的错误，提高工作效率。

进一步地，在对可编辑网页内容中地网页元素地属性进行编辑时，根据元素的属性生成与属性对应的编辑单元，编辑单元用于接收用户对网页元素的属性进行的编辑操作，根据用户对网页元素的属性进行的编辑操作对网页代码进行修改，保证了修改后代码格式的正确性。

附图说明

为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。

图1示出了根据本发明的一个实施例的计算设备100的构造示意图；

图2示出了根据本发明的一个实施例的网页编辑方法200的流程图；

图3示出了根据本发明的一个实施例的网页编辑装置300的示意图；

图4示出了根据本发明的一个实施例的编辑模块的界面的示意图；

图5a-c示出了根据本发明的一个网页编辑操作过程的界面的示意图。

具体实施方式

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

图1是示例计算设备100的框图。在基本的配置102中，计算设备100典型地包括系统存储器106和一个或者多个处理器104。存储器总线108可以用于在处理器104和系统存储器106之间的通信。

取决于期望的配置，处理器104可以是任何类型的处理器，包括但不限于：微处理器(μP)、微控制器(μC)、数字信息处理器(DSP)或者它们的任何组合。处理器104可以包括诸如一级高速缓存110和二级高速缓存112之类的一个或者多个级别的高速缓存、处理器核心114和寄存器116。示例的处理器核心114可以包括运算逻辑单元(ALU)、浮点数单元(FPU)、数字信号处理核心(DSP核心)或者它们的任何组合。示例的存储器控制器118可以与处理器104一起使用，或者在一些实现中，存储器控制器118可以是处理器104的一个内部部分。

取决于期望的配置，系统存储器106可以是任意类型的存储器，包括但不限于：易失性存储器(诸如RAM)、非易失性存储器(诸如ROM、闪存等)或者它们的任何组合。系统存储器106可以包括操作系统120、一个或者多个应用122以及程序数据124。在一些实施方式中，应用122可以布置为在操作系统上利用程序数据124进行操作。在一些实施例中，计算设备100被配置为执行网页编辑方法，程序数据124中就包含了用于执行所述方法的指令。

计算设备100还可以包括有助于从各种接口设备(例如，输出设备142、外设接口144和通信设备146)到基本配置102经由总线/接口控制器130的通信的接口总线140。示例的输出设备142包括图形处理单元148和音频处理单元150。它们可以被配置为有助于经由一个或者多个A/V端口152与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外设接口144可以包括串行接口控制器154和并行接口控制器156，它们可以被配置为有助于经由一个或者多个I/O端口158和诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、图像输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备146可以包括网络控制器160，其可以被布置为便于经由一个或者多个通信端口164与一个或者多个其他计算设备162通过网络通信链路的通信。

网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频(RF)、微波、红外(IR)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。在一些实施例中，计算机可读介质中存储一个或多个程序，这一个或多个程序中包括执行某些方法的指令，如根据本发明的实施例，计算设备100通过所述指令来执行网页编辑方法。

计算设备200上安装有支持网络文件传输和存储的客户端应用，包括原生应用或者诸如包括IE、Chrome和Firefox等浏览器，并且本地存储有各种文件，如照片、音频、视频、文档(如Word、PDF等格式的文档)。应用客户端可以运行在诸如Windows、MacOS等操作系统上。计算设备100可以实现为小尺寸便携(或者移动)电子设备的一部分，这些电子设备可以是诸如蜂窝电话、数码照相机、个人数字助理(PDA)、个人媒体播放器设备、无线网络浏览设备、个人头戴设备、应用专用设备、或者可以包括上面任何功能的混合设备。计算设备100还可以实现为包括桌面计算机和笔记本计算机配置的个人计算机。

浏览器为在客户端应用之一，根据本发明的一个实施例，计算设备100上的浏览器可以向用户呈现各类网站的首页或列表页，这些页面上往往有一些区域是需要人工设置的，例如常见的首页推广焦点图，边栏上的推荐内容等。

在根据本发明的计算设备100中，应用122包括网页编辑装置300，网页编辑装置300留驻在计算设备100中，以便计算设备100通过执行网页编辑方法200来进行网页编辑。

图2示出了根据本发明的一个实施例的网页编辑方法200的流程图。方法200适于在计算设备(例如前述计算设备100)中执行。如图2所示，网页编辑方法始于步骤210。

在步骤S210中，获取目标页面中的至少一部分网页代码。网页代码适于在所述目标页面呈现时提供对应的网页内容，并包含一个或者多个网页元素。

每一个网页本质上都是一个HTML(超文本标记语言，Hyper Text MarkupLanguage)文件，HTML通过标签描述将在网页上显示的信息例如文字、图片、声音、动画等各种资源，通过浏览器解释HTML代码，将信息展示给浏览者。在这里例举一些HTML标签，<div>为网页布局常用的块元素，可用来作为放置任何网页元素的容器，<ul>、<li>为无序列表标签，常用来定义多个并列的项目，例如导航栏等。CSS(层叠样式表，Cascading StyleSheets)负责网页内容HTML的表现，样式就是格式，例如网页中文字的大小、颜色、图片的大小、插入位置等，层叠是指多个样式可以同时应用到同一个页面或者网页中的同一个元素。客户端的浏览器可以呈现各类网站的首页或列表页，这些页面上往往有一些区域是需要人工设置的，例如网站管理人员对推荐区焦点文字和链接等进行修改，这些推荐区常见的有首页推广焦点图，边栏上的推荐内容等，它们主要是使用无序列表制作的，无序列表始于<ul>标签，每个列表项始于<li>标签。在列表项内部可以使用段落、换行符、图片、链接以及其他列表等。

根据本发明的一个实施例，通过jQuery获取目标页面区域的代码，具有独特的链式语法和短小清晰的多功能接口，具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展。获取得的目标页面中的部分网页代码如下所示：

<ul class＝"ui-list mainnews-list pb-0"><li><ahref＝"https://www.autohome.com.cn/drive/201911/953010.html"style＝"font-weight:bold；">试领克03PHEV</a><ahref＝"https://www.autohome.com.cn/drive/201911/953041.html"style＝"font-weight:bold；">试新款劲炫ASX</a><ahref＝"https://www.autohome.com.cn/drive/201911/952980.html"style＝"font-weight:bold；">测柯米克GT</a><ahref＝"https://www.autohome.com.cn/drive/201911/951121-4.html"

style＝"font-weight:bold；">试威马EX6 Plus</a></li></ul>

随后，进入步骤S220，渲染所获取的网页代码以呈现可编辑网页内容。可编辑网页内容以与对应网页内容在所述目标页面中呈现相同的方式来呈现，即代码经过渲染之后用户可以看到和实际页面一样的内容。

根据本发明的一个实施例，获取网页代码所包含每个网页元素的标签样式，根据标签样式对所述网页代码进行渲染。例如<li>标签元素中包含的“style＝"font-weight:bold"”,即定义该列表元素为红色。

进一步地，获取网页代码的所在的目标页面区域的区域样式，根据区域样式对所述网页代码进行渲染。例如<html>标签网页中:

即定义该网页文字颜色为蓝色，网页背景颜色为某特定颜色。

因为获取的代码里所包含的CSS样式是直接写在标签里的，而在整体进行渲染前还获取了网页代码的所在的目标页面区域的区域样式，所以并不会出现漏掉的情况，需要对网页进行编辑的人员即用户可以准确地看到和实际页面一样的内容。获取网页代码和样式的方式可以通过jQuery工具，jQuery是具有高效灵活特点的CSS选择器，并且可对CSS选择器进行扩展。还有其他获取网页代码和样式的方式本发明不做限制。

根据本发明的又一个实施例，所获取的网页代码以呈现可编辑网页内容还包括步骤：判断网页代码所包含的每个网页元素是否是超链接元素，若是超链接元素，修改网页代码以使网页元素的属性为可编辑，根据修改后的网页代码进行渲染以呈现可编辑网页内容。

因为获取的网页代码中还包括超链接标签元素，链接的作用就是在超文本系统中获取另一个资源，目标资源可以是另一个网页、当前网页中的某个位置、Internet以及本地硬盘或局域网上的其他文件。基本的超链接包括链接源和链接目标两个部分，链接源指在浏览器中能够直接看到的有链接功能的文本或图片等对象，通常鼠标停留在这些对象上时指针会变成手形，而链接目标就是在单击链接源的时候网页链接所打开的另一个资源。HTML使用<a>标签来创建超链接，其最基本的格式为：<a href＝"链接目标">链接源</a>。例如<a href＝"https://www.autohome.com.cn/drive/201911/951121-4.html">试威马EX6Plus</a>。在根据本发明的一个实施方式中，正常在点击超链接时都会跳转到一个新的页面，所以给每一个超链接标签元素设置一个contenteditable＝true，以便阻止超链接跳转，并可直接编辑。

在实际执行应用本方法的过程中，用户还可以点击“隐藏代码”按钮，将代码隐藏以展现可视化界面，用户直接在可视化界面上进行操作，此时“隐藏代码”按钮变为“显示代码”，结合上述实施例，实现渲染所获取的网页代码以呈现可编辑网页内容的关键代码如下所示：

随后在步骤S230中，确定与可编辑网页内容中的当前编辑位置相对应的网页元素，并根据用户对网页元素的内容和属性进行的编辑操作对网页代码进行修改。

根据本发明的一个实施例，当鼠标停留在可编辑网页内容中的这些元素上并点击时，确定被点击的网页元素为与可编辑网页内容中的当前编辑位置相对应的网页元素。

根据本发明的一个实施例，根据用户对网页元素的内容和属性进行的编辑操作对所述网页代码进行修改包括步骤：获取用户直接在与网页元素对应的可编辑网络内容上进行的编辑操作，根据用户对网页元素的内容进行的编辑操作对网页代码进行修改。具体地，对网页元素的内容进行的编辑操作包括：修改、删除、增加。

在根据本发明的一种实现方式中，步骤S220中可编辑网页内容以与对应网页内容在目标页面中呈现相同的方式来呈现，用户直接在可编辑网页内容的界面中直接对可视化后的网页元素进行操作即可，例如对呈现在页面上的推荐区焦点文字和链接等进行修改，这些推荐区常见的有首页推广焦点图，边栏上的推荐内容等，推荐区列表内容在网页上的显示文本即为网页元素的内容，用户直接在显示文本上进行修改、删除、增加。根据用户对网页元素的内容进行的编辑操作对网页代码进行修改，即获取用户直接修改后的显示文本对网页代码中的显示文本部分进行修改。

下面结合对一个具体网页元素的内容的修改过程进行说明。

例如网页元素<a style＝"font-weight:bold；"href＝"https://www.autohome.com.cn/drive/201912/953835.html？pvareaid＝3311314">试驾新宝骏RC-6</a>，渲染所获取的网页代码以呈现可编辑网页内容后，其显示文本为“试驾新宝骏”，用户选中此元素后，在可编辑网页内容的界面中修改此文本为“新宝骏”，修改后的网页元素为<a style＝"font-weight:bold；"href＝"https://www.autohome.com.cn/drive/201912/953835.html？pvareaid＝3311314">新宝骏RC-6</a>。

根据本发明的又一个实施例，根据用户对网页元素的内容和属性进行的编辑操作对所述网页代码进行修改还包括步骤：根据元素的属性生成与所述属性对应的编辑单元，编辑单元用于接收用户对网页元素的属性进行的编辑操作，根据用户对网页元素的属性进行的编辑操作对网页代码进行修改。具体地，网页元素的属性包括：颜色、字体、标记。颜色、字体属性指网页元素在界面上的显示文本的格式，标记指根据网页元素中是否含有某个特定功能在界面上显示指定标记，例如点击此网页元素后是否能显示视频或是新的列表。

在根据本发明的一种实现方式中，生成的编辑单元在可编辑界面以按钮的形式存在，按钮是存在于右侧，根据每次选中的网页元素的不同状态和样式，按钮内的文字会显示对应的状态。

下面结合对网页元素的字体属性的具体修改过程进行说明。网页元素的属性包含在style中，style是元素的内联样式属性名，style的内容决定了标签显示到页面上的样子。这些属性原本就有，根据用户的选择对其进行操作。对网页元素的字体属性进行修改时，首先检测该元素style里是否有font-weight，如果有，调用btnAddBoldStyle(true)，修改“字体加粗”按钮为“取消字体加粗”，并给按钮添加cancel标记，如果没有，调用btnAddBoldStyle(false)，修改“取消字体加粗”按钮为“字体加粗”，并把按钮cancel标记移除。实现该过程的关键代码如下所示：

最后在步骤S240中，更新网页代码并存储以包括编辑后的网页元素的内容和属性。根据本发明的一个实施例，将用户进行编辑操作前的网页元素存入数组，编辑操作还包括撤销，撤销时将根据数组恢复用户进行对其编辑操作前的网页元素。具体地，可以通过saveHtml()方法保存改变前的代码到pile数组变量里。可编辑网页内容界面上方还有“上一步”按钮，当用户点击“上一步”时，会从pile数组里取出最后一个值并更新，然后删除该值。

根据本发明的网页编辑方法，获取目标页面中的至少一部分网页代码，渲染所获取的网页代码以呈现可编辑网页内容，代码经过渲染之后用户可以看到和实际页面一样的内容，根据用户对可编辑网页内容中网页元素的内容和属性进行的编辑操作对网页代码进行修改并保存，修改过程全程可视化，操作简单，可以减少非专业人员在修改代码过程中可能会出现的错误，提高工作效率。

进一步地，在对可编辑网页内容中地网页元素地属性进行编辑时，根据元素的属性生成与属性对应的编辑单元，编辑单元用于接收用户对网页元素的属性进行的编辑操作，根据用户对网页元素的属性进行的编辑操作对网页代码进行修改，保证了修改后代码格式的正确性。

图3示出了根据本发明的一个实施例的网页编辑装置300的示意图，网页编辑装置包括网页代码获取模块310、渲染模块320、编辑模块330、网页代码存储模块340。

网页代码获取模块310用于获取目标页面中的至少一部分网页代码，网页代码适于在目标页面呈现时提供对应的网页内容，并包含一个或者多个网页元素。

渲染模块320用于渲染所获取的网页代码以呈现可编辑网页内容，可编辑网页内容以与对应网页内容在目标页面中呈现相同的方式来呈现。

可选地，渲染模块320进一步用于获取网页代码所包含每个网页元素的标签样式，根据标签样式对所述网页代码进行渲染。

可选地，渲染模块320进一步用于获取网页代码的所在的目标页面区域的区域样式，根据区域样式对网页代码进行渲染。

可选地，渲染模块320进一步用于判断网页代码所包含的每个网页元素是否是超链接元素，若是超链接元素，修改网页代码以使网页元素的属性为可编辑，根据修改后的网页代码进行渲染以呈现可编辑网页内容。

编辑模块330用于确定与可编辑网页内容中的当前编辑位置相对应的网页元素，并根据用户对网页元素的内容和属性进行的编辑操作对代码进行修改。

可选地，编辑模块330包括属性编辑单元，属性编辑单元用于呈现编辑菜单，编辑菜单跟随元素的属性而变化，并接收用户对网页元素的属性进行的编辑操作，根据用户对网页元素的属性进行的编辑操作对网页代码进行修改。进一步地，网页元素的属性包括：颜色、字体、标记。颜色、字体属性指网页元素在界面上的显示文本的格式，标记指根据网页元素中是否含有某个特定功能在界面上显示指定标记，例如点击此网页元素后是否能显示视频或是新的列表。

可选地，编辑模块330包括网页内容容器，网页内容容器用于呈现渲染后的可编辑网页内容，并获取用户直接在与网页元素对应的可编辑网络内容上进行的编辑操作，根据用户对网页元素的内容进行的编辑操作对网页代码进行修改。网页元素的内容进行的编辑操作包括：修改、删除、增加。

图4示出了根据本发明的一个编辑模块的界面的示意图，左侧是网页内容容器，右侧是属性编辑单元，属性单元上有按钮“标红”、“字体加粗”“视频标识”，对应于对包括颜色、字体、标记的网页元素的属性的操作。检测该元素中是否有红色、字体是否为加粗、点击该元素后是否能呈现视频，根据每次选中的网页元素的不同状态和样式，按钮内的文字会显示对应的状态。当用户点击“标红”按钮时，该网页元素在界面上的显示文本变成红色，并相应修改该元素的网页代码，“标红”按钮变为“取消标红”。当用户点击“字体加粗”按钮时，该网页元素在界面上的显示文本字体为加粗，并相应修改该元素的网页代码，“字体加粗”按钮变为“取消字体加粗”。当用户点击“视频标识”按钮时，该网页元素在界面上的显示文本会增加一个指定标记，并相应修改该元素的网页代码，“视频标识”按钮变为“取消视频标识”。“删除”按钮用于在界面上删除选中的网页元素，并相应修改网页代码。

可编辑网页内容界面上方有“上一步”按钮，将用户进行编辑操作前的网页元素存入数组，当用户点击“上一步”时，从数组里取出最后一个值并更新，然后删除该值。

可编辑网页内容界面上方还有“显示代码”按钮，此时可编辑网页内容界面为可视化界面，用户直接在可视化界面上进行操作，用户可以点击“显示代码”按钮，将可视化界面展现为网页代码界面，此时“显示代码”按钮变为“隐藏代码”。

网页代码存储模块340用于获取修改后的网页代码并存储。

可选地，网页代码存储模块340进一步用于将用户进行编辑操作前的网页元素存入数组，所述编辑操作还包括撤销，撤销时将根据所述数组恢复用户进行对其编辑操作前的网页元素。

图5a示出了根据本发明的一个网页编辑操作过程的界面的示意图之一，该编辑操作在图4示出的编辑模块的界面上执行，将获取的代码放入网页内容容器。

图5b示出了根据本发明的一个网页编辑操作过程的界面的示意图之一，隐藏代码后，用户尚未在可视化界面上进行编辑，此时“首度试驾长安CS55PLUS”字体为加粗。

图5c示出了根据本发明的一个网页编辑操作过程的界面的示意图之一，用户已在在可视化界面上进行编辑，此时“首度试驾长安CS55 PLUS”字体取消了加粗。

A8、如A1-A7中任一项所述的方法，所述网页元素的属性包括：颜色、字体、标记。

A9、如A1-A8中任一项所述的方法，所述对所述网页元素的内容进行的编辑操作包括：修改、删除、增加。

A11、如A10所述的网页编辑装置，所述渲染模块进一步用于获取所述网页代码所包含每个网页元素的标签样式，根据所述标签样式对所述网页代码进行渲染。

A12、如A10或A11所述的网页编辑装置，所述渲染模块进一步用于获取所述网页代码的所在的目标页面区域的区域样式，根据所述区域样式对所述网页代码进行渲染。

A13、如A10-A12中任一项所述的网页编辑装置，所述渲染模块进一步用于判断所述网页代码所包含的每个网页元素是否是超链接元素，若是超链接元素，修改所述网页代码以使所述网页元素的属性为可编辑，根据修改后的网页代码进行渲染以呈现可编辑网页内容。

A14、如A10-A13中任一项所述的网页编辑装置，所述编辑模块包括属性编辑单元，所述属性编辑单元用于呈现编辑菜单，所述编辑菜单跟随所述元素的属性而变化，并接收用户对所述网页元素的属性进行的编辑操作，根据所述用户对所述网页元素的属性进行的编辑操作对所述网页代码进行修改。

A15、如A10-A14中任一项所述的网页编辑装置，所述编辑模块包括网页内容容器，所述网页内容容器用于呈现渲染后的可编辑网页内容，并获取用户直接在与所述网页元素对应的可编辑网络内容上进行的编辑操作，根据用户对所述网页元素的内容进行的编辑操作对所述网页代码进行修改。

A16、如A10-A15中任一项所述的网页编辑装置，所述网页代码存储模块进一步用于将用户进行编辑操作前的网页元素存入数组，所述编辑操作还包括撤销，撤销时将根据所述数组恢复用户进行对其编辑操作前的网页元素。

A17、如A10-A16中任一项所述的网页编辑装置，所述网页元素的属性包括：颜色、字体、标记。

A18、如A10-A17中任一项所述的网页编辑装置，所述对所述网页元素的内容进行的编辑操作包括：修改、删除、增加。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组件可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

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

此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。

如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。

尽管根据有限数量的实施例描述了本发明，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的，而非限制性的，本发明的范围由所附权利要求书限定。

Claims (10)

1.一种网页编辑方法，所述方法适于在计算设备中执行，所述方法包括步骤：

获取目标页面中的至少一部分网页代码，所述网页代码适于在所述目标页面呈现时提供对应的网页内容，并包含一个或者多个网页元素；

渲染所获取的网页代码以呈现可编辑网页内容，所述可编辑网页内容以与所述对应网页内容在所述目标页面中呈现相同的方式来呈现；

确定与所述可编辑网页内容中的当前编辑位置相对应的网页元素，并根据用户对所述网页元素的内容和属性进行的编辑操作对所述网页代码进行修改；以及

更新所述网页代码并存储以包括编辑后的网页元素的内容和属性。

2.如权利要求1所述的方法，渲染所获取的网页代码以呈现可编辑网页内容包括步骤：

获取所述网页代码所包含的每个网页元素的标签样式，根据所述标签样式对所述网页代码进行渲染。

3.如权利要求1或2所述的方法，渲染所获取的网页代码以呈现可编辑网页内容还包括步骤：

获取所述网页代码的所在的目标页面区域的区域样式，根据所述区域样式对所述网页代码进行渲染。

4.如权利要求1-3中任一项所述的方法，渲染所获取的网页代码以呈现可编辑网页内容还包括步骤：

判断所述网页代码所包含的每个网页元素是否是超链接元素；

若是超链接元素，修改所述网页代码以使所述网页元素的属性为可编辑；

根据修改后的网页代码进行渲染以呈现可编辑网页内容。

5.如权利要求1-4中任一项所述的方法，所述根据用户对所述网页元素的内容和属性进行的编辑操作对所述网页代码进行修改包括步骤：

根据所述元素的属性生成与所述属性对应的编辑单元，所述编辑单元用于接收用户对所述网页元素的属性进行的编辑操作；

根据所述用户对所述网页元素的属性进行的编辑操作对所述网页代码进行修改。

6.如权利要求1-5中任一项所述的方法，所述根据用户对所述网页元素的内容和属性进行的编辑操作对所述网页代码进行修改包括步骤：

获取用户直接在与所述网页元素对应的可编辑网络内容上进行的编辑操作；

根据用户对所述网页元素的内容进行的编辑操作对所述网页代码进行修改。

7.如权利要求1-6中任一项所述的方法，根据用户对所述网页元素的内容和属性进行的编辑操作对所述网页代码进行修改还包括步骤：

将用户进行编辑操作前的网页元素存入数组，所述编辑操作还包括撤销，撤销时将根据所述数组恢复用户进行对其编辑操作前的网页元素。

8.一种网页编辑装置，所述装置包括：

网页代码获取模块，用于获取目标页面中的至少一部分网页代码，所述网页代码适于在所述目标页面呈现时提供对应的网页内容，并包含一个或者多个网页元素；

渲染模块，用于渲染所获取的网页代码以呈现可编辑网页内容，所述可编辑网页内容以与所述对应网页内容在所述目标页面中呈现相同的方式来呈现；

编辑模块，用于确定与所述可编辑网页内容中的当前编辑位置相对应的网页元素，并根据用户对所述网页元素的内容和属性进行的编辑操作对代码进行修改；

网页代码存储模块，用于获取修改后的网页代码并存储。

9.一种计算设备，包括：

至少一个处理器；以及

存储器，存储有程序指令，其中，所述程序指令被配置为适于由所述至少一个处理器执行，所述程序指令包括用于执行如权利要求1-7中任一项所述的网页编辑方法的指令。

10.一种存储有程序指令的可读存储介质，当所述程序指令被客户端读取并执行时，使得所述客户端执行如权利要求1-7中任一项所述方法。

Images