CN109522508A - 网页编辑方法、编辑器构建方法、装置及电子设备 - Google Patents
网页编辑方法、编辑器构建方法、装置及电子设备 Download PDFInfo
- Publication number
- CN109522508A CN109522508A CN201811426712.4A CN201811426712A CN109522508A CN 109522508 A CN109522508 A CN 109522508A CN 201811426712 A CN201811426712 A CN 201811426712A CN 109522508 A CN109522508 A CN 109522508A
- Authority
- CN
- China
- Prior art keywords
- control
- instruction
- edit
- html page
- complete
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供一种网页编辑方法、编辑器构建方法、装置及电子设备。该方法应用于电子设备，该方法通过接收用于对HTML页面进行编辑操作的编辑指令；基于与编辑指令对应的控件响应编辑指令，以对HTML页面进行相应的编辑操作。因为电子设备预先安装有或者存在网页版编辑器，其中，编辑器包括用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量大小更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件，能够丰富控件功能，所以能够改善现有技术中因制作的网页功能受限较大而不利于制作复杂网页的技术问题。
Description
技术领域
本发明涉及网页编辑技术领域，具体而言，涉及一种网页编辑方法、编辑器构建方法、装置及电子设备。
背景技术
随着信息技术的不断发展，出现了各式各样的网站，这也意味着对网站的开发量越来越大。目前已有的技术有BootStrap前端可视化布局编辑器，BootStrap是一个用于快速开发Web应用程序和网站的前端框架，提供了一个带有网格系统、链接样式、背景的基本结构，Bootstrap是前端组件库，用于开发响应式布局、移动设备优先的WEB项目。Bootstrap是一套用于HTML、CSS和JS开发的开源工具集。利用提供的Sass变量和大量mixin、响应式栅格系统、可扩展的预制组件、基于jQuery的插件系统，能够快速开发出原型或者构建整个应用程序(APP)。当前BootStrap存在一些缺陷，使得制作的网页功能受限较大，从而不利于制作复杂网页。
发明内容
为了克服上述现有技术中的不足，本发明提供一种网页编辑方法、编辑器构建方法、装置及电子设备。
为了实现上述目的，本发明实施例所提供的技术方案如下所示：
第一方面，本发明实施例提供一种网页编辑方法，应用于电子设备，所述电子设备预先安装有或存在编辑器，其中，所述编辑器包括用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件，所述方法包括：
接收用于对HTML页面进行编辑操作的编辑指令；
基于与所述编辑指令对应的控件响应所述编辑指令，以对所述HTML页面进行相应的编辑操作。
可选地，上述基于与所述编辑指令对应的控件响应所述编辑指令，以对所述HTML页面进行相应的编辑操作，包括：
在所述编辑指令为第一指令时，所述第一控件根据所述第一指令在所述HTML页面中将预嵌套的对象嵌入的表格中，以完成表格嵌套的编辑操作；
在所述编辑指令为第二指令时，所述第二控件根据所述第二指令在所述HTML页面中基于表单中的元素的属性对所述元素分组，以完成所述表单中的所述元素分组的编辑操作；
在所述编辑指令为第三指令时，所述第三控件根据所述第三指令在所述HTML页面中加载预加载的动画文件，以完成加载等待动画的编辑操作；
在所述编辑指令为第四指令时，所述第四控件根据所述第四指令在所述HTML页面中调整页面容器的宽度和/或高度，以完成所述容器量更改的编辑操作；
在所述编辑指令为第五指令时，所述第五控件根据所述第五指令在所述HTML页面中固定与所述元素对应的菜单窗口的位置，以完成所述元素固定的编辑操作；
在所述编辑指令为第六指令时，所述第六控件根据所述第六指令在所述HTML页面中对待移动元素的位置进行调整，以完成所述元素移动的编辑操作；
在所述编辑指令为第七指令时，所述第七控件根据所述第七指令在所述HTML页面中的待更改元素的信息按照预设策略进行更改，以完成所述元素信息更改的编辑操作，其中，所述元素信息包括尺寸大小、颜色、背景图片中的至少一项；
在所述编辑指令为第八指令时，所述第八控件根据所述第八指令在所述HTML页面中对预设的元素布局模式进行切换，以完成所述元素布局切换的编辑操作。
可选地，上述第四控件根据所述第四指令在所述HTML页面中调整页面容器的宽度和/或高度，以完成所述容器量更改的编辑操作，包括：
所述第四控件根据监听的网页的移动方向调整所述页面容器的宽度和/或高度。
可选地，上述布局模式包括第一布局模式及第二布局模式，所述第八控件根据所述第八指令在所述HTML页面中对预设的元素布局模式进行切换，以完成所述元素布局切换的编辑操作，包括：
所述第八控件根据所述第八指令在所述HTML页面中将当前的所述第一布局模式切换为所述第二布局模式。
可选地，上述在接收用于对HTML页面进行编辑操作的编辑指令之前，所述方法还包括：
根据所述第一控件、所述第二控件、所述第三控件、所述第四控件、所述第五控件、所述第六控件、所述第七控件、所述第八控件中的至少一种控件构建编辑器。
第二方面，本发明实施例还提供一种编辑器构建方法，用于构建上述方法中的编辑器，所述方法包括：
根据预设构建规则构建用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件；
将所述第一控件、所述第二控件、所述第三控件、所述第四控件、所述第五控件、所述第六控件、所述第七控件、所述第八控件中的至少一种控件加载到预设的编辑配置文件中形成编辑器。
第三方面，本发明实施例还提供一种网页编辑装置，应用于电子设备，所述电子设备预先安装有或存在编辑器，其中，所述编辑器包括用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件，所述装置包括：
接收单元，用于接收用于对HTML页面进行编辑操作的编辑指令；
编辑单元，用于基于与所述编辑指令对应的控件响应所述编辑指令，以对所述HTML页面进行相应的编辑操作。
可选地，上述编辑单元还用于：
在所述编辑指令为第一指令时，根据所述第一指令在所述HTML页面中将预嵌套的对象嵌入的表格中，以完成表格嵌套的编辑操作；
在所述编辑指令为第二指令时，根据所述第二指令在所述HTML页面中基于表单中的元素的属性对所述元素分组，以完成所述表单中的所述元素分组的编辑操作；
在所述编辑指令为第三指令时，根据所述第三指令在所述HTML页面中加载预加载的动画文件，以完成加载等待动画的编辑操作；
在所述编辑指令为第四指令时，根据所述第四指令在所述HTML页面中调整页面容器的宽度和/或高度，以完成所述容器量更改的编辑操作；
在所述编辑指令为第五指令时，根据所述第五指令在所述HTML页面中固定与所述元素对应的菜单窗口的位置，以完成所述元素固定的编辑操作；
在所述编辑指令为第六指令时，根据所述第六指令在所述HTML页面中对待移动元素的位置进行调整，以完成所述元素移动的编辑操作；
在所述编辑指令为第七指令时，根据所述第七指令在所述HTML页面中的待更改元素的信息按照预设策略进行更改，以完成所述元素信息更改的编辑操作，其中，所述元素信息包括尺寸大小、颜色、背景图片中的至少一项；
在所述编辑指令为第八指令时，根据所述第八指令在所述HTML页面中对预设的元素布局模式进行切换，以完成所述元素布局切换的编辑操作。
第四方面，本发明实施例还提供一种电子设备，所述电子设备包括：
存储模块；
处理模块；及
网页编辑装置，包括一个或多个存储于所述存储模块中并由所述处理模块执行的软件功能模块，其中，所述存储模块存储有编辑器，所述编辑器包括用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件，所述网页编辑装置包括：
接收单元，用于接收用于对HTML页面进行编辑操作的编辑指令；
编辑单元，用于基于与所述编辑指令对应的控件响应所述编辑指令，以对所述HTML页面进行相应的编辑操作。
第五方面，本发明实施例还提供一种计算机可读存储介质，所述可读存储介质中存储有计算机程序，当所述计算机程序在计算机上运行时，使得所述计算机执行上述的网页编辑方法。
相对于现有技术而言，本发明提供的网页编辑方法、编辑器构建方法、装置及电子设备至少具有以下有益效果：该方法应用于电子设备，该方法通过接收用于对HTML页面进行编辑操作的编辑指令；基于与编辑指令对应的控件响应编辑指令，以对HTML页面进行相应的编辑操作。因为电子设备预先安装有或存在编辑器，其中，编辑器包括用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件，能够丰富控件功能，所以能够改善现有技术中因制作的网页功能受限较大而不利于制作复杂网页的技术问题，进而有助于提高制作网页的效率。
为使本发明的上述目的、特征和优点能更明显易懂，下文特举本发明实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍。应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1为本发明实施例提供的电子设备的方框示意图。
图2为本发明实施例提供的网页编辑方法的流程示意图。
图3为本发明实施例提供的编辑器构建方法的流程示意图。
图4为本发明实施例提供的网页编辑装置的方框示意图。
图标：10-电子设备；11-处理模块；12-存储模块；100-网页编辑装置；110-接收单元；120-编辑单元。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。
因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。此外，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
下面结合附图，对本发明的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。
第一实施例
请参照图1，本发明实施例提供的电子设备10可以用于对网页进行可视化编辑及布局，能够执行或实现下述的网页编辑方法或编辑器构建方法。该电子设备10可以通过增加用于超级文本标记语言(HyperText Markup Language，HTML)网页控件，根据新增控件构成的新的编辑器具有多种功能，能够适应于多种控件元素，使得用户对HTML网页的开发更加方便和高效。
其中，电子设备10可以是，但不限于，智能手机、个人电脑(personal computer，PC)、平板电脑、个人数字助理(personal digital assistant，PDA)、移动上网设备(mobileInternet device，MID)等。元素包括，但不限于文字、图片、视频、音频等。
在本实施例中，电子设备10可以包括处理模块11、存储模块12以及网页编辑装置100，处理模块11、存储模块12以及网页编辑装置100各个元件之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。
处理模块11可以是一种集成电路芯片，具有信号的处理能力。上述处理模块11可以是通用处理器。例如，该处理器可以是中央处理器(Central Processing Unit，CPU)、图形处理器(Graphics Processing Unit，GPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。
存储模块12可以是，但不限于，随机存取存储器，只读存储器，可编程只读存储器，可擦除可编程只读存储器，电可擦除可编程只读存储器等。在本实施例中，存储模块12可以用于存储编辑器所包括的各类控件、待编辑素材、待编辑元素等。当然，存储模块12还可以用于存储程序，处理模块11在接收到执行指令后，执行该程序。
进一步地，网页编辑装置100包括至少一个可以软件或固件(firmware)的形式存储于存储模块12中或固化在电子设备10操作系统(operating system，OS)中的软件功能模块。处理模块11用于执行存储模块12中存储的可执行模块，例如网页编辑装置100所包括的软件功能模块及计算机程序等。
可以理解的是，图1所示的结构仅为电子设备10的一种结构示意图，电子设备10还可以包括比图1所示更多或更少的组件。图1中所示的各组件可以采用硬件、软件或其组合实现。
请参照图2，本发明实施例提供的网页编辑方法可以应用于上的电子设备10，由电子设备10执行或实现网页编辑方法的各步骤，能够丰富编辑的网页的功能，有助于提升网页的编辑效率。其中，电子设备10预先安装有或存在编辑器，其中，编辑器包括用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件。该方法可以应用于Bootstrap，其中，Bootstrap指用于前端开发的开源工具包。
下面将对图2中所示的网页编辑方法的各步骤进行详细阐述：
步骤S210，接收用于对HTML页面进行编辑操作的编辑指令。
在本实施例中，编辑指令可以是由用户通过触发电子设备10的输入模块产生的，该输入模块可以是触控显示屏、鼠标、键盘等，这里不作具体限定。
可理解地，用户可以根据需求通过鼠标、键盘等输入编辑指令，处理器可以接收到输入的编辑指令，然后根据编辑指令执行相应的操作。其中，编辑指令包括但不限于用于表格嵌套的第一指令、用于元素分组的第二指令、用于加载等待动画的第三指令、用于容器量更改的第四指令、用于元素固定的第五指令、用于元素移动的第六指令、用于元素信息更改的第七指令、用于元素布局切换的第八指令。例如，若用户需要对网页进行表格嵌套的操作，便可以通过鼠标、键盘等输入第一指令。
可选地，在步骤S210之前，方法还可以包括构建编辑器的步骤。例如，方法还可以包括：根据第一控件、第二控件、第三控件、第四控件、第五控件、第六控件、第七控件、第八控件中的至少一种控件构建编辑器。
其中，第一控件至第八控件可以为根据所需求的功能预先构建得到的控件，然后将控件加载到网页编辑的配置文件中，构成新的编辑器。
步骤S220，基于与编辑指令对应的控件响应编辑指令，以对HTML页面进行相应的编辑操作。
在本实施例中，处理器可以根据编辑指令对应的操作内容，使得编辑器通过相应控件响应该编辑指令，以完成网页编辑操作。其中，操作指令可以根据实际情况进行设置，例如，编辑指令可以为用于表格嵌套的第一指令、用于元素分组的第二指令、用于加载等待动画的第三指令等指令。
可选地，步骤S220可以包括下述方式中的一种：
在编辑指令为第一指令时，第一控件根据第一指令在HTML页面中将预嵌套的对象嵌入的表格中，以完成表格嵌套的编辑操作；
在编辑指令为第二指令时，第二控件根据第二指令在HTML页面中基于表单中的元素的属性对元素分组，以完成表格中的元素分组的编辑操作；
在编辑指令为第三指令时，第三控件根据第三指令在HTML页面中加载预加载的动画文件，以完成加载等待动画的编辑操作；
在编辑指令为第四指令时，第四控件根据第四指令在HTML页面中调整页面容器的宽度和/或高度，以完成容器量更改的编辑操作；比如，第四控件根据监听的网页的移动方向调整页面容器的宽度和/或高度；
在编辑指令为第五指令时，第五控件根据第五指令在HTML页面中固定与元素对应的菜单窗口的位置，以完成元素固定的编辑操作；
在编辑指令为第六指令时，第六控件根据第六指令在HTML页面中对待移动元素的位置进行调整，以完成元素移动的编辑操作；
在编辑指令为第七指令时，第七控件根据第七指令在HTML页面中的待更改元素的信息按照预设策略进行更改，以完成元素信息更改的编辑操作，其中，元素信息包括尺寸大小、颜色、背景图片中的至少一项；
在编辑指令为第八指令时，第八控件根据第八指令在HTML页面中对预设的元素布局模式进行切换，以完成元素布局切换的编辑操作。比如，第八控件根据第八指令在HTML页面中将当前的第一布局模式切换为第二布局模式。
在本实施例中，表格可理解为按所需内容画成格子，然后可以在表格的格子中录入文字或数据。表单可理解为包含各类表单元素，表单元素可以包括输入框，按钮，文字等。
下面对上述的各控件的工作原理进行举例阐述：
第一控件，普通的表格中，每个单元格为最小的单元，每个单元格一般是显示文本等信息，可以把每个单元格设置成一个容器，具有容器的一切功能，比如可以放置任何控件，先把当前可以嵌套的表格用鼠标从左侧拖拽到HTML网页界面的右侧的编辑区域，然后再用鼠标在左侧控件区域，拖拽需要嵌套到表格中的控件，并记录下当前控件的信息(该信息可以包括控件的功能及控件对应的唯一标识)，然后鼠标在需要放置到表格对应单元格上方松开鼠标，记录下当前鼠标的在表格中的位置，把鼠标记录的拖拽控件的信息放置到当前记录位置的表格中，拖拽的控件就放置到当前表格的对应单元格中了，这样就实现了表格的嵌套其他控件的功能。
第二控件，为可以把表单中相关元素分组的控件，如<fieldset>控件。在编辑器的左侧，放置一个把表单中相关元素分组的控件的展示图标，然后鼠标拖拽当前图标到编辑器的右侧区域，然后在鼠标松开的位置，创建一个<fieldset>控件，此控件添加鼠标双击事件，鼠标双击控件的不同位置，就是在控件的不同位置添加元素的内容，当监听到控件双击的位置有内容输入后，再把控件的添加内容的对应代码添加上，这个就实现了<fieldset>控件的灵活和可视化的编辑，有助于缩短开发的时间，提高网页开发的效率。
第三控件，为可以用于加载等待动画的Loading控件。在编辑器的左侧，添加一个Loading的控件展示图标，鼠标拖动此图标到右侧编辑区域，在右侧编辑区域的对应位置就会生成一个Loading加载等待动画，此Loading控件添加鼠标双击事件，双击控件后，弹出Loading控件的属性设置面板，可以设置Loading的显示文字，动画样式和颜色大小等属性，当点击面板的确定按钮后，把面板中设置的属性一一对应到控件的代码中设置出来，这样就实现了Loading控件的灵活和可视化的编辑。
第四控件，为可以动态改变网页容器大小的控件。实现动态改变大小的容器的方式：先设置容器的垂直和水平滚动条显示出来，然后监听滚动条的滚动事件，当鼠标拖动滚动条到边界时，继续拖拽滚动条时，就增加容器的宽度或者高度(当鼠标拖拽水平方向滚动条时，容器增加宽度，拖拽垂直方向滚动条时，增加容器高度)，容器的宽度或者高度的增加的速度和鼠标的拖拽速度成正比，这样就实现了可以动态改变大小的容器。
第五控件，为用于元素窗口菜单固定的控件。第五控件中可以包含固定元素和可动元素。即，此控件由两部分组成，固定元素和可动元素，比如有横排放置的菜单，在菜单的下方有显示内容的容器，如果当容器中的内容很多时，当前页面就会出现滚动条，拖拽滚动条，菜单就会跟着容器向上滚动，持续滚动的话，菜单就会超过显示器，无法看到菜单的内容，可以把菜单设置绝对定位，让菜单固定到网页的容器上方的位置，并且设置下方的内容容器的滚动范围一直在菜单的下方，这样就实现了拖拽滚动条时，内容容器可以上下滚动，而菜单一直固定在内容容器的上方，即使在滚动内容容器时，也可以看到菜单，这样就是实现了包含固定元素和可动元素组成的控件。
第六控件，为可以拖动元素到HTML页面任意位置的控件。此控件的实现远离为：对控件添加鼠标点击和拖拽事件，然后控件就可以跟随鼠标移动，并记录下当前控件的信息，当监听到鼠标松开事件时，记录下当前鼠标的位置，然后根据鼠标记录的控件的信息，把控件添加到鼠标记录的位置，这样就实现了拖动控件，并把控件放置到任意位置的功能。
第七控件，为用于元素信息(或称为元素样式)更改的控件。例如，鼠标右键或者双击任意控件，都可以自定义当前元素的样式。比如，在编辑器中，对每个控件元素添加鼠标的右键或者双击事件，当监听到事件时，就可以弹出弹窗，可以在弹窗中修改当前选中元素的各种样式，比如：大小、颜色、背景图片、动画等，当点击弹窗确定按钮后，根据弹窗中设置的样式属性，把这些属性赋值给当前选中的控件元素，从而实现元素信息的更改，这样就实现了网页可视化灵活编辑。
第八控件，为用于布局模式切换的控件。例如，鼠标右键或者双击整个Html页面可以设置当前整个Html页面是根据分辨率自适应大小和位置，还是不随分辨率的变化的固定的大小和位置。在Html页面中，添加一个全局的接口，在接口里面是编写的Html页面的布局规则，第一种是Html中的页面和内部的元素的位置和大小是根据百分比来显示，也就是根据显示分辨率来自适应大小和位置；第二种是Html中的页面和内部的元素的位置和大小是根据固定的坐标设置的，不会因为分辨率的变化而变化，也就是不随分辨率的变化的固定的大小和位置；对整个Html监听右键或者双击事件，当监听到事件时，弹出弹窗，在弹窗中选择是自适应布局还是固定布局，当点击弹窗确定按钮时，就可以根据弹窗选择的内容调用全局的接口来设置当前Html页面是根据分辨率自适应布局，还是固定的布局；这样就实现了此功能。
基于上述设计，本方案能够丰富网页编辑的功能，便于用户根据需求对网页进行编辑，从而有助于提高网页编辑的效率。
第二实施例
请参照图3，本发明实施例提供的编辑器构建方法可以应用于上述的电子设备10，由该电子设备10执行或实现编辑器构建方法的各步骤，能够构建出用于实现第一实施例方法的编辑器，该编辑器能够丰富网页编辑的功能，便于用户利用该编辑器对网页进行编辑。可理解地，该编辑器为可以软件或固件(firmware)的形式存储于存储模块12中或固化在电子设备10操作系统(operating system，OS)中的软件功能模块。
在本实施例中，编辑器构建方法可以包括以下步骤：
步骤S310，根据预设构建规则构建用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件；
步骤S320，将第一控件、第二控件、第三控件、第四控件、第五控件、第六控件、第七控件、第八控件中的至少一种控件加载到预设的编辑配置文件中形成编辑器。
在第二实施例中，用户可以根据功能需求，构建相应的控件，然后将控件加载到原编辑器的编辑配置文件中形成新的编辑器。
请参照图4，本发明实施例还提供一种网页编辑装置100，该网页编辑装置100可以应用于上述的电子设备10，能够实现或执行网页编辑方法的各步骤。其中，网页编辑编辑装置可以包括接收单元110及编辑单元120。
接收单元110，用于接收用于对HTML页面进行编辑操作的编辑指令。
编辑单元120，用于基于与编辑指令对应的控件响应编辑指令，以对HTML页面进行相应的编辑操作。
可选地，编辑单元120还用于：
在编辑指令为第一指令时，根据第一指令在HTML页面中将预嵌套的对象嵌入的表格中，以完成表格嵌套的编辑操作；
在编辑指令为第二指令时，根据第二指令在HTML页面中基于表单中的元素的属性对元素分组，以完成表单中的元素分组的编辑操作；
在编辑指令为第三指令时，根据第三指令在HTML页面中加载预加载的动画文件，以完成加载等待动画的编辑操作；
在编辑指令为第四指令时，根据第四指令在HTML页面中调整页面容器的宽度和/或高度，以完成容器量更改的编辑操作；
在编辑指令为第五指令时，根据第五指令在HTML页面中固定与元素对应的菜单窗口的位置，以完成元素固定的编辑操作；
在编辑指令为第六指令时，根据第六指令在HTML页面中对待移动元素的位置进行调整，以完成元素移动的编辑操作；
在编辑指令为第七指令时，根据第七指令在HTML页面中的待更改元素的信息按照预设策略进行更改，以完成元素信息更改的编辑操作，其中，元素信息包括尺寸大小、颜色、背景图片中的至少一项；
在编辑指令为第八指令时，根据第八指令在HTML页面中对预设的元素布局模式进行切换，以完成元素布局切换的编辑操作。
可选地，网页编辑装置100还可以包括编辑器构建单元，在接收单元110接收用于对HTML页面进行编辑操作的编辑指令之前，编辑器构建单元用于：根据预设构建规则构建用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件，将第一控件、第二控件、第三控件、第四控件、第五控件、第六控件、第七控件、第八控件中的至少一种控件加载到预设的编辑配置文件中形成编辑器。
需要说明的是，所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的电子设备10、网页编辑装置100的具体工作过程，可以参考前述方法中的各步骤对应过程，在此不再过多赘述。
本发明实施例还提供一种计算机可读存储介质或者是可以直接在电子设备10上运行的网站版的连接地址。可读存储介质中存储有计算机程序，当计算机程序在计算机上运行时，使得计算机执行如上述实施例中所述的网页编辑方法或编辑器构建方法。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本发明可以通过硬件实现，也可以借助软件加必要的通用硬件平台的方式来实现，基于这样的理解，本发明的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施场景所述的方法。
综上所述，本发明提供一种网页编辑方法、编辑器构建方法、装置及电子设备。该方法应用于电子设备，该方法通过接收用于对HTML页面进行编辑操作的编辑指令；基于与编辑指令对应的控件响应编辑指令，以对HTML页面进行相应的编辑操作。因为电子设备预先安装有或者存在网页版编辑器，其中，编辑器包括用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件，能够丰富控件功能，所以能够改善现有技术中因制作的网页功能受限较大而不利于制作复杂网页的技术问题，进而有助于提高制作网页的效率。
在本发明所提供的实施例中，应该理解到，所揭露的装置、系统和方法，也可以通过其它的方式实现。以上所描述的装置、系统和方法实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
可以替换的，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (10)
1.一种网页编辑方法，其特征在于，应用于电子设备，所述电子设备预先安装有或者存在编辑器，其中，所述编辑器包括用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件，所述方法包括：
接收用于对HTML页面进行编辑操作的编辑指令；
基于与所述编辑指令对应的控件响应所述编辑指令，以对所述HTML页面进行相应的编辑操作。
2.根据权利要求1所述的方法，其特征在于，基于与所述编辑指令对应的控件响应所述编辑指令，以对所述HTML页面进行相应的编辑操作，包括：
在所述编辑指令为第一指令时，所述第一控件根据所述第一指令在所述HTML页面中将预嵌套的对象嵌入的表格中，以完成表格嵌套的编辑操作；
在所述编辑指令为第二指令时，所述第二控件根据所述第二指令在所述HTML页面中基于表单中的元素的属性对所述元素分组，以完成所述表单中的所述元素分组的编辑操作；
在所述编辑指令为第三指令时，所述第三控件根据所述第三指令在所述HTML页面中加载预加载的动画文件，以完成加载等待动画的编辑操作；
在所述编辑指令为第四指令时，所述第四控件根据所述第四指令在所述HTML页面中调整页面容器的宽度和/或高度，以完成所述容器量更改的编辑操作；
在所述编辑指令为第五指令时，所述第五控件根据所述第五指令在所述HTML页面中固定与所述元素对应的菜单窗口的位置，以完成所述元素固定的编辑操作；
在所述编辑指令为第六指令时，所述第六控件根据所述第六指令在所述HTML页面中对待移动元素的位置进行调整，以完成所述元素移动的编辑操作；
在所述编辑指令为第七指令时，所述第七控件根据所述第七指令在所述HTML页面中的待更改元素的信息按照预设策略进行更改，以完成所述元素信息更改的编辑操作，其中，所述元素信息包括尺寸大小、颜色、背景图片中的至少一项；
在所述编辑指令为第八指令时，所述第八控件根据所述第八指令在所述HTML页面中对预设的元素布局模式进行切换，以完成所述元素布局切换的编辑操作。
3.根据权利要求2所述的方法，其特征在于，所述第四控件根据所述第四指令在所述HTML页面中调整页面容器的宽度和/或高度，以完成所述容器量更改的编辑操作，包括：
所述第四控件根据监听的网页的移动方向调整所述页面容器的宽度和/或高度。
4.根据权利要求2所述的方法，其特征在于，所述布局模式包括第一布局模式及第二布局模式，所述第八控件根据所述第八指令在所述HTML页面中对预设的元素布局模式进行切换，以完成所述元素布局切换的编辑操作，包括：
所述第八控件根据所述第八指令在所述HTML页面中将当前的所述第一布局模式切换为所述第二布局模式。
5.根据权利要求1所述的方法，其特征在于，在接收用于对HTML页面进行编辑操作的编辑指令之前，所述方法还包括：
根据所述第一控件、所述第二控件、所述第三控件、所述第四控件、所述第五控件、所述第六控件、所述第七控件、所述第八控件中的至少一种控件构建编辑器。
6.一种编辑器构建方法，其特征在于，用于构建如权利要求1-5中任一项所述方法中的编辑器，所述方法包括：
根据预设构建规则构建用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件；
将所述第一控件、所述第二控件、所述第三控件、所述第四控件、所述第五控件、所述第六控件、所述第七控件、所述第八控件中的至少一种控件加载到预设的编辑配置文件中形成编辑器。
7.一种网页编辑装置，其特征在于，应用于电子设备，所述电子设备预先安装有或存在编辑器，其中，所述编辑器包括用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件，所述装置包括：
接收单元，用于接收用于对HTML页面进行编辑操作的编辑指令；
编辑单元，用于基于与所述编辑指令对应的控件响应所述编辑指令，以对所述HTML页面进行相应的编辑操作。
8.根据权利要求7所述的装置，其特征在于，所述编辑单元还用于：
在所述编辑指令为第一指令时，根据所述第一指令在所述HTML页面中将预嵌套的对象嵌入的表格中，以完成表格嵌套的编辑操作；
在所述编辑指令为第二指令时，根据所述第二指令在所述HTML页面中基于表单中的元素的属性对所述元素分组，以完成所述表单中的所述元素分组的编辑操作；
在所述编辑指令为第三指令时，根据所述第三指令在所述HTML页面中加载预加载的动画文件，以完成加载等待动画的编辑操作；
在所述编辑指令为第四指令时，根据所述第四指令在所述HTML页面中调整页面容器的宽度和/或高度，以完成所述容器量更改的编辑操作；
在所述编辑指令为第五指令时，根据所述第五指令在所述HTML页面中固定与所述元素对应的菜单窗口的位置，以完成所述元素固定的编辑操作；
在所述编辑指令为第六指令时，根据所述第六指令在所述HTML页面中对待移动元素的位置进行调整，以完成所述元素移动的编辑操作；
在所述编辑指令为第七指令时，根据所述第七指令在所述HTML页面中的待更改元素的信息按照预设策略进行更改，以完成所述元素信息更改的编辑操作，其中，所述元素信息包括尺寸大小、颜色、背景图片中的至少一项；
在所述编辑指令为第八指令时，根据所述第八指令在所述HTML页面中对预设的元素布局模式进行切换，以完成所述元素布局切换的编辑操作。
9.一种电子设备，其特征在于，所述电子设备包括：
存储模块；
处理模块；及
网页编辑装置，包括一个或多个存储于所述存储模块中并由所述处理模块执行的软件功能模块，其中，所述存储模块存储有编辑器，所述编辑器包括用于表格嵌套的第一控件、用于元素分组的第二控件、用于加载等待动画的第三控件、用于容器量更改的第四控件、用于元素固定的第五控件、用于元素移动的第六控件、用于元素信息更改的第七控件、用于元素布局切换的第八控件中的至少一种控件，所述网页编辑装置包括：
接收单元，用于接收用于对HTML页面进行编辑操作的编辑指令；
编辑单元，用于基于与所述编辑指令对应的控件响应所述编辑指令，以对所述HTML页面进行相应的编辑操作。
10.一种计算机可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，当所述计算机程序在计算机上运行时，使得所述计算机执行如权利要求1-5中任意一项所述的网页编辑方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811426712.4A CN109522508A (zh) | 2018-11-27 | 2018-11-27 | 网页编辑方法、编辑器构建方法、装置及电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811426712.4A CN109522508A (zh) | 2018-11-27 | 2018-11-27 | 网页编辑方法、编辑器构建方法、装置及电子设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109522508A true CN109522508A (zh) | 2019-03-26 |
Family
ID=65779092
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811426712.4A Pending CN109522508A (zh) | 2018-11-27 | 2018-11-27 | 网页编辑方法、编辑器构建方法、装置及电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109522508A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110110304A (zh) * | 2019-03-29 | 2019-08-09 | 东软集团股份有限公司 | 表单扩展方法、装置、存储介质及电子设备 |
| CN111209034A (zh) * | 2020-01-13 | 2020-05-29 | 成都卓影科技股份有限公司 | Tv大屏可视化动态页面配置的方法 |
| CN114547519A (zh) * | 2022-02-24 | 2022-05-27 | 京东方数字科技有限公司 | 页面编辑方法、装置、电子设备和可读存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102707945A (zh) * | 2012-04-11 | 2012-10-03 | 佳都新太科技股份有限公司 | 一种Eclipse基于布局模版的表单设计器的实现方法 |
| CN102915328A (zh) * | 2012-09-04 | 2013-02-06 | 新浪网技术(中国)有限公司 | 编辑富文本的方法及富文本编辑器 |
| CN105824647A (zh) * | 2016-04-05 | 2016-08-03 | 浪潮电子信息产业股份有限公司 | 一种表单页面生成方法和装置 |
| CN106293777A (zh) * | 2016-10-31 | 2017-01-04 | 山东鲁能软件技术有限公司 | 一种基于组件式开发前端界面控件实现方法 |
-
2018
- 2018-11-27 CN CN201811426712.4A patent/CN109522508A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102707945A (zh) * | 2012-04-11 | 2012-10-03 | 佳都新太科技股份有限公司 | 一种Eclipse基于布局模版的表单设计器的实现方法 |
| CN102915328A (zh) * | 2012-09-04 | 2013-02-06 | 新浪网技术(中国)有限公司 | 编辑富文本的方法及富文本编辑器 |
| CN105824647A (zh) * | 2016-04-05 | 2016-08-03 | 浪潮电子信息产业股份有限公司 | 一种表单页面生成方法和装置 |
| CN106293777A (zh) * | 2016-10-31 | 2017-01-04 | 山东鲁能软件技术有限公司 | 一种基于组件式开发前端界面控件实现方法 |
Non-Patent Citations (1)
| Title |
|---|
| 施人铜: "基于jQuery的Web前端组件开发研究与应用", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110110304A (zh) * | 2019-03-29 | 2019-08-09 | 东软集团股份有限公司 | 表单扩展方法、装置、存储介质及电子设备 |
| CN110110304B (zh) * | 2019-03-29 | 2023-10-27 | 东软集团股份有限公司 | 表单扩展方法、装置、存储介质及电子设备 |
| CN111209034A (zh) * | 2020-01-13 | 2020-05-29 | 成都卓影科技股份有限公司 | Tv大屏可视化动态页面配置的方法 |
| CN111209034B (zh) * | 2020-01-13 | 2023-03-03 | 成都卓影科技股份有限公司 | Tv大屏可视化动态页面配置的方法 |
| CN114547519A (zh) * | 2022-02-24 | 2022-05-27 | 京东方数字科技有限公司 | 页面编辑方法、装置、电子设备和可读存储介质 |
| CN114547519B (zh) * | 2022-02-24 | 2023-04-07 | 京东方数字科技有限公司 | 页面编辑方法、装置、电子设备和可读存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11307750B2 (en) | Method and system for section-based editing of a website page | |
| CN103853729B (zh) | 页面加载方法及其系统 | |
| KR101201274B1 (ko) | 그래픽 사용자 인터페이스에서 스크랩된 웹 페이지들을 제공하는 방법 및 장치 | |
| CN104933142B (zh) | 动画展示方法和装置 | |
| EP2994821B1 (en) | Variable dimension version editing for graphical designs | |
| CN109522508A (zh) | 网页编辑方法、编辑器构建方法、装置及电子设备 | |
| US20140208203A1 (en) | Key-Frame based Authoring and Generation of Highly Resizable Document Layout | |
| CN108228253A (zh) | 一种app构建方法及系统 | |
| JP2014532207A (ja) | コンピュータによる処理方法 | |
| WO2008154065A1 (en) | Methods and systems for animating displayed representations of data items | |
| US20130091457A1 (en) | Post selection mouse pointer location | |
| CN103034683A (zh) | 用于浏览器的页面切换方法和装置 | |
| WO2014067442A1 (en) | Page browsing method and browser | |
| CN103019557A (zh) | 页面切换方法和装置 | |
| CN106354355A (zh) | 用户界面布局方法、装置及系统 | |
| CN103955476A (zh) | 一种浏览器中页面标签头的绘制方法、装置和浏览器 | |
| US11823647B2 (en) | Responsive layout system and server | |
| CN109240756A (zh) | 一种动态加载JavaScript模块的方法及装置 | |
| CN110019037A (zh) | 一种pdf文件展示方法、装置、设备及存储介质 | |
| CN110020291A (zh) | 网页布局的处理方法及装置 | |
| CN104199946A (zh) | 一种网页信息的加载进度的显示方法及装置 | |
| CN107239212A (zh) | 分段选择视图呈现方法、装置及用户终端 | |
| CN113076160B (zh) | 显示界面的信息显示方法及相关装置 | |
| CN103699381A (zh) | 基于Firefox OS平台的微件设置方法及系统 | |
| Vercruysse et al. | WordVis: JavaScript and animation to visualize the WordNet relational dictionary |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190326 |
|
| RJ01 | Rejection of invention patent application after publication |