CN109815434A - 页面编辑方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及计算机技术领域，提供了一种页面编辑方法、装置、设备及存储介质，所述页面编辑方法包括：若检测到焦点元素处于可编辑范围内，则获取焦点元素在构建网络页面的预设表单中的焦点位置信息；确定焦点位置信息对应的编辑框，作为目标编辑框；对接收到的用户输入的内容进行解析，并将解析得到的标准内容填入目标编辑框中，作为目标内容；当监测到焦点元素不处于目标编辑框时，将目标内容发送给服务端。本发明能够提高页面的构建效率。

Description

页面编辑方法、装置、设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种页面编辑方法、装置、设备及存储介质。

背景技术

传统的页面编辑方法主要是先通过人工选定待编辑的输入框，形成输入状态，然后弹出可编辑的输入框，在可编辑的输入框的输入区域输入文本内容，文本内容输入完毕，需要人工点击完成按钮，形成完成编辑框的编辑状态，才将编辑完的文本内容发送到服务端，这种传统的表格编辑方法需要通过多个繁琐的编辑步骤才能完成页面表格的编辑，耗费的编辑时间较长，导致网络页面的构建效率降低。

发明内容

基于此，有必要针对上述技术问题，提供一种页面编辑方法、装置、设备及存储介质，以解决传统页面编辑方法构建页面效率降低的问题。

一种页面编辑方法，包括：

若检测到焦点元素处于可编辑范围内，则获取所述焦点元素在构建网络页面的预设表单中的焦点位置信息；

确定所述焦点位置信息对应的编辑框，作为目标编辑框；

对接收到的用户输入的内容进行解析，并将解析得到的标准内容填入所述目标编辑框中，作为目标内容；

当监测到所述焦点元素不处于所述目标编辑框时，将所述目标内容发送给服务端。

一种页面编辑装置，包括：

信息获取模块，用于若检测到焦点元素处于可编辑范围内，则获取所述焦点元素在构建网络页面的预设表单中的焦点位置信息；

目标确定模块，用于确定所述焦点位置信息对应的编辑框，作为目标编辑框；

内容解析模块，用于对接收到的用户输入的内容进行解析，并将解析得到的标准内容填入所述目标编辑框中，作为目标内容；

内容发送模块，用于当监测到所述焦点元素不处于所述目标编辑框时，将所述目标内容发送给服务端。

一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述页面编辑方法。

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

上述页面编辑方法、装置、设备及存储介质，通过对检测到的处于可编辑范围内的焦点元素，获取该焦点元素在构建网络页面的预设表单中的焦点位置信息，并确定焦点位置信息对应的编辑框，作为目标编辑框，通过对焦点元素进行监听，实时获取该焦点元素的焦点位置信息，能够快速锁定目标编辑框，然后，对接收到的用户输入的文本内容进行解析，并将解析得到的标准内容填入目标编辑框中，作为目标内容，进而当监测到当前焦点元素不处于所述目标编辑框时，则将目标内容发送给服务端，实现文本内容在目标编辑框中的自动完成编辑，并通过对当前焦点元素的实时监听，自动将完成编辑的目标内容提交到服务端，实现页面编辑智能化，缩短了页面编辑的时间，从而提高页面的构建效率。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一实施例中页面编辑方法的一应用环境示意图；

图2是本发明一实施例中页面编辑方法的一流程图；

图3是本发明一实施例中页面编辑方法中步骤S1的实现流程图；

图4是本发明一实施例中页面编辑方法中初始化预设表单的一流程图；

图5是本发明一实施例中页面编辑方法中步骤S2的一实现流程图；

图6是本发明一实施例中页面编辑方法中步骤S4的一实现流程图；

图7是本发明一实施例中页面编辑装置的一示意图；

图8是本发明一实施例中计算机设备的一示意图。

具体实施方式

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

图1示出了本发明实施例提供的应用环境，该应用环境包括服务端和客户端，其中，服务端和客户端之间通过网络进行连接，客户端用于处理页面编辑数据，并将处理好的页面编辑数据发送到服务端，客户端具体可以但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备；服务端用于接收处理好的页面编辑数据，服务端具体可以用独立的服务器或者多个服务器组成的服务器集群实现。本发明实施例提供的页面编辑方法应用于客户端。

请参阅图2，图2示出本实施例提供的页面编辑方法的实现流程。详述如下：

S1：若检测到焦点元素处于可编辑范围内，则获取焦点元素在构建网络页面的预设表单中的焦点位置信息。

在本实施例中，焦点元素具体可以是预设表单上的光标，通常以一个小竖线的形式呈现，能够规则的闪动，如用户想要在网络页面上的一个文本框或某种程序中，输入文字或代码时，需要一个光标来显示将要输入文字或代码的位置，焦点元素可以用于说明该焦点元素在预设表单上的当前位置是处于一种正常的操作状态，也可以说是该焦点元素在预设表单上的当前位置是处于一种待选取状态，或是该焦点元素在预设表单上的当前位置是处于待编辑状态，具体根据焦点元素在页面的预设表单中的焦点位置信息决定该焦点元素表示的状态，如焦点位置信息在不可编辑范围中，表示该焦点元素处于正常的非操作状态，其中，预设表单是用于显示网络页面的表格类数据的表格框架，该表格框架中包含了可编辑范围和不可编辑范围，其中，可编辑范围包括可编辑的矩形框，即多种类型的可编辑的表格编辑框，还包括预设表单上设置的可编辑的标题或标签区域等，此处不做具体限制。

具体地，在构建网络页面时，可以在具备有监听功能的程序插件中创建预设表单，然后启动监听对象为焦点元素的监听任务，可以用于检测焦点元素的生成，若检测到预设表单中有焦点元素生成，且焦点元素在可编辑范围内出现，可以理解为该焦点元素当前处于待编辑状态，则能够获取焦点元素在构建网络页面的预设表单中的焦点位置信息，即该焦点元素在预设表单中具体的坐标位置信息，进一步地确定该焦点元素所在的编辑状态的具体的待编辑表格。

S2：确定焦点位置信息对应的编辑框，作为目标编辑框。

在本实施例中，目标编辑框是用于表示在预设表单中处于待编辑状态的编辑框，其中，预设表单中的每个预设的编辑框都有各自包含的坐标点或坐标区域范围。

具体地，获取预设表单中的每个预设的编辑框的坐标区域范围，根据在步骤S1中获取到的焦点元素在构建网络页面的预设表单中具体的焦点位置信息，查看该焦点位置信息落入的编辑框的坐标区域范围，进而获取该坐标区域范围对应的编辑框，作为预设表单上当前处于编辑状态的目标编辑框。

例如，通过一具体实施例进行说明，假如检测到一焦点元素A处于可编辑范围内，并获取到该焦点元素A在预设表单中的具体的焦点位置信息为a，可以查看到该焦点位置信息a所属于的预设的编辑框的坐标范围为Q，则能够表示该坐标范围Q对应的编辑框，为预设表单上当前处于待编辑状态的目标编辑框。

S3：对接收到的用户输入的内容进行解析，并将解析得到的标准内容填入目标编辑框中，作为目标内容。

具体地，由于接收到的内容具体可以是图片、视频、音频、文字或者符号等多种类型格式的数据，若直接将所述内容导入目标编辑框中并完成编辑提交至服务端，容易因为数据格式不统一、不规范的问题，导致将接收到的文本内容在存入到步骤S2得到的目标编辑框的过程中，生成的目标内容出现乱码或缺失，或者保存失败等情况，或者导致服务端接收的编辑完毕的数据是缺失或乱码的情况，所以本实施例通过将接收到的内容进行读取，并按照预设的图片格式、文字格式或者符号格式等，将读取到的文本内容进行转换，得到适合目标编辑框进行保存的，格式统一的标准内容，然后，将得到的标准内容，添加到步骤S2得到的目标编辑框中，保存为目标内容，能够有效减少由于目标内容因为数据格式不统一、不规范的问题，导致目标内容乱码、缺失或内容保存失败，不能提交至服务端的情况，提高对目标编辑框中的目标内容的处理效率，从而提高构建网络页面的效率。

需要说明的是，每个目标编辑框中都有用于可输入标准内容的编辑区域，能够将文本内容解析后得到的标准内容，自动添加到目标编辑框中的可输入标准内容的编辑区域，得到目标内容，并能够自动将该目标内容进行保存，实现文本内容编辑的自动化，从而实时页面编辑自动化，提高构建网络页面的效率。

S4：当监测到焦点元素不处于目标编辑框时，将目标内容发送给服务端。

具体地，由于在得到目标内容之后，为了确定该目标内容所在的目标编辑框是否编辑完成，因此，可以通过监测预设表单上在步骤S1中检测到的焦点元素之后，是否有新的焦点元素的生成，若无新的焦点元素生成，或者有新的焦点元素生成，但该焦点元素仍处于目标编辑框中，则可以理解为该目标编辑框仍然处于待编辑状态；若监测到有新的焦点元素生成，且监测到该焦点元素不处于目标编辑框时，则可以理解为该目标内容所在的目标编辑框完成编辑，然后，可以按照预先设置的监听任务将该完成编辑的目标内容自动提交至服务端，实现目标内容提交自动化，从而提高构建网络页面的效率。

在本实施例中，通过对检测到的处于可编辑范围内的焦点元素，获取该焦点元素在构建网络页面的预设表单中的焦点位置信息，并确定焦点位置信息对应的编辑框，作为目标编辑框，通过对焦点元素进行监听，实时获取该焦点元素的焦点位置信息，能够快速锁定目标编辑框，然后，对接收到的用户输入的文本内容进行解析，并将解析得到的标准内容填入目标编辑框中，作为目标内容，进而当监测到当前焦点元素不处于所述目标编辑框时，则将目标内容发送给服务端，实现文本内容在目标编辑框中的自动完成编辑，并通过对当前焦点元素的实时监听，自动将完成编辑的目标内容提交到服务端，实现页面编辑智能化，缩短了页面编辑的时间，从而提高页面的构建效率。

在一实施例中，如图3所示，步骤S1中，即若检测到焦点元素处于可编辑范围内，则获取焦点元素在构建网络页面的预设表单中的焦点位置信息具体包括如下步骤：

S101：检测在可编辑范围内是否有焦点元素生成。

在本实施例中，焦点元素具体可以是在预设表单的可编辑范围内通过鼠标的点击、键盘的键入或者人手触摸该待编辑表格等情况下生成的，每个焦点元素会在预设表单上产生对应的焦点位置信息，方便后续步骤对目标编辑框的快速确定。

具体地，检测在可编辑范围内是否有焦点元素生成具体可以是通过调用可以用检测光标(GetCursorPos)函数来实现对焦点元素生成的检测，以及对焦点元素的焦点位置信息的检测，其中，GetCursorPos函数能够检测预设表单中焦点元素的生成，实现对预设表单上的焦点元素的快速捕捉，并能够检取该焦点元素的焦点位置信息，以预设表单的坐标系上的坐标输出该焦点位置信息，能够明确显示当前焦点元素的x轴坐标和当前y轴的坐标，实现对焦点元素是否生成的快速检测，和焦点位置信息的快速获取，从而提高网络页面的构建效率。

需要说明的是，鼠标点击是指在显示设备通过光标点击的方式来实现的操作，显示设备能够根据光标点击的位置来定位焦点元素，并根据光标点击的位置，获取光标点击的坐标。键盘键入是指在显示设备通过键盘输入数据的方式来实现的操作，显示设备能够根据键入数据的位置来定位焦点元素，并根据键入数据的位置，获取键盘键入的坐标。人手触摸操作是指在显示设备上通过人手触摸屏幕的方式来实现的操作，显示设备能够根据人手触摸的位置来定位焦点元素，并根据人手触摸的位置，检测触摸的位置的坐标。

S102：若检测到有焦点元素生成，则获取焦点元素在预设表单的中的具体坐标，并将坐标作为焦点元素的焦点位置信息。

具体地，根据步骤S101中获取到的在待编辑范围内检测到有焦点元素生成，可以理解为该焦点元素所在的区域当前处于待编辑的状态，因此可以获取焦点元素在预设表单的中的具体坐标，其中，获取焦点元素在预设表单的中的具体坐标具体可以是继续使用步骤S101中所使用的GetCursorPos函数实现对焦点元素的具体坐标的快速获取，或者是通过使用获取位置(getcursortposition)函数实现对焦点元素的具体坐标的快速获取，其中，getcursortposition函数是通过获取预设表单上的每个编辑框的坐标点或坐标区域范围，并检测焦点元素与获取到的坐标点或坐标区域范围之间的位移距离，然后，根据编辑框的坐标点或坐标区域范围，以及检测到的位移距离计算出焦点元素的坐标，并将坐标作为焦点元素的焦点位置信息。

例如，可以通过一具体实施例，假设在一个可编辑范围内，检测到鼠标的点击、键盘的键入或者人手触摸一待编辑的目标编辑框时，使得焦点元素H及其焦点位置信息的生成时，则在预设表单中的调用GetCursorPos函数，实现在可编辑范围中对焦点元素的坐标h的快速捕捉，则将坐标h作为该焦点元素的焦点位置信息。

例如，可以通过一具体实施例，当检测到焦点元素H及其焦点位置信息的生成时，则可以通过启用getcursortposition函数获取预设表单上的每个编辑框的坐标点或坐标区域范围，如获取到一编辑框的左上角的起点坐标点为(4.20,8.20)、右下角的终点坐标(6.20,2.20)、该编辑框的长度2.00和基础编辑框的宽度6.00，该编辑框的坐标区域范围是由(4.20,8.20)、(6.20,8.20)、(4.20,2.20)和(6.20,2.20)这四个坐标点围成的矩形框内包含的所有坐标点组成的，假设检测到焦点元素H与四个坐标点之间的位移距离均为2.00，则通过计算得到该焦点元素的坐标为(5.20,5.20)，即焦点位置信息为(5.20,5.20)。

在本实施例中，通过检测在可编辑范围内有焦点元素生成，然后对检测到的焦点元素进行预设表单的中的具体坐标获取，并将获取到的坐标作为焦点元素的焦点位置信息，能够实现对预设表单上的焦点元素的快速捕捉，以及对焦点元素的焦点位置信息的快速获取，有利于实现后续步骤对目标编辑框的快速锁定，从而提高网络页面的构建效率。

在一实施例中，如图4所示，在步骤S1之前，该页面编辑方法还包括如下步骤：

S5：获取页面构建的操作指令。

在本实施例中，获取到的页面构建操作指令是指获取到的用户输入的用于构建网络页面的操作指示，其中，该操作指令包括调用的预设表单的标识信息，该标识信息是用于唯一标识预设表单的，每个预设表单对应一个标识信息，其中，标识信息具体可以是编号、图形或字符标号等等，具体可以根据实际应用需求进行设置，此处不做限制。

具体地，通过网络传输协议快速获取用户发送地页面构建的操作指令，并获取该操作指令中的预设表单的标识信息，便于后续步骤对预设表单的快速调用，从而提高网络页面的构建效率。

S6：根据页面构建的操作指令，加载页面编辑的辅助程序插件。

具体地，根据步骤S5中获取到的页面构建的操作指令，为了加快对页面编辑数据的快速处理，提高对表格编辑的处理效率，从而提高网络页面的构建效率，本实施例通过使用页面编辑的辅助程序插件，在该插件中对页面数据进行处理，以能够提高关于表格编辑的处理效率，其中，页面编辑的辅助程序插件包括可编辑页面(bootstrap-table-editable)程序插件，bootstrap-table-editable程序插件是一个基于jQuery插件，能够为构建网络页面提供各种强大的前后端表格数据的处理功能，例如，页面开发时，实现表格的单选、多选、排序、分页，以及编辑、导出、过滤(扩展)等等的功能。

S7：在辅助程序插件中，创建预设表单，并对预设表单进行初始化处理。

具体地，根据在步骤S5中获取到的预设表单的标识信息，在步骤S6中启动的bootstrap-table-editable程序插件，快速从数据库中调取基础标识信息与步骤S5中获取到的预设表单的标识信息相同的所对应的预设表单，实现对预设表单的快速创建，然后，对获取的预设表单进行初始化处理，是为了保证该预设表单的数据干净，有助于提高对目标编辑框的编辑效率，从而提高网络页面的构建效率。

其中，在辅助程序插件中，创建预设表单，并对预设表单进行初始化处理的具体过程如下：

a).获取表单定义信息；

在本实施例中，不同的网络页面的构建所需的配置参数的可能不同，网络页面的所创建的预设表单中的基础编辑框的表单定义也可能不同，针对不同网络页面的构建需求，预先设置每个网络页面对应的预设表单中的表单结构中包含的参数名及参数名对应的具体参数数据，从而根据预设表单的表单结构的参数名能够快速从表格定义信息中获取该预设表单的表单结构所需配置的参数数据，能够将获取到的预设表单快速创建为网络页面所需的表单，从而提高网络页面的构建效率。

例如，在一具体实施例中进行说明，表单结构中参数名为表单的名字、表单的类型或表单中编辑框的长度、宽度等，参数名对应的具体参数数据，如“表单的名字”对应的具体参数为“table1(表1)”、“表单的类型”对应的具体参数为“data(数据)”或“表单中编辑框的长度”对应的具体参数为“3.16”等。

b).在bootstrap-table-editable程序插件中，按照预设的表单结构，将步骤a)获取到的预设的表单定义信息填入对应的表单结构中，得到预设表单。

在本实施例中，在bootstrap-table-editable程序插件中支持的表单结构包括使用html的data属性方式进行编辑，或者使用JaveScript脚本方式进行编辑，此处不做限制。

例如，在一具体实施例中进行说明，假设预设的表单结构包括表单的名字、表单的类型、表单中编辑框的名字和表单中编辑框的长度、宽度等，则网络页面的表单结构可以设置为：

$("").bootstrapTable({}){

columns:[{}]；

name:""；

var_height＝""；

var_weight＝""；

}

当获取到表单定义信息中“表单的名字”为“table1(表1)”、“表单的类型”为“data(数据)”、“表单中编辑框的名字”为“id_1”、“表单中编辑框的长度”为“3.16”和“表单中编辑框的宽度”为“2.16”时，将获取到的预设的表单定义信息填入对应的表单结构中，得到的预设表单为：

$("table1").bootstrapTable({}){

columns:[{data}]；

name:"id_1"；

var_height＝"3.16"；

var_weight＝"2.16"；

}

c).在bootstrap-table-editable程序插件中通过调用附加(append)方法来动态初始化步骤b)中得到的预设表单。

具体地，为了保证创建得到的预设表单中时干净整洁的数据状态，以提高对网络页面的构建效率，可以在bootstrap-table-editable程序插件中通过调用append方法来动态初始化预设表单，其中，append方法可以用来连接一系列固定长度的样例，使得表单中的各类数据更加紧凑，降低计算复杂度，从而提高对网络页面的构建效率。

需要说明的是，在表表单初始化的时候，对表单中基础编辑框都设定了唯一的一个id，作为每个基础编辑框的基础标识信息，其中，每个基础标识信息能够对应保存每个基础编辑框的基础区域信息，该区域信息包括每个基础编辑框的左上角的起点坐标点、基础编辑框的右下角的终点坐标、基础编辑框的长度和基础编辑框的宽度，便于对基础编辑框的基础区域信息的保存和管理。

在本实施例中，通过获取页面构建的操作指令，根据页面构建的操作指令，加载页面编辑的辅助程序插件，然后，在辅助程序插件中，创建预设表单，并对预设表单进行初始化处理，实现对预设表单的快速创建和处理，从而提高网络页面的构建效率。

在一实施例中，如图5所示，在步骤S2中，即确定焦点位置信息对应的编辑框，作为目标编辑框具体包括如下步骤：

S201：获取可编辑范围内的每个基础编辑框的基础区域信息。

具体地，由于可编辑范围内包括多个基础编辑框都有各自在预设表单的坐标系中的具体坐标或坐标区域范围，即每个基础编辑框的区域信息包括每个基础编辑框的左上角的起点坐标点、基础编辑框的右下角的终点坐标、基础编辑框的长度和基础编辑框的宽度，因此，能够根据基础编辑框的区域信息计算得到每个目标编辑框对应的坐标区域范围，实现对每个基础编辑框的坐标区域范围的快速获取，便于后续步骤对目标编辑框的快速锁定，从而提高网络页面的构建效率。

例如，在一具体实施例中进行说明，假设有一个基础编辑框的区域信息包括基础编辑框的左上角的起点坐标点为(2.00,3.00)、基础编辑框的右下角的终点坐标(7.16,6.14)、基础编辑框的长度5.16和基础编辑框的宽度3.14，能够计算得到基础编辑框的右上角的坐标为(7.16,3.00)和基础编辑框的左下角的坐标为(2.00,6.14)，则该基础编辑框的包含的坐标区域范围是(2.00,3.00)、(7.16,3.00)、(2.00,6.14)和(7.16,6.14)这四个坐标点围成的矩形框内包含的所有坐标点。

S202：根据焦点位置信息和每个基础区域信息，确定焦点元素所在的基础编辑框，并将确定的基础编辑框作为目标编辑框。

具体地，确定预设表单上的当前待编辑的目标编辑框具体可以是通过确认焦点元素所落入的基础编辑框，然后可以将该基础编辑框确定为目标编辑框，即将步骤S1中获取到的焦点位置信息中的焦点坐标，与步骤S201中得到的每个基础编辑框的区域信息包含的坐标区域范围进行比对，能够得到该焦点坐标属于的坐标区域范围，则能够将该坐标区域范围的基础区域信息对应的基础编辑框，作为目标编辑框。

在本实施例中，通过获取可编辑范围内的每个基础编辑框的基础区域信息，然后，根据焦点位置信息和每个基础区域信息，确定焦点元素所在的基础编辑框，并将确定的基础编辑框作为目标编辑框，能够实现对目标编辑框的快速准确锁定，提高对处于待编辑的目标编辑框的处理效率，从而提高网络页面的构建效率。

在一实施例中，如图6所示，步骤S4中，即当监测到焦点元素不处于目标编辑框时，将目标内容发送给服务端具体还包括如下步骤：

S401：监控焦点元素，若检测到焦点元素发生位置变化，则获取焦点元素的当前位置信息，作为目标位置信息。

具体地，在步骤S3获取到目标内容之后，可以理解为该目标内容可能为已完成编辑的内容，因此，为了进一步地确认该目标内容当前的编辑状态，如已编辑完成或未编辑完成，具体可以是启动通过使用页面编辑的辅助程序插件bootstrap-table-editable中的监听功能，实现对焦点位置信息的检测，若检测到焦点元素发生位置变化，则可以对检测到当前的焦点元素的当前的焦点位置信息进行获取，并将得到的当前的焦点元素的焦点坐标，作为目标位置信息。

例如，在一具体实施例中，假设通过在启用的bootstrap-table-editable插件中添加一个{editable-save.bs.table}事件监听器，能够监听预先设置的监听对象的操作，具体的监听对象如每个基础编辑框，进一步地，可以通过使用bootstrap-table-editable插件中的on方法调用off方法，是为了防止多次重复添加同一事件监听，具体可以是对{editable-save.bs.table}事件监听器，通过on方法调用off方法能够先删除已监听的对象，再添加待监听的新对象。

S402：将目标位置信息与目标编辑框的目标区域信息进行比对，若根据比对结果判断焦点元素不处于目标编辑框内，则确定目标编辑框完成编辑，并将目标内容发送给服务端。

具体地，为了快速确定当前的目标编辑框中的目标内容是否编辑完成，并将完成编辑的目标内容快速提交至服务端，具体可以是通过获取目标编辑框的目标区域信息中的坐标区域范围，然后，可以将在步骤S401中获取到的目标焦点位置信息中的目标焦点坐标与目标编辑框的目标区域信息中的坐标区域范围进行比对，若比对结果为目标焦点坐标不属于该目标区域信息中的坐标区域范围，则可以理解为该目标内容已完成编辑。

例如，在一具体实施例中进行说明，假设检测到的焦点元素W为一个鼠标点击的产生的光标，当该光标从一个输入框移出时，则可以表示当前输入框编辑完成，比如目标编辑框B完成标准内容输入该目标编辑框B并保存得到目标内容后，检测到在预设表单上重新生成的一焦点元素点击S属于目标编辑外的区域，这个操作可以理解为光标从目标编辑B移出。因为要使得光标从目标编辑框中移出，可以理解为需要在目标编辑框B外任意处进行点击，而这个点击事件会生成当前的焦点元素S，以及当前的焦点位置信息s，然后，目标焦点位置信息中的目标焦点坐标s与目标编辑框的目标区域信息中的坐标区域范围B进行比对，得到该当前的焦点位置信息s不属于目标编辑框B的区域信息内，则可以调用相应的传输函数将目标编辑框B对应的目标内容提交至后台服务端。

需要说明的是，将步骤S3中得到的目标内容发送给服务端，具体可以在预先设置的监听任务中通过调用阿贾克斯(Ajax)方法将目标内容实时提交并保存到后台服务端，其中，Ajax方法可以仅向服务端发送并取回必需的数据，能够在不重新加载整个网络页面的情况下，可以与服务端交换数据并更新部分网络页面中的内容，能够提高目标内容的处理效率，从而提高网络页面的构建效率。

在本实施例中，通过获取焦点元素的当前位置信息，作为目标位置信息，然后，将目标位置信息与目标编辑框的目标区域信息进行比对，若根据比对结果判断焦点元素不处于目标编辑框内，则确定目标编辑框完成编辑，并将目标内容发送给服务端，能够实现对目标内容的快速编辑，实现目标编辑框的编辑自动化，减少对目标内容处理的运算量，提高对目标编辑框编辑目标内容的效率，从而提高网络页面的构建效率。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

在一实施例中，提供一种页面编辑装置，该页面编辑装置与上述实施例中页面编辑方法一一对应。如图7所示，该页面编辑装置包括信息获取模块701、目标确定模块702、内容解析模块703和内容发送模块704。各功能模块详细说明如下：

信息获取模块701，用于若检测到焦点元素处于可编辑范围内，则获取焦点元素在构建网络页面的预设表单中的焦点位置信息；

目标确定模块702，用于确定焦点位置信息对应的编辑框，作为目标编辑框；

内容解析模块703，用于对接收到的用户输入的内容进行解析，并将解析得到的标准内容填入目标编辑框中，作为目标内容；

内容发送模块704，用于当监测到焦点元素不处于目标编辑框时，将目标内容发送给服务端。

进一步地，信息获取模块701包括：

元素检测单元7011，用于检测在可编辑范围内是否有焦点元素生成；

坐标获取单元7012，用于若检测到有焦点元素生成，则获取焦点元素在预设表单的中的具体坐标，并将坐标作为焦点元素的焦点位置信息。

进一步地，该页面编辑装置还包括：

指令获取模块705，用于获取页面构建的操作指令；

插件加载模块706，用于根据页面构建的操作指令，加载页面编辑的辅助程序插件；

表单初始模块707，用于在辅助程序插件中，创建预设表单，并对预设表单进行初始化处理。

进一步地，目标确定模块702包括：

区域获取单元7021，用于获取可编辑范围内的每个基础编辑框的基础区域信息；

基础确定单元7022，用于根据焦点位置信息和每个基础区域信息，确定焦点元素所在的基础编辑框，并将确定的基础编辑框作为目标编辑框。

进一步地，内容发送模块704包括：

位置获取单元7041，用于监控焦点元素，若检测到焦点元素发生位置变化，则获取焦点元素的当前位置信息，作为目标位置信息；

信息比对单元7042，用于将目标位置信息与目标编辑框的目标区域信息进行比对，若根据比对结果判断焦点元素不处于目标编辑框内，则确定目标编辑框完成编辑，并将目标内容发送给服务端。

关于页面编辑装置的具体限定可以参见上文中对于页面编辑方法的限定，在此不再赘述。上述页面编辑装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图8所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部服务器通过网络连接通信。该计算机程序被处理器执行时以实现一种页面编辑方法。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例页面编辑方法的步骤，例如图2所示的步骤S1至步骤S4。或者，处理器执行计算机程序时实现上述实施例中页面编辑装置的各模块/单元的功能，例如图7所示模块701至模块704的功能。为避免重复，这里不再赘述。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述方法实施例中页面编辑方法，或者，该计算机程序被处理器执行时实现上述装置实施例中页面编辑装置中各模块/单元的功能。为避免重复，这里不再赘述。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)、DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

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

Claims (10)

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

若检测到焦点元素处于可编辑范围内，则获取所述焦点元素在构建网络页面的预设表单中的焦点位置信息；

确定所述焦点位置信息对应的编辑框，作为目标编辑框；

对接收到的用户输入的内容进行解析，并将解析得到的标准内容填入所述目标编辑框中，作为目标内容；

当监测到所述焦点元素不处于所述目标编辑框时，将所述目标内容发送给服务端。

2.如权利要求1所述的页面编辑方法，其特征在于，所述若检测到焦点元素处于可编辑范围内，则获取所述焦点元素在构建网络页面的预设表单中的焦点位置信息包括：

检测在可编辑范围内是否有所述焦点元素生成；

若检测到有所述焦点元素生成，则获取所述焦点元素在所述预设表单的中的具体坐标，并将所述坐标作为所述焦点元素的焦点位置信息。

3.如权利要求1所述的页面编辑方法，其特征在于，在所述若检测到焦点元素处于可编辑范围内，则获取所述焦点元素在构建网络页面的预设表单中的焦点位置信息之前，所述页面编辑方法还包括：

获取页面构建的操作指令；

根据所述页面构建的操作指令，加载页面编辑的辅助程序插件；

在所述辅助程序插件中，创建所述预设表单，并对所述预设表单进行初始化处理。

4.如权利要求1所述的页面编辑方法，其特征在于，所述确定所述焦点位置信息对应的编辑框，作为目标编辑框包括：

获取所述可编辑范围内的每个基础编辑框的基础区域信息；

根据所述焦点位置信息和每个所述基础区域信息，确定所述焦点元素所在的所述基础编辑框，并将确定的所述基础编辑框作为目标编辑框。

5.如权利要求1所述的页面编辑方法，其特征在于，所述当监测到所述焦点元素不处于所述目标编辑框时，将所述目标内容发送给服务端包括：

监控所述焦点元素，若检测到所述焦点元素发生位置变化，则获取所述焦点元素的当前位置信息，作为目标位置信息；

将所述目标位置信息与所述目标编辑框的目标区域信息进行比对，若根据比对结果判断所述焦点元素不处于所述目标编辑框内，则确定所述目标编辑框完成编辑，并将所述目标内容发送给服务端。

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

信息获取模块，用于若检测到焦点元素处于可编辑范围内，则获取所述焦点元素在构建网络页面的预设表单中的焦点位置信息；

目标确定模块，用于确定所述焦点位置信息对应的编辑框，作为目标编辑框；

内容解析模块，用于对接收到的用户输入的内容进行解析，并将解析得到的标准内容填入所述目标编辑框中，作为目标内容；

内容发送模块，用于当监测到所述焦点元素不处于所述目标编辑框时，将所述目标内容发送给服务端。

7.如权利要求6所述的页面编辑装置，其特征在于，所述信息获取模块包括：

元素检测单元，用于检测在可编辑范围内是否有所述焦点元素生成；

坐标获取单元，用于若检测到有所述焦点元素生成，则获取所述焦点元素在所述预设表单的中的具体坐标，并将所述坐标作为所述焦点元素的焦点位置信息。

8.如权利要求6所述的页面编辑装置，其特征在于，所述页面编辑装置还包括：

指令获取模块，用于获取页面构建的操作指令；

插件加载模块，用于根据所述页面构建的操作指令，加载页面编辑的辅助程序插件；

表单初始模块，用于在所述辅助程序插件中，创建所述预设表单，并对所述预设表单进行初始化处理。

9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至5任一项所述页面编辑方法。

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