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

Abstract

本申请公开了一种页面编辑方法、装置、电子设备及存储介质，涉及页面编辑技术。本申请根据渲染得到的待编辑页面，获取待编辑元素，并获取待编辑元素的代码路径信息；根据代码路径信息获取元素代码，并显示元素代码；监听显示的元素代码的内容是否发生变化，当元素代码的内容发生变化时，获取编辑后的元素代码；根据代码路径信息，使用编辑后的元素代码替换初始的元素代码，形成编辑后的源代码，并使用编辑后的源代码重新渲染待编辑页面。本申请无需编辑者了解源代码，可以大大提高页面中元素的编辑效率。

Description

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

技术领域

本申请涉及页面编辑技术，特别是涉及一种页面编辑方法、装置、电子设备及存储介质。

背景技术

用户界面中的页面是使用代码实现的，一个页面通常使用数百上千行代码进行配置。在需要对页面中的某个元素进行编辑时，需要首先从页面的源代码中，找到配置该元素的元素代码。

现有技术中，通常由编辑者自行浏览页面的源代码，从中找到待编辑元素的元素代码。这就要求编辑者具有阅读源代码的能力，且当页面设计复杂，页面的源代码较多时，页面中元素的编辑过程效率很低。

发明内容

有鉴于此，本申请的主要目的在于提供一种页面编辑方法，该方法无需编辑者了解源代码，可以大大提高页面中元素的编辑效率。

为了达到上述目的，本申请提出的技术方案为：

第一方面，本申请实施例提供了一种页面编辑方法，包括以下步骤：

根据渲染得到的待编辑页面，获取待编辑元素，并获取所述待编辑元素的代码路径信息；

根据所述代码路径信息获取所述元素代码，并显示所述元素代码；

监听显示的所述元素代码的内容是否发生变化，当所述元素代码的内容发生变化时，获取编辑后的元素代码；

根据所述代码路径信息，使用所述编辑后的元素代码替换初始的所述元素代码，形成编辑后的源代码，并使用所述编辑后的源代码重新渲染所述待编辑页面。

一种可能的实施方式中，所述根据渲染得到的待编辑页面，获取待编辑元素的步骤之前，所述方法还包括：

遍历所述待编辑页面的源代码，确定所述待编辑页面中每个元素的所述元素代码的代码路径信息；

针对每个元素，将该元素的所述代码路径信息作为该元素的路径属性信息进行关联存储。

一种可能的实施方式中，所述获取待编辑元素的步骤包括：

获取光标位置；所述光标位置为光标在所述待编辑页面上所处的位置；

根据所述光标位置和所述待编辑元素在所述待编辑页面中的位置，获取所述待编辑元素。

一种可能的实施方式中，所述获取所述待编辑元素的代码路径信息的步骤，包括：

判断所述待编辑元素是否关联存储有所述路径属性信息；

当所述待编辑元素关联存储有所述路径属性信息获取时，获取所述待编辑元素的代码路径信息；

当所述待编辑元素未关联存储所述路径属性信息时，根据所述待编辑元素，确定关联存储有所述路径属性信息的元素，将所述存储有所述路径属性信息的元素的所述代码路径信息作为所述待编辑元素的所述代码路径信息。

一种可能的实施方式中，所述根据所述待编辑元素，确定关联存储有所述路径属性信息的元素的步骤，包括：

获取所述待编辑元素的父元素，判断所述父元素是否关联存储有所述路径属性信息；

当所述父元素关联存储有所述路径属性信息时，将所述父元素确定为关联存储有所述路径属性信息的元素；

当所述父元素未关联存储所述路径属性信息时，获取所述父元素的上一级父元素，直至获取到关联存储有所述路径属性信息的元素，或所述待编辑元素的每一级所述父元素均未关联存储路径属性信息为止。

一种可能的实施方式中，当所述待编辑元素的每一级所述父元素均未关联存储路径属性信息时，所述方法还包括：

返回提醒信息；所述提醒信息用于提示获取所述代码路径信息失败。

一种可能的实施方式中，所述获取待编辑元素的步骤之后，所述获取所述待编辑元素的代码路径信息的步骤之前，所述方法还包括：

在所述待编辑页面上对所述待编辑元素进行预定格式显示。

一种可能的实施方式中，所述获取待编辑元素的步骤之后，所述获取所述待编辑元素的代码路径信息的步骤之前，所述方法还包括：

在所述待编辑元素周围渲染可交互的组件元素，当获取到所述组件元素的点击事件时，根据所述组件元素的预设功能对所述待编辑元素的元素代码进行编辑。

一种可能的实施方式中，所述显示所述元素代码的步骤包括：

将所述元素代码与所述待编辑元素并列显示。

第二方面，本申请实施例还提供一种页面编辑装置，包括：

元素获取模块，用于根据渲染得到的待编辑页面，获取待编辑元素；

代码路径获取模块，用于获取所述待编辑元素的代码路径信息；所述代码路径信息用于表示所述待编辑元素的元素代码在所述待编辑页面的源代码中的位置；

代码管理模块，用于根据所述代码路径信息获取所述元素代码；还用于根据所述代码路径信息，使用所述编辑后的元素代码替换初始的所述元素代码，形成编辑后的源代码；

代码显示模块，用于显示所述元素代码；还用于监听显示的所述元素代码的内容是否发生变化，当所述元素代码的内容发生变化时，获取所述编辑后的元素代码；

页面渲染模块，用于渲染所述待编辑页面；还用于使用所述编辑后的源代码重新渲染所述待编辑页面。

一种可能的实施方式中，所述页面编辑装置，还包括属性设置模块，用于：

遍历所述待编辑页面的源代码，确定所述待编辑页面中每个元素的所述元素代码的代码路径信息；

针对每个元素，将该元素的所述代码路径信息作为该元素的路径属性信息进行关联存储。

一种可能的实施方式中，所述元素获取模块，还用于：

获取光标位置；所述光标位置为光标在所述待编辑页面上所处的位置；

根据所述光标位置和所述待编辑元素在所述待编辑页面中的位置，获取所述待编辑元素。

一种可能的实施方式中，所述代码路径获取模块，还包括：

判断单元，用于判断所述待编辑元素是否关联存储有所述路径属性信息；

路径获取单元，用于当所述待编辑元素关联存储有所述路径属性信息获取时，获取所述待编辑元素的代码路径信息；

元素确定单元，用于当所述待编辑元素未关联存储所述路径属性信息时，根据所述待编辑元素，确定关联存储有所述路径属性信息的元素；

路径获取单元，还用于将所述存储有所述路径属性信息的元素的所述代码路径信息作为所述待编辑元素的所述代码路径信息。

一种可能的实施方式中，所述元素确定单元，还用于：

获取所述待编辑元素的父元素，判断所述父元素是否关联存储有所述路径属性信息；

当所述父元素关联存储有所述路径属性信息时，将所述父元素确定为关联存储有所述路径属性信息的元素；

当所述父元素未关联存储所述路径属性信息时，获取所述父元素的上一级父元素，直至获取到关联存储有所述路径属性信息的元素，或所述待编辑元素的每一级所述父元素均未关联存储路径属性信息为止。

一种可能的实施方式中，所述元素确定单元，还用于：

返回提醒信息；所述提醒信息用于提示获取所述代码路径信息失败。

一种可能的实施方式中，所述代码显示模块，还用于：

在所述待编辑页面上对所述待编辑元素进行预定格式显示。

一种可能的实施方式中，所述代码显示模块，还用于：

在所述待编辑元素周围渲染可交互的组件元素，当获取到所述组件元素的点击事件时，根据所述组件元素的预设功能对所述待编辑元素的元素代码进行编辑。

一种可能的实施方式中，所述代码显示模块，还用于：

将所述元素代码与所述待编辑元素并列显示。

第三方面，本申请实施例还提供一种计算机可读存储介质。具体方案为：

一种计算机可读存储介质，存储有计算机指令，所述指令被处理器执行时可实现上述第一方面及第一方面中任一种可能的实施方式的步骤。

第四方面，本申请实施例还提供一种电子设备。具体方案为：

一种电子设备，该电子设备包括上述的计算机可读存储介质，还包括可执行所述计算机可读存储介质的处理器。

综上所述，本申请提出的一种页面编辑方法、装置、电子设备及存储介质。本申请直接从渲染得到的可视化的待编辑页面中，获取待编辑元素，即可通过待编辑元素的代码路径信息获取到元素代码，无需编辑者理解并阅读源代码，可自动将待编辑元素的元素代码显示给编辑者。进一步的，本申请在显示元素代码之后，监听显示的元素代码是否发生编辑，在发生编辑后，根据代码路径信息，自动使用编辑后的元素代码替换原有的元素代码，自动更新待编辑页面的源代码，并重新渲染待编辑页面，整个页面编辑过程实现了实时编辑、自动更新，大大提升了页面编辑的效率。

附图说明

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

图1为本申请实施例提供的一种页面编辑方法的流程示意图；

图2为本申请实施例提供的另一种页面编辑方法的流程示意图；

图3为一种网页页面架构的示例；

图4为一种待编辑页面中待编辑元素的预定格式显示示例；

图5为一种待编辑页面与元素代码的同时显示示例；

图6为本申请实施例提供的一种页面编辑装置的结构示意图；

图7为页面编辑装置中元素获取模块的结构示意图；

图8为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

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

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例，例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含。例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其他步骤或单元。

用户界面中的页面是使用代码实现的，一个页面通常使用数百上千行代码进行配置。例如，在网页前端开发领域，可以在浏览器中显示由JSON、JavaScript等语言生成的页面。在应用程序前端开发领域，可以在应用程序的用户界面中显示由C、C#或JAVA等语言生成的页面。假设在网页前端开发领域，使用JSON语言编写页面源代码，一个页面通常由数百上千行JSON源代码进行配置。如果想要编辑页面中的文档对象模型(Document ObjectModel，DOM)元素，需要从数百上千行源代码中查找到用于配置待编辑的DOM元素的元素代码。这个过程耗时很长，并且需要编辑者足够了解源代码，具备阅读源代码的能力，非常不方便。

有鉴于此，本申请的核心发明点在于：直接从渲染得到的可视化的待编辑页面中，获取待编辑元素，并通过待编辑元素的代码路径信息获取到元素代码，无需编辑者理解并阅读源代码，可自动将待编辑元素的元素代码显示给编辑者，实现待编辑元素的可视化编辑，使页面编辑过程更加直观、简洁。并且在元素代码发生编辑后，实时更新待编辑页面的源代码，并重新渲染待编辑页面，整个页面编辑过程实现了实时编辑、自动更新，大大提升了页面编辑的效率。

为使本申请的目的、技术方案和优点更加清楚，下面以具体实施例对本发明的技术方案进行详细说明。下面几个具体实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

实施例一

图1为本申请实施例提供的页面编辑方法的流程示意图，如图1所示，该实施例主要包括：

S101：根据渲染得到的待编辑页面，获取待编辑元素，并获取所述待编辑元素的代码路径信息。

本申请实施例首先根据待编辑页面的源代码渲染得到实际展示的待编辑页面，从而直观地根据实际展示的待编辑页面进行页面编辑。从实际展示的待编辑页面中获取待编辑元素，这里，待编辑元素为构成待编辑页面的任一种页面元素，通常为待页面中的文本、控件或组件等页面元素。在获取待编辑元素后，获取待编辑元素的代码路径信息，代码路径信息用于表示待编辑元素的元素代码在待编辑页面的源代码中的位置。待编辑元素的元素代码为源代码中配置该待编辑元素的部分，待编辑页面的源代码为配置待编辑页面的完整代码。

S102：根据所述代码路径信息获取所述元素代码，并显示所述元素代码。

根据代码路径信息，获取元素代码在源代码中的位置，从而从源代码获取待编辑元素的元素代码，并将待编辑元素的元素代码显示给编辑者。可以单独将元素代码显示给编辑者，优选的，为了提升展示效果，使页面编辑过程的更加直观，通常将元素代码和待编辑页面同时展示。

S103：监听显示的所述元素代码的内容是否发生变化，当所述元素代码的内容发生变化时，获取编辑后的元素代码。

为了实现实时编辑、自动更新，需要监听显示的元素代码的内容是否发生变化，如果发生了变化，证明元素代码经过了编辑，并在发生变化时，获取编辑后的元素代码。因此，在步骤S102中，元素代码以可编辑的形式显示，例如，可以以可编辑文本框或可编辑视窗的形式显示。

S104：根据所述代码路径信息，使用所述编辑后的元素代码替换初始的所述元素代码，形成编辑后的源代码，并使用所述编辑后的源代码重新渲染所述待编辑页面。

在编辑之后，要做到实时编辑、实时更新，需要根据代码路径信息，将编辑后的元素代码替换原有的元素代码，元素代码的替换就实现了待编辑元素的编辑过程。元素代码被替换后，会形成编辑后的源代码，编辑后的源代码对比原有的源代码，在待编辑元素的元素代码部分发生了变化。在形成编辑后的源代码后，可以使用编辑后的源代码重新渲染待编辑页面，重新渲染得到的待编辑页面为经过了编辑后实际展示的待编辑页面，从而可以直观地使修改者了解到待编辑页面和待编辑元素的编辑效果。基于此，本申请实施例实现了面编辑过程的实时编辑、自动更新，大大提升了页面编辑的效率。

实施例二

如图2所示，本申请实施例还提供了另一种页面编辑方法，包括：

S201：遍历所述待编辑页面的源代码，确定所述待编辑页面中每个元素的所述元素代码的代码路径信息。

为了获取待编辑元素的元素代码，需要获取待编辑元素的代码路径信息，而在待编辑元素的代码路径信息之前，首先需要确定待编辑元素的代码路径信息。

确定待编辑元素的代码路径信息可以在使用待编辑页面的源代码渲染待编辑页面时进行，也可以在使用待编辑页面的源代码渲染待编辑页面之前进行。在使用待编辑页面的源代码渲染待编辑页面时、或者在使用待编辑页面的源代码渲染待编辑页面之前，遍历待编辑页面的源代码，分别确定每个待编辑元素的代码路径信息。确定每个待编辑元素的代码路径信息的过程，根据每种编程语言的语法有所不同。

以网页的前端设计为例，假设使用JSON语言编写页面源代码，待编辑页面中为网页页面，网页页面中的每个页面元素为DOM元素。根据JSON语言的语法，每个DOM元素以树状结构构成网页页面。在JSON语言的树状结构中，根节点为elementConfig，每个DOM元素都为根节点elementConfig的某一层级某一个的子节点。例如，假设一个网页页面的树状结构的节点如图3所示，图3示出了该网页页面的每个页面元素，及其节点层级。图3中网页页面的标题为根节点的第一个子节点，此时，标题元素的代码路径信息为elementConfig.children[0]，elementConfig.children[0]代表了根节点的第一个子层级的第一个子节点。再例如，假设网页页面中的搜索按钮为根节点的第五个子节点的第二个子节点的第一个子节点，因此，该搜索按钮的代码路径信息表示出该搜索按钮在树状结构中的位置，该搜索按钮的代码路径信息为elementConfig.children[4].children[1].children[0]。

无论何种技术实现的何种页面，页面管理方式通常都是以树状结构为数据结构的，但是有些程序语言的语法不是以明确的树状结构的节点作为管理页面元素的工具的，因此无法以树状结构的节点作为代码路径信息，此时，可以以元素代码的起止位置、元素代码的标题、元素代码的起止注释信息等作为待编辑元素的代码路径信息。

S202：针对每个元素，将该元素的所述代码路径信息作为该元素的路径属性信息进行关联存储。

为了在获取待编辑元素时，可以获取到待编辑元素的代码路径信息，需要对待编辑元素和待编辑元素的代码路径信息进行关联存储，从而可以方便地获取到待编辑元素的代码路径信息。对于页面元素而言，可以采用读取页面元素的属性的方式方便地获取页面元素的关联信息，因此，将每个元素的代码路径信息存储为该元素的路径属性信息，可以做到对待编辑元素和待编辑元素的代码路径信息进行关联存储，从而方便地获取到待编辑元素的代码路径信息。以网页的前端设计为例，如图3实例中的网页页面架构中，将标题元素的代码路径信息作为标题元素的路径属性信息的存储，因此，该标题元素的路径属性信息为elementConfig.children[0]。

S203：渲染待编辑页面。

根据每种编程语言及每种页面的编程方法，渲染出实际展示给用户的待编辑页面。

并且为了更加直观地显示编辑过程，使页面编辑过程更加直观、简洁，通常将待编辑页面和获取的元素代码同时显示，因此，通常设计实现一个编辑界面，将待编辑页面作为编辑界面的一部分显示在编辑界面上的页面容器中。以网页的前端设计为例，假设使用JSON语言编写页面源代码，待编辑页面中为网页页面，网页页面中的每个页面元素为DOM元素时，可以在网页编辑器中，使用iframe框架渲染并显示待编辑页面。

S204：获取待编辑元素。

目前的计算机操作中，光标操作是最便捷的操作方式，这里的光标操作是指屏幕上的光标的操作，对应到编辑者端，可以用鼠标、触摸屏、触摸板、轨迹球等硬件设施实现光标操作。

具体的可以通过下述步骤1和步骤2获取待编辑元素。

步骤1、获取光标位置；所述光标位置为光标在所述待编辑页面上所处的位置。

步骤2、根据所述光标位置和所述待编辑元素在所述待编辑页面中的位置，获取所述待编辑元素。

根据光标在待编辑页面上的位置来获取待编辑页面上的待编辑元素，更符合操作习惯，通过实时获取光标位置，并根据光标位置和待编辑元素在待编辑页面中的位置，可以获取待编辑元素，这样可以使获取待编辑元素的操作更顺滑。在另一种可能的实施方式中，可以不用实时获取光标位置，而是根据光标的点击事件来获取待编辑元素。获取发生光标点击事件时，光标所处的光标位置，根据光标位置和待编辑元素在待编辑页面中的位置，获取待编辑元素。在根据光标的点击事件来获取待编辑元素时，还可以直接获取光标点击事件针对的页面元素，将光标点击事件针对的页面元素作为待编辑元素。在实际实施时，为了获取光标位置或光标点击事件，可以在待编辑页面上覆盖一层透明的蒙版，通过蒙版方便地获取上述光标位置或光标点击事件。

S205：在待编辑页面上对待编辑元素进行预定格式显示。

为了让编辑者可以确定选定的待编辑元素是否为其打算进行编辑的目标元素，在待编辑页面上对待编辑元素进行预定格式显示。

在一种可能的实施方式中，可以在待编辑页面上渲染一个边框将待编辑元素框出，对待编辑页面上的待编辑元素进行预定格式显示。当然的，还可以采用放大、缩小、底色、底纹等常用的方式对待编辑元素作为预设格式对待编辑元素进行显示。

为了方便编辑过程，对于常用的可快捷化操作的编辑操作可以在待编辑元素周围渲染可交互的组件元素。例如，对于剪切、复制、粘贴、删除等编辑操作，可以在待编辑元素周围渲染渲染剪切按钮、复制按钮、粘贴按钮和删除按钮等。这里，待编辑元素的周围为用户界面上与待编辑元素相隔预设距离范围内、环绕待编辑元素的区域。

在获取到组件元素的点击事件时，根据所述组件元素的预设功能对所述待编辑元素的元素代码进行编辑。例如，当获取到删除按钮的点击事件时，将待编辑元素的元素代码删除。

示例性的，一个以边框为预定格式显示方式，且带有复制按钮和删除按钮等可交互的组件元素的待编辑元素，及待编辑元素所处的待编辑页面，如图4所示。

S206：获取所述待编辑元素的代码路径信息。

在步骤S202中，元素的代码路径信息作为该元素的路径属性信息进行了关联存储。因此，在获取待编辑元素后，获取待编辑元素的路径属性信息作为代码路径信息。示例性的，如图3实例中的网页页面架构中，获取标题元素的路径属性信息作为标题元素的代码路径信息，因此，该标题元素的代码路径信息为elementConfig.children[0]。

为了避免获取代码路径信息过程中、或者获取到的代码路径信息出现故障和异常，在获取待编辑元素的代码路径信息时需要进行一系列判断。

首先，需要根据获取到的待编辑元素的代码路径信息，判断该待编辑元素是否为可编辑的页面元素。例如，如图3实例中的网页页面架构中，根据待编辑元素的代码路径信息，判断该待编辑元素是否为该待编辑页面的根节点，根节点不是可编辑的页面元素，因此如果待编辑元素的代码路径信息为根节点的代码路径信息，也就是说，待编辑元素的代码路径信息为elementConfig，则代表获取的待编辑元素的代码路径信息发生异常，此时退出页面编辑方法，或结束本次页面编辑过程，并向编辑者发送获取的代码路径信息异常的提醒信息。

其次，需要在获取所述待编辑元素的代码路径信息时，判断待编辑元素是否关联存储有路径属性信息。如果待编辑元素没有关联存储有路径属性信息，就无法正常获取待编辑元素的代码路径信息。

无论何种技术实现的何种页面，页面管理方式通常都是以树状结构为数据结构的，因此，可以采用下述步骤A至步骤C获取待编辑元素的代码路径信息：

步骤A、判断所述待编辑元素是否关联存储有所述路径属性信息。

首先判断待编辑元素是否关联存储有路径属性信息，在待编辑元素关联存储有路径属性信息时，读取待编辑元素的路径属性信息作为待编辑元素的代码路径信息，避免待编辑元素未关联存储路径属性信息时，读取待编辑元素的路径属性信息发生错误。

具体例如，如图3实例中的网页页面架构中，假设网页页面中的搜索按钮为根节点的第五个子节点的第二个子节点的第一个子节点，在该搜索按钮为待编辑元素且该搜索按钮关联存储有路径属性信息时例如，路径属性信息为elementConfig.children[4].children[1].children[0]。则读取该搜索按钮的路径属性信息作为该搜索按钮的代码路径信息。

步骤B、当所述待编辑元素关联存储有所述路径属性信息获取时，获取所述待编辑元素的代码路径信息。

步骤C、当所述待编辑元素未关联存储所述路径属性信息时，根据所述待编辑元素，确定关联存储有所述路径属性信息的元素，将所述存储有所述路径属性信息的元素的所述代码路径信息作为所述待编辑元素的所述代码路径信息。

根据所述待编辑元素，确定关联存储有所述路径属性信息的元素，主要包括逐级检查待编辑元素的父元素，判断父元素中是否关联存储有路径属性信息。具体的，根据所述待编辑元素，确定关联存储有所述路径属性信息的元素的步骤包括：

步骤I、获取所述待编辑元素的父元素，判断所述父元素是否关联存储有所述路径属性信息。

当待编辑元素未关联存储路径属性信息时，检查待编辑元素的父元素，判断父元素是否关联存储有所述路径属性信息。具体例如，如图3实例中的网页页面架构中，假设网页页面中的重置按钮为根节点的第五个子节点的第二个子节点的第二个子节点，如果重置按钮为待编辑元素且重置按钮未关联存储所述路径属性信息时，获取重置按钮的父元素，重置按钮的父元素为根节点的第五个子节点的第二个子节点，如图3所示，重置按钮的父元素为第一容器元素，之后判断该第一容器元素是否关联存储有路径属性信息。

在获取待编辑元素的父元素之后，判断父元素是否关联存储有路径属性信息之前，还可以判断待编辑元素的父元素是否为待编辑页面的根节点，如果待编辑元素的父元素为根节点，则退出页面编辑方法，或结束本次页面编辑过程，并向编辑者发送获取的代码路径信息异常的提醒信息。

步骤II、当所述父元素关联存储有所述路径属性信息时，将所述父元素确定为关联存储有所述路径属性信息的元素。

具体例如，如图3实例中的网页页面架构中，当该第一容器元素关联存储有路径属性信息时，例如该第一容器元素的路径属性信息为elementConfig.children[4].children[1]时，将该第一容器元素的路径属性信息作为重置按钮的代码路径信息，因此，重置按钮的代码路径信息为elementConfig.children[4].children[1]。

步骤III、当所述父元素未关联存储所述路径属性信息时，获取所述父元素的上一级父元素，直至获取到关联存储有所述路径属性信息的元素，或所述待编辑元素的每一级所述父元素均未关联存储路径属性信息为止。

当父元素未关联存储路径属性信息时，再获取父元素的上一级父元素。具体例如，如图3实例中的网页页面架构中，重置按钮为待编辑元素时，当果重置按钮的父元素第一容器元素未关联存储路径属性信息时，继续获取第一容器元素的上一级父元素，第二容器元素，判断第二容器元素是否存储有路径属性信息。如果该第二容器元素关联存储有路径属性信息时，例如该第二容器元素的路径属性信息为elementConfig.children[4]时，将该第二容器元素的路径属性信息作为重置按钮的代码路径信息，因此，重置按钮的代码路径信息为elementConfig.children[4]。如果该第二容器元素未关联存储路径属性信息，继续获取该第二容器元素的上一级父元素，该第二容器元素的上一级父元素为根节点，根节点不是可编辑的页面元素，至此可以判定，重置按钮的每一级父元素均未关联存储路径属性信息。

当所述待编辑元素的每一级所述父元素均未关联存储路径属性信息时，返回提醒信息；所述提醒信息用于提示获取所述代码路径信息失败。

具体例如，如图3实例中的网页页面架构中，如果判定重置按钮的每一级父元素均未关联存储路径属性信息，向编辑者发送提示获取代码路径信息失败的提醒信息。并且可以退出页面编辑方法，或结束本次页面编辑过程。

如果页面管理方式以树状结构为数据结构的，即便实现待编辑页面的程序语言的语法不以明确的树状结构的节点作为管理页面元素的工具时，也可以采用上述步骤A至步骤C，在待编辑元素没有关联存储有路径属性信息时，采用待编辑元素的父元素的路径属性信息作为待编辑元素的代码路径信息。只是此时的路径属性信息和代码路径信息不是如图3所示的节点，而是元素代码的起止位置、元素代码的标题或元素代码的起止注释信息等。

S207：根据代码路径信息获取元素代码。

以网页的前端设计为例，如图3实例中的网页页面架构中，根据待编辑元素的代码路径信息，假设待编辑元素为标题元素时，根据标题元素的路径属性信息为elementConfig.children[0]，可直接获取标题元素的节点对应的元素代码。

当待编辑元素的代码路径信息为元素代码的起止位置、元素代码的标题或元素代码的起止注释信息等时，也可直接根据元素代码的起止位置、元素代码的标题或元素代码的起止注释信息等获取元素代码。

S208：显示元素代码。

为了更加直观地显示编辑过程，使页面编辑过程更加直观、简洁，通常将待编辑页面和获取的元素代码同时显示，优选的，将所述元素代码与所述待编辑元素并列显示。如图5所示，为一种示例性的元素代码显示方式。图5中，元素代码显示在待编辑页面的右侧，当然的，元素代码还可以显示在其他位置，例如，将元素代码显示在待编辑页面的上方、下方、左侧等。元素代码的显示区域为可编辑的显示区域，从而方便编辑者直接在元素代码的显示区域对元素代码进行修改等编辑。

S209：监听显示的所述元素代码的内容是否发生变化，当所述元素代码的内容发生变化时，获取编辑后的元素代码。

在监听显示的元素代码的内容是否发生变化时，可以无需监听元素代码的内容的每一次细微改动，例如，无需在元素代码中每一个字符的修改时，均获取修改后的元素代码。仅需在元素代码发生有效编辑时，获取编辑后的元素代码。具体实施时，可以当元素代码完成有效修改，并触发保存操作或更新操作时，才获取编辑后的元素代码。

S210：根据所述代码路径信息，形成编辑后的源代码，并使用所述编辑后的源代码重新渲染所述待编辑页面。

编辑后的元素代码需要准确的更新原来的元素代码，因此，需要根据代码路径信息，使用编辑后的元素代码替换原有的元素代码，形成编辑后的源代码。

以网页的前端设计为例，如图3实例中的网页页面架构中，假设待编辑元素为标题元素时，例如更改了标题元素的标题文本时，根据标题元素的路径属性信息为elementConfig.children[0]，将更改了标题文本的编辑后的元素代码，替换标题元素的节点原有的元素代码，从而形成编辑后的源代码。编辑后的源代码与原有的源代码的不同之处在于，编辑后的源代码中标题元素的元素代码的标题文本发生了改变。

为了可视化的显示编辑结果，直观地将编辑结果提供给编辑者，实时使用编辑后的源代码重新渲染待编辑页面。

例如更改了标题元素的标题文本时，重新渲染的待编辑页面的标题文本会发生改变，从而方便编辑者直观地检查编辑结果是否符合预期。

基于相同的设计构思，本申请实施例还提供了一种页面编辑装置、电子设备及存储介质。

实施例三

如图6所示，本申请实施例提供的一种页面编辑装置600，包括：

元素获取模块601，用于根据渲染得到的待编辑页面，获取待编辑元素；

代码路径获取模块602，用于获取所述待编辑元素的代码路径信息；

代码管理模块603，用于根据所述代码路径信息获取所述元素代码；还用于根据所述代码路径信息，使用所述编辑后的元素代码替换初始的所述元素代码，形成编辑后的源代码；

代码显示模块604，用于显示所述元素代码；还用于监听显示的所述元素代码的内容是否发生变化，当所述元素代码的内容发生变化时，获取所述编辑后的元素代码；

页面渲染模块605，用于渲染所述待编辑页面；还用于使用所述编辑后的源代码重新渲染所述待编辑页面。

一种可能的实施方式中，所述页面编辑装置，还包括属性设置模块606，用于：

遍历所述待编辑页面的源代码，确定所述待编辑页面中每个元素的所述元素代码的代码路径信息；

针对每个元素，将该元素的所述代码路径信息作为该元素的路径属性信息进行关联存储。

一种可能的实施方式中，所述元素获取模块601，还用于：

获取光标位置；所述光标位置为光标在所述待编辑页面上所处的位置；

根据所述光标位置和所述待编辑元素在所述待编辑页面中的位置，获取所述待编辑元素。

一种可能的实施方式中，如图7所示，所述代码路径获取模块602，还包括：

判断单元701，用于判断所述待编辑元素是否关联存储有所述路径属性信息；

路径获取单元702，用于当所述待编辑元素关联存储有所述路径属性信息获取时，获取所述待编辑元素的代码路径信息；

元素确定单元703，用于当所述待编辑元素未关联存储所述路径属性信息时，根据所述待编辑元素，确定关联存储有所述路径属性信息的元素；

路径获取单元702，还用于将所述存储有所述路径属性信息的元素的所述代码路径信息作为所述待编辑元素的所述代码路径信息。

一种可能的实施方式中，所述元素确定单元703，还用于：

获取所述待编辑元素的父元素，判断所述父元素是否关联存储有所述路径属性信息；

当所述父元素关联存储有所述路径属性信息时，将所述父元素确定为关联存储有所述路径属性信息的元素；

当所述父元素未关联存储所述路径属性信息时，获取所述父元素的上一级父元素，直至获取到关联存储有所述路径属性信息的元素，或所述待编辑元素的每一级所述父元素均未关联存储路径属性信息为止。

一种可能的实施方式中，所述元素确定单元703，还用于：

返回提醒信息；所述提醒信息用于提示获取所述代码路径信息失败。

在代码路径获取模块602中，判断单元701用于判断待编辑元素是否关联存储有路径属性信息。判断单元701连接路径获取单元702和元素确定单元703，路径获取单元702和元素确定单元703根据判断单元701的判定结果，确定待编辑元素的代码路径信息。

一种可能的实施方式中，所述代码显示模块604，还用于：

在所述待编辑页面上对所述待编辑元素进行预定格式显示。

一种可能的实施方式中，所述代码显示模块604，还用于：

在所述待编辑元素周围渲染可交互的组件元素，当获取到所述组件元素的点击事件时，根据所述组件元素的预设功能对所述待编辑元素的元素代码进行编辑。

一种可能的实施方式中，所述代码显示模块604，还用于：

将所述元素代码与所述待编辑元素并列显示。

在页面编辑装置600中，元素获取模块601连接代码路径获取模块602，元素获取模块601获取待编辑元素，将待编辑元素发送给代码路径获取模块602。代码路径获取模块602连接代码管理模块603，将获取的待编辑元素的代码路径信息发送给代码管理模块603。代码管理模块603根据代码路径信息获取元素代码，并形成编辑后的源代码。代码管理模块603与代码显示模块604连接，将元素代码和编辑后的源代码发送给代码显示模块604，代码显示模块604用于显示元素代码和编辑后的源代码。页面渲染模块605与代码管理模块603连接，获取编辑后的源代码，并根据编辑后的源代码将重新渲染待编辑页面。

一种可能的实施方式中，当页面编辑装置600中包括属性设置模块606时，属性设置模块606与元素获取模块601连接，用于确定代码路径信息，并将代码路径信息作为路径属性信息进行关联存储。

本申请实施例提供的页面编辑装置无需编辑者了解源代码，可以大大提高页面中元素的编辑效率。

实施例四

一种计算机可读介质，所述计算机可读存储介质存储指令，所述指令在由处理器执行时使得所述处理器执行本申请实施例提供的任一种页面编辑方法的步骤。实际应用中，所述的计算机可读介质可以是上述实施例中描述的设备/装置/系统中所包含的，也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或多个程序被执行时，实现根据参考本申请实施例提供的任一种页面编辑装置进行本申请实施例提供的任一种页面编辑方法的步骤。

根据本申请公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件，或者上述的任意合适的组合，但不用于限制本申请保护的范围。在本申请公开的实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

本申请所述的方法步骤除了可以用数据处理程序来实现，还可以由硬件来实现，例如，可以由逻辑门、开关、专用集成电路(ASIC)、可编程逻辑控制器和嵌微控制器等来实现。因此这种可以实现本申请所述方法的硬件也可以构成本申请。

实施例五

本申请实施例还提供一种电子设备，可以是计算机或服务器，其中可以集成本申请实施例提供的任一种页面编辑装置。如图8所示，其示出了本申请实施例涉及的电子设备800。

该电子设备可以包括一个或者一个以上处理核心的处理器801、一个或一个以上计算机可读存储介质802。该电子设备还可以包括电源803、输入输出单元804。本领域技术人员可以理解，图8中并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

其中：

处理器801是该电子设备的控制部分，利用各种接口和线路连接各个部分，通过运行或执行存储在计算机可读存储介质802中的软件程序，执行本申请实施例提供的任一种页面编辑方法的步骤。

计算机可读存储介质802可用于存储软件程序，即本申请实施例提供的任一种页面编辑方法中涉及的程序。

处理器801通过运行存储在计算机可读存储介质802的软件程序，从而执行各种功能应用以及数据处理。计算机可读存储介质802可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据电子设备需要使用的数据等。此外，计算机可读存储介质802可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，计算机可读存储介质802还可以包括存储器控制器，以提供处理器801对计算机可读存储介质802的访问。

电子设备还包括给各个部件供电的电源803，优选的，电源803可以通过电源管理系统与处理器801逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源803还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

该服务器还可包括输入输出单元804，比如可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、光标、操作杆、光学或者轨迹球信号输入；比如可用于显示由用户输入的信息或提供给用户的信息以及服务器的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。

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

本领域技术人员可以理解，本申请的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本申请中。特别地，在不脱离本申请精神和教导的情况下，本申请的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，所有这些组合和/或结合均落入本申请公开的范围。

本申请中应用了具体实施例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思路，并不用于限制本申请。对于本领域的技术人员来说，可以依据本申请的思路、精神和原则，在具体实施方式及应用范围上进行改变，其所做的任何编辑、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (10)

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

根据渲染得到的待编辑页面，获取待编辑元素，并获取所述待编辑元素的代码路径信息；

根据所述代码路径信息获取所述元素代码，并显示所述元素代码；

监听显示的所述元素代码的内容是否发生变化，当所述元素代码的内容发生变化时，获取编辑后的元素代码；

根据所述代码路径信息，使用所述编辑后的元素代码替换初始的所述元素代码，形成编辑后的源代码，并使用所述编辑后的源代码重新渲染所述待编辑页面。

2.根据权利要求1所述的方法，其特征在于，所述根据渲染得到的待编辑页面，获取待编辑元素的步骤之前，所述方法还包括：

遍历所述待编辑页面的源代码，确定所述待编辑页面中每个元素的所述元素代码的代码路径信息；

针对每个元素，将该元素的所述代码路径信息作为该元素的路径属性信息进行关联存储。

3.根据权利要求1所述的方法，其特征在于，所述获取待编辑元素的步骤包括：

获取光标位置；所述光标位置为光标在所述待编辑页面上所处的位置；

根据所述光标位置和所述待编辑元素在所述待编辑页面中的位置，获取所述待编辑元素。

4.根据权利要求2所述的方法，其特征在于，所述获取所述待编辑元素的代码路径信息的步骤，包括：

判断所述待编辑元素是否关联存储有所述路径属性信息；

当所述待编辑元素关联存储有所述路径属性信息获取时，获取所述待编辑元素的代码路径信息；

当所述待编辑元素未关联存储所述路径属性信息时，根据所述待编辑元素，确定关联存储有所述路径属性信息的元素，将所述存储有所述路径属性信息的元素的所述代码路径信息作为所述待编辑元素的所述代码路径信息。

5.根据权利要求4所述的方法，其特征在于，所述根据所述待编辑元素，确定关联存储有所述路径属性信息的元素的步骤，包括：

获取所述待编辑元素的父元素，判断所述父元素是否关联存储有所述路径属性信息；

当所述父元素关联存储有所述路径属性信息时，将所述父元素确定为关联存储有所述路径属性信息的元素；

当所述父元素未关联存储所述路径属性信息时，获取所述父元素的上一级父元素，直至获取到关联存储有所述路径属性信息的元素，或所述待编辑元素的每一级所述父元素均未关联存储路径属性信息为止。

6.根据权利要求5所述的方法，其特征在于，当所述待编辑元素的每一级所述父元素均未关联存储路径属性信息时，所述方法还包括：

返回提醒信息；所述提醒信息用于提示获取所述代码路径信息失败。

7.根据权利要求1所述的方法，其特征在于，所述获取待编辑元素的步骤之后，所述获取所述待编辑元素的代码路径信息的步骤之前，所述方法还包括：

在所述待编辑页面上对所述待编辑元素进行预定格式显示。

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

元素获取模块，用于根据渲染得到的待编辑页面，获取待编辑元素；

代码路径获取模块，用于获取所述待编辑元素的代码路径信息；

代码管理模块，用于根据所述代码路径信息获取所述元素代码；还用于根据所述代码路径信息，使用所述编辑后的元素代码替换初始的所述元素代码，形成编辑后的源代码；

代码显示模块，用于显示所述元素代码；还用于监听显示的所述元素代码的内容是否发生变化，当所述元素代码的内容发生变化时，获取所述编辑后的元素代码；

页面渲染模块，用于渲染所述待编辑页面；还用于使用所述编辑后的源代码重新渲染所述待编辑页面。

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

10.一种电子设备，其特征在于，该电子设备包括如权利要求9所述的计算机可读存储介质，还包括可执行所述计算机可读存储介质的处理器。

Images