页面编辑方法、装置、电子设备和可读存储介质与流程

1.本发明实施例涉及计算机技术领域，尤其涉及一种页面编辑方法、装置、电子设备和可读存储介质。


背景技术：

2.随着信息技术的发展，多种多样的信息平台能够为用户提供更多的服务，信息平台的内容提供方可以通过对内容页面进行编辑和美化，以提高用户体验。对于内容页面的编辑通常基于页面编辑器进行，然而不同的编辑器具有各自不同的使用和功能特点，而在使用某一特定页面编辑器进行页面编辑时，仅能实现该编辑器的功能，这导致页面编辑的灵活性较差。


技术实现要素：

3.本发明实施例提供一种页面编辑方法、装置、电子设备和可读存储介质，以解决页面编辑的灵活性较差的问题。
4.为解决上述问题，本发明是这样实现的：
5.第一方面，本发明实施例提供了一种页面编辑方法，包括以下步骤：
6.获取第一控件和第二控件之间的对应关系，其中，所述第一控件为第一编辑器对应的控件，所述第二控件为第二编辑器对应的控件；
7.获取与所述第二控件对应的目标素材；
8.通过第一控件基于所述对应关系编辑所述目标素材的展示状态。
9.在一些实施例中，所述通过第一控件基于所述对应关系编辑所述目标素材的展示状态，包括：
10.获取对于所述第一控件的拖动输入；
11.根据所述拖动输入确定所述第一控件的目标位置；
12.根据所述目标位置确定所述目标素材的展示位置。
13.在一些实施例中，所述根据所述拖动输入确定所述第一控件的目标位置，包括：
14.获取所述拖动输入对应的拖动位置；
15.在所述拖动位置与预设参考位置之间的距离小于预设距离阈值的情况下，将所述预设参考位置作为所述目标位置。
16.在一些实施例中，所述通过第一控件基于所述对应关系编辑所述目标素材的展示状态，包括：
17.获取调整所述第一控件的展示状态的第一显示参数，所述展示状态包括显示坐标、显示尺寸、显示颜色、偏转角度和透明度中的一项或多项；
18.将所述第一显示参数转换为与所述第二控件对应的第二显示参数；
19.根据所述第二显示参数调整所述目标素材的展示状态。
20.在一些实施例中，所述获取与所述第二控件对应的目标素材之后，所述方法还包
括：
21.根据所述第二控件获取所述目标素材的路径信息；
22.根据所述路径信息修改所述第一控件对应的访问路径，以绑定所述第一控件和所述目标素材。
23.在一些实施例中，所述方法还包括：
24.获取所述目标素材相对于目标时间轴对应的播放参数，所述播放参数包括播放时间和轮播次数中的一项或多项；
25.根据所述播放参数将所述目标素材保存为与所述第二编辑器对应的播放文件。
26.在一些实施例中，所述第一编辑器为svg编辑器，所述第二编辑器为html编辑器。
27.第二方面，本发明实施例还提供一种页面编辑装置，包括：
28.对应关系获取模块，用于获取第一控件和第二控件之间的对应关系，其中，所述第一控件为第一编辑器对应的控件，所述第二控件为第二编辑器对应的控件；
29.目标素材获取模块，用于获取与所述第二控件对应的目标素材；
30.编辑模块，用于通过第一控件基于所述对应关系编辑所述目标素材的展示状态。
31.第三方面，本发明实施例还提供一种电子设备，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的程序；所述处理器，用于读取存储器中的程序实现如前述第一方面所述方法中的步骤。
32.第四方面，本发明实施例还提供一种可读存储介质，用于存储程序，所述程序被处理器执行时实现如前述第一方面所述方法中的步骤。
33.本发明实施例的技术方案通过获取第一编辑器中第一控件和第二编辑器中第二控件的对应关系，能够通过对于第一控件的编辑操作实现对于第二控件对应的目标素材的展示状态的编辑，能够充分利用不同编辑器的特点，有助于提高对于页面编辑的灵活性。
附图说明
34.为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
35.图1是本发明实施例提供的页面编辑方法的流程示意图；
36.图2是本发明实施例提供的页面编辑场景示意图；
37.图3是本发明实施例提供的页面编辑装置的结构示意图；
38.图4是本发明实施提供的电子设备的结构示意图。
具体实施方式
39.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
40.本发明实施例中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描
述特定的顺序或先后次序。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。此外，本技术中使用“和/或”表示所连接对象的至少其中之一，例如a和/或b和/或c，表示包含单独a，单独b，单独c，以及a和b都存在，b和c都存在，a和c都存在，以及a、b和c都存在的7种情况。
41.本发明实施例提供了一种页面编辑方法。
42.如图1所示，在一个实施例中，该页面编辑方法包括以下步骤：
43.步骤101：获取第一控件和第二控件之间的对应关系。
44.本实施例中，第一控件为第一编辑器对应的控件，第二控件为第二编辑器对应的控件，第一编辑器和第二编辑器分别为不同的页面编辑器。
45.示例性的，在一个实施例中，第一编辑器可以是svg编辑器(一种页面编辑器)，svg编辑器具有友好的人机交互界面，更便于使用和操作，第二编辑器为html(hyper text markup language，超文本标记语言)编辑器，html编辑器则具有更好的支持性和兼容性。显然，编辑器的选择并不局限于此，实施时，可以根据具体的应用场景选择相应的页面编辑器，以充分利用不同编辑器的优点。
46.第一编辑器中包括多个第一控件，第二编辑器包括多个第二控件，这里第一控件和第二控件指的是实现不同功能或展示不同元素编辑的控件。例如，html编辑器支持在页面中添加时间控件、展示文本的文本框、播放视频或展示图片的素材框、用于提供扫码信息的二维码和条形码的信息码等，这些元素可以通过相应的控件添加至页面中。
47.同样的元素在第一编辑器中和第二编辑器中通过不同的控件控制，例如，svg编辑器中通过素材库控件向页面中添加图片或视频，而html中通过《image》控件(也称《image》标签)向页面中添加图片，通过《video》控件向页面中添加视频，则可以将svg编辑器中的素材库控件作为第一控件，将《image》控件和《video》控件作为第二控件，并将第一控件和第二控件相绑定，建立第一标签和第二标签之间的对应关系。
48.本实施例中，可以通过svg编辑器中的foreignobject控件对html编辑器中的控件进行包括，以建立第一控件和第二控件之间的对应关系。
49.步骤102：获取与所述第二控件对应的目标素材。
50.本实施例的技术方案中，第二编辑器能够提供更为丰富的素材控制，因此，通过第二控件导入目标素材。
51.在一些实施例中，在该步骤102之后，该方法还包括：
52.根据所述第二控件获取所述目标素材的路径信息；
53.根据所述路径信息修改所述第一控件对应的访问路径，以绑定所述第一控件和所述目标素材。
54.本实施例中，目标素材是通过第二控件导入的，因此，能够基于第二控件确定目标素材的访问路径，进一步的，根据第一控件和第二控件之间的绑定关系，能够确定第一控件与目标素材的访问路径之间的绑定关系，从而能够更加便于通过第一控件实现对于目标素材的预览和选择，提高了操作的便利性。
55.步骤103：通过第一控件基于所述对应关系编辑所述目标素材的展示状态。
56.由于第一编辑器具有更为友好的人机交互界面，因此，基于第一编辑器能够更为便利的进行素材的编辑。
57.在对页面中目标素材进行编辑时，对第一控件进行编辑，由于第一控件和第二控件具有预设的对应关系，因此可以将对第一控件的编辑操作转换为对于第二控件的编辑操作，而目标素材是通过第二控件导入的，这样，就可以实现对第二控件导入的目标素材进行编辑。
58.本发明实施例的技术方案通过获取第一编辑器中第一控件和第二编辑器中第二控件的对应关系，能够通过对于第一控件的编辑操作实现对于第二控件对应的目标素材的展示状态的编辑，能够充分利用不同编辑器的特点，有助于提高对于页面编辑的灵活性，也能够提高所使用的编辑器与硬件的兼容性。
59.在一些实施例中，步骤103包括：
60.获取对于所述第一控件的拖动输入；
61.根据所述拖动输入确定所述第一控件的目标位置；
62.根据所述目标位置确定所述目标素材的展示位置。
63.本实施例的技术方案中，第一编辑器支持通过对于控件的拖动操作实现对控件的编辑，实施时，用户可以通过鼠标或触控控制等方式拖动第一控件，以实现调整第一控件的位置，基于对于第一控件对应的目标位置，能够确定目标素材的展示位置，这样，基于第一编辑器相对友好的交互方式，能够方便快捷的调整目标素材的位置，提高了操作的便利性。
64.在一些实施例中，所述根据所述拖动输入确定所述第一控件的目标位置，包括：
65.获取所述拖动输入对应的拖动位置；
66.在所述拖动位置与预设参考位置之间的距离小于预设距离阈值的情况下，将所述预设参考位置作为所述目标位置。
67.本实施例中，为了提高页面编辑的便利性，设置了参考位置，以便于调整第一控件的位置.
68.如图2所示，在编辑页面中，可以设置多条位于指定位置的参考标志线201作为参考位置，显然，参考位置还可以通过特定的点等不同方式定义。
69.参考标志线201的位置可以由操作人员手动移动或控制，也可以生成于固定的位置，例如生成于页面的左右三分之一位置以及上下三分之一位置，显然，其具体位置并不局限于此。
70.当拖动第一控件至位置a1时，检测到第一控件的边缘与参考标志线之间的距离小于预设距离阈值。此时，调整第一控件的位置至a2位置，也就是调整至与参考标志线对齐。
71.预设距离阈值可以通过不同方式限定，示例性的，可以以1毫米、2毫米、5毫米等不同的数值限定，也可以是100像素、200像素等不同的像素值限定，还可以通过页面总尺寸的1％、0.5％等比例值来限定。
72.这样，通过设置预设参考位置能够提高不同控件对齐的便利性，有助于提高页面的整齐程度。
73.在一些实施例中，通过第一控件基于所述对应关系编辑所述目标素材的展示状态，包括：
74.获取调整所述第一控件的展示状态的第一显示参数，所述展示状态包括显示坐
标、显示尺寸、显示颜色、偏转角度和透明度中的一项或多项；
75.将所述第一显示参数转换为与所述第二控件对应的第二显示参数；
76.根据所述第二显示参数调整所述目标素材的展示状态。
77.本实施例中，第一控件可以针对不同的原始，示例性的，可以包括背景、时间控件、文本框控件、素材控件、信息码控件、网页控件等。
78.针对背景控件，可以显示多个不同的控制页面，可以包括样式、图片和视频三个可以切换的编辑页面，由于页面的整体尺寸是固定的，因此，背景控件的尺寸应当与页面一致，本实施例中以只读形式显示背景控件的尺寸，进一步的，可以通过编辑页面颜色以设定背景颜色，也可以选择图片或视频作为页面的背景。
79.针对时间控件和文本框控件，可以设置x轴和y轴坐标选项以调整其位置，进一步可以通过下拉菜单或按钮设定字体、加粗、倾斜、下划线、字体大小、行间距、字体颜色、控件颜色等显示参数，也可以设定时间控件和文本框控件的旋转方式、透明度、模糊程度、对齐方式(上中下对齐以及左中右对齐)、轮廓样式等参数。
80.针对素材框，涉及了样式、图片和视频三个可以切换的编辑页面，样式页面包括坐标选项、偏转角度、透明度、对齐方式、模糊程度、轮廓样式等显示参数，而基于图片页面和视频页面可以设定素材路径，以导入相应的图片素材或视频素材。
81.针对信息码控件，可以设置包括信息码的输入框和生成按钮，以及坐标选项、偏转角度、透明度、对齐方式、模糊程度、轮廓样式、线条颜色、填充颜色等显示参数。
82.针对网页控件，则可以显示网址的输入框、前往按钮、坐标选项、偏转角度、透明度、对齐方式、模糊程度、轮廓样式等显示参数。
83.其中，上述坐标选项、偏转角度、透明度、对齐方式、模糊程度等可以通过鼠标滚轮输入、也可以通过键盘直接输入相应的数字，也可以通过拖动滚动条等方式实现。
84.又如，传统html编辑器是不支持三维动画效果的，本实施例中，可以基于svg编辑器对于三维动画效果的支持为目标元素添加旋转、模糊、css(cascading style sheets，层叠样式表)样式等，有助于提高页面内容的丰富程度，使得页面的显示效果更加丰富和绚烂。
85.这样，基于第一控件的交互方式，能够方便快捷的实现对于目标素材展示状态的编辑，提高了操作的便利性。
86.在一些实施例中，所述方法还包括：
87.获取所述目标素材相对于目标时间轴对应的播放参数，所述播放参数包括播放时间和轮播次数中的一项或多项；
88.根据所述播放参数将所述目标素材保存为与所述第二编辑器对应的播放文件。
89.本实施例中，基于统一的目标时间轴实现对于不同目标素材的播放控制。具体而言，本实施例中建立了位移的目标时间轴，每一目标素材的播放时间或轮播次数均是基于该目标时间轴的基准时间确定的。
90.针对每一目标素材，均可以设定相应的播放参数，从而时间对于目标素材的定时展示和轮播展示。
91.示例性的，如果需要同时展示两个素材，则可以针对这两个素材设置同步播放，以在目标时间轴的同一时间点进行播放，实施时，可以基于画布同时对着两个素材的展示状
态进行渲染，以提高图像渲染的速度和渲染质量，降低素材展示卡顿的可能性。
92.本实施例中，在完成对于页面的编辑之后，可以执行退出编辑、预览、保存和发布等操作。
93.如果执行退出编辑操作，则离开页面的编辑页面。
94.如果执行预览操作，则显示预览框，并在预览框中显示页面的实际展示状态。
95.如果执行保存操作，则将编辑好的页面进行保存，本实施例中，可以将编辑好的页面保存在本地，也可以保存至服务器，编辑好的页面以与第二编辑器对应的代码等格式保存为播放文件，以便再次编辑。
96.如果执行发布操作，则调整至发布页面，以将编辑好的页面推送至发布终端。
97.本发明实施例还提供一种页面编辑装置。
98.如图3所示，在一个实施例中，该页面编辑装置300包括：
99.对应关系获取模块301，用于获取第一控件和第二控件之间的对应关系，其中，所述第一控件为第一编辑器对应的控件，所述第二控件为第二编辑器对应的控件；
100.目标素材获取模块302，用于获取与所述第二控件对应的目标素材；
101.编辑模块303，用于通过第一控件基于所述对应关系编辑所述目标素材的展示状态。
102.在一些实施例中，所述编辑模块303包括：
103.输入获取子模块，用于获取对于所述第一控件的拖动输入；
104.目标位置确定子模块，用于根据所述拖动输入确定所述第一控件的目标位置；
105.展示位置确定子模块，用于根据所述目标位置确定所述目标素材的展示位置。
106.在一些实施例中，所述目标位置确定子模块具体用于：
107.获取所述拖动输入对应的拖动位置；
108.在所述拖动位置与预设参考位置之间的距离小于预设距离阈值的情况下，将所述预设参考位置作为所述目标位置。
109.在一些实施例中，所述编辑模块303：
110.第一显示参数获取子模块，用于获取调整所述第一控件的展示状态的第一显示参数，所述展示状态包括显示坐标、显示尺寸、显示颜色、偏转角度和透明度中的一项或多项；
111.第二显示参数获取子模块，用于将所述第一显示参数转换为与所述第二控件对应的第二显示参数；
112.展示状态调整子模块，用于根据所述第二显示参数调整所述目标素材的展示状态。
113.在一些实施例中，还包括：
114.路径信息获取模块，用于根据所述第二控件获取所述目标素材的路径信息；
115.路径绑定模块，用于根据所述路径信息修改所述第一控件对应的访问路径，以绑定所述第一控件和所述目标素材。
116.在一些实施例中，还包括：
117.播放参数获取模块，用于获取所述目标素材相对于目标时间轴对应的播放参数，所述播放参数包括播放时间和轮播次数中的一项或多项；
118.播放文件保存模块，用于根据所述播放参数将所述目标素材保存为与所述第二编
辑器对应的播放文件。
119.在一些实施例中，所述第一编辑器为svg编辑器，所述第二编辑器为html编辑器。
120.本实施例的页面编辑装置300能够实现上述页面编辑方法实施例的各个步骤，并能实现基本相同的技术效果，此处不再赘述。
121.本发明实施例还提供一种电子设备。请参见图4，电子设备可以包括处理器401、存储器402及存储在存储器402上并可在处理器401上运行的程序4021。程序4021被处理器401执行时可实现上述页面编辑方法实施例中的任意步骤及达到相同的有益效果，此处不再赘述。
122.本领域普通技术人员可以理解实现上述实施例方法的全部或者部分步骤是可以通过程序指令相关的硬件来完成，所述的程序可以存储于一可读取介质中。
123.本发明实施例还提供一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时可实现上述页面编辑方法实施例中的任意步骤，且能达到相同的技术效果，为避免重复，这里不再赘述。
124.所述的存储介质，如只读存储器(read-only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等。
125.需要说明的是，应理解以上各个模块的划分仅仅是一种逻辑功能的划分，实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分模块通过处理元件调用软件的形式实现，部分模块通过硬件的形式实现。例如，确定模块可以为单独设立的处理元件，也可以集成在上述装置的某一个芯片中实现，此外，也可以以程序代码的形式存储于上述装置的存储器中，由上述装置的某一个处理元件调用并执行以上确定模块的功能。其它模块的实现与之类似。此外这些模块全部或部分可以集成在一起，也可以独立实现。这里所述的处理元件可以是一种集成电路，具有信号的处理能力。在实现过程中，上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。
126.例如，各个模块、单元、子单元或子模块可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个特定集成电路(application specific integrated circuit，asic)，或，一个或多个微处理器(digital signal processor，dsp)，或，一个或者多个现场可编程门阵列(field programmable gate array，fpga)等。再如，当以上某个模块通过处理元件调度程序代码的形式实现时，该处理元件可以是通用处理器，例如中央处理器(central processing unit，cpu)或其它可以调用程序代码的处理器。再如，这些模块可以集成在一起，以片上系统(system-on-a-chip，soc)的形式实现。
127.以上所述是本发明实施例的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明所述原理的前提下，还可以作出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。