一种页面编辑方法、装置、存储介质和电子设备制造方法及图纸

本公开实施例公开了一种页面编辑方法、装置、存储介质和电子设备，该页面编辑方法包括：在页面效果展示区中还没有添加任何组件的情况下，响应于检测到组件列表区中的目标组件被拖拽至页面效果展示区，将该目标组件添加在当前编辑的页面中并在页面效果展示区渲染出该目标组件；和/或在页面效果展示区中已有至少一个第一组件的情况下，响应于检测到组件列表区中的目标组件被拖拽至页面效果展示区中的一个组件上，将该目标组件嵌套在该组件中并在页面效果展示区渲染出该目标组件，或者响应于检测到组件列表区中的目标组件被拖拽至页面效果展示区中的空白区域上，将该目标组件添加在当前编辑的页面中并在页面效果展示区渲染出该目标组件。出该目标组件。出该目标组件。

【技术实现步骤摘要】
一种页面编辑方法、装置、存储介质和电子设备


[0001]本专利技术涉及网页设计
，具体涉及一种页面编辑方法、装置、存储介质、电子设备和计算机程序产品。

技术介绍

[0002]现有的页面编辑界面过于单一，且页面编辑界面中往往包括专门为技术人员所设计的页面DOM树结构展示区域，以便于技术人员在页面DOM树结构展示区域执行相应的组件操作，例如，组件A的添加操作，或者是将组件B嵌套至组件C中的操作。
[0003]实际应用场景中，若面对的用户人群是非技术人员，由于非技术人员并不熟悉或者弄不清楚树状图上各个DOM节点与页面效果展示区之间的对应关系，就无法直接使用针对技术人员所开发的上述页面编辑界面进行相应的组件嵌套操作或者组件添加操作。由于页面编辑界面并不友好，从而无法得到非技术人员的用户想要的网络页面编辑效果。

技术实现思路

[0004]基于此，有必要针对基于现有的页面编辑界面并不友好，非技术人员无法在页面编辑界面上直接进行组件嵌套操作或组件添加操作的问题，提供一种页面编辑方法、装置、存储介质、电子设备和计算机程序产品。
[0005]第一方面，本公开实施例提供了一种页面编辑方法，包括：
[0006]在页面效果展示区中还没有添加任何组件的情况下，响应于检测到组件列表区中的目标组件被拖拽至所述页面效果展示区，将该目标组件添加在当前编辑的页面中并在所述页面效果展示区渲染出该目标组件；和/或
[0007]在所述页面效果展示区中已有至少一个第一组件的情况下，响应于检测到组件列表区中的目标组件被拖拽至所述页面效果展示区中的一个组件上，将该目标组件嵌套在该组件中并在所述页面效果展示区渲染出该目标组件，或者响应于检测到组件列表区中的目标组件被拖拽至所述页面效果展示区中的空白区域上，将该目标组件添加在当前编辑的页面中并在所述页面效果展示区渲染出该目标组件。
[0008]在一种实施方式中，根据被拖拽至所述页面效果展示区中的目标组件是否触发了对应组件绑定的鼠标离开事件，确定该目标组件是被拖拽至所述页面效果展示区中的一个组件上还是空白区域上。
[0009]在一种实施方式中，还包括：针对当前编辑界面中的至少一个第二组件，
[0010]响应于所述至少一个第二组件中的一个组件被拖拽至所述至少一个第二组件中的另一个组件上且被拖拽组件在横轴方向上的移动距离小于或等于设定阈值，将被拖拽组件从原位置调整到该另一个组件之后的位置上，并重新渲染所述页面效果展示区。
[0011]在一种实施方式中，还包括：针对当前编辑界面中的至少一个第二组件，
[0012]响应于所述至少一个第二组件中的一个组件被拖拽至所述至少一个第二组件中的另一个组件上且被拖拽组件在横轴方向上的移动距离大于设定阈值，将被拖拽组件嵌套
在该另一个组件上，并重新渲染所述页面效果展示区。
[0013]在一种实施方式中，还包括：针对当前编辑界面中的至少一个第二组件，
[0014]响应于所述至少一个第二组件中的一个组件被触发，展示与该组件关联的组件复制控件和/或组件删除控件，其中，
[0015]通过触发所述组件复制控件可在当前编辑界面中实现对该组件的复制；
[0016]通过触发所述组件删除控件可在当前编辑界面中实现对该组件及其嵌套的子组件的删除。
[0017]在一种实施方式中，展示与该组件关联的组件复制控件和/或组件删除控件，包括以下至少之一：
[0018]在所述页面效果展示区中该组件所在位置的周边展示与该组件关联的组件复制控件和/或组件删除控件；
[0019]在页面设置区中与该组件对应的位置展示与该组件关联的组件复制控件和/或组件删除控件。
[0020]第二方面，本公开实施例提供了一种页面编辑装置，包括：
[0021]第一渲染单元，用于在页面效果展示区中还没有添加任何组件的情况下，响应于检测到组件列表区中的目标组件被拖拽至所述页面效果展示区，将该目标组件添加在当前编辑的页面中并在所述页面效果展示区渲染出该目标组件；和/或
[0022]第二渲染单元，用于在所述页面效果展示区中已有至少一个第一组件的情况下，响应于检测到组件列表区中的目标组件被拖拽至所述页面效果展示区中的一个组件上，将该目标组件嵌套在该组件中并在所述页面效果展示区渲染出该目标组件，或者响应于检测到组件列表区中的目标组件被拖拽至所述页面效果展示区中的空白区域上，将该目标组件添加在当前编辑的页面中并在所述页面效果展示区渲染出该目标组件。
[0023]第三方面，本公开实施例提供一种电子设备，所述电子设备包括：
[0024]处理器；
[0025]用于存储所述处理器可执行指令的存储器；
[0026]所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述可执行指令以实现上述的方法步骤。
[0027]第四方面，本公开实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序用于执行上述的方法步骤。
[0028]第五方面，本公开实施例提供一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现上述的方法步骤。
[0029]在本公开实施例中，在页面效果展示区中还没有添加任何组件的情况下，响应于检测到组件列表区中的目标组件被拖拽至页面效果展示区，将该目标组件添加在当前编辑的页面中并在页面效果展示区渲染出该目标组件；和/或在页面效果展示区中已有至少一个第一组件的情况下，响应于检测到组件列表区中的目标组件被拖拽至页面效果展示区中的一个组件上，将该目标组件嵌套在该组件中并在页面效果展示区渲染出该目标组件，或者响应于检测到组件列表区中的目标组件被拖拽至页面效果展示区中的空白区域上，将该目标组件添加在当前编辑的页面中并在页面效果展示区渲染出该目标组件。本公开实施例提供的页面编辑方法，由于引入了页面效果展示区，对于非技术人员的目标用户而言，可以
通过拖拽目标组件至页面效果展示区的特定位置，实现对目标组件的嵌套操作或对目标组件的添加操作，并在页面效果展示区渲染出该目标组件；从而使得页面编辑界面变得友好，也得到非技术人员的目标用户想要的网络页面编辑效果。
附图说明
[0030]通过参考下面的附图，可以更为完整地理解本专利技术的示例性实施方式。附图用来提供对本公开实施例的进一步理解，并且构成说明书的一部分，与本公开实施例一起用于解释本专利技术，并不构成对本专利技术的限制。在附图中，相同的参考标号通常代表相同部件或步骤。
[0031]图1为根据本公开一示例性实施例提供的页面的编辑方法的流程图；
[0032]图2为根据本公开一示例性实施例提供的具体应用场景下的对组件执行删除操作的示意图；
[0033]图3为根据本公开一示例性实施例提供的具体应用场景下的对被拖拽组件执行嵌套或调序操作的示意图；
[0034]图4为根据本公开一示例性实施例提供的具体应用场景下的添加任一组件的数据结构示意图；
[00本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面编辑方法，包括：在页面效果展示区中还没有添加任何组件的情况下，响应于检测到组件列表区中的目标组件被拖拽至所述页面效果展示区，将该目标组件添加在当前编辑的页面中并在所述页面效果展示区渲染出该目标组件；和/或在所述页面效果展示区中已有至少一个第一组件的情况下，响应于检测到组件列表区中的目标组件被拖拽至所述页面效果展示区中的一个组件上，将该目标组件嵌套在该组件中并在所述页面效果展示区渲染出该目标组件，或者响应于检测到组件列表区中的目标组件被拖拽至所述页面效果展示区中的空白区域上，将该目标组件添加在当前编辑的页面中并在所述页面效果展示区渲染出该目标组件。2.根据权利要求1所述的方法，其中，根据被拖拽至所述页面效果展示区中的目标组件是否触发了对应组件绑定的鼠标离开事件，确定该目标组件是被拖拽至所述页面效果展示区中的一个组件上还是空白区域上。3.根据权利要求1所述的方法，还包括：针对当前编辑界面中的至少一个第二组件，响应于所述至少一个第二组件中的一个组件被拖拽至所述至少一个第二组件中的另一个组件上且被拖拽组件在横轴方向上的移动距离小于或等于设定阈值，将被拖拽组件从原位置调整到该另一个组件之后的位置上，并重新渲染所述页面效果展示区。4.根据权利要求1所述的方法，还包括：针对当前编辑界面中的至少一个第二组件，响应于所述至少一个第二组件中的一个组件被拖拽至所述至少一个第二组件中的另一个组件上且被拖拽组件在横轴方向上的移动距离大于设定阈值，将被拖拽组件嵌套在该另一个组件上，并重新渲染所述页面效果展示区。5.根据权利要求1所述的方法，还包括：针对当前编辑界面中的至少一个第二组件，响应于所述至少一个第二组件中的一个组件被触发，展示与该组件关联的组件复制控件和/或组件删除控件，其中，通过触...

【专利技术属性】
技术研发人员：齐雅楠，
申请(专利权)人：北京金堤科技有限公司，
类型：发明
国别省市：