CN114780077A - 网页可视化编辑的装置及方法 - Google Patents

网页可视化编辑的装置及方法 Download PDF

Info

Publication number
CN114780077A
CN114780077A CN202210406394.5A CN202210406394A CN114780077A CN 114780077 A CN114780077 A CN 114780077A CN 202210406394 A CN202210406394 A CN 202210406394A CN 114780077 A CN114780077 A CN 114780077A
Authority
CN
China
Prior art keywords
style
data
private
module
canvas
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
Application number
CN202210406394.5A
Other languages
English (en)
Inventor
卫少基
唐斌
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Xiamen Draft Co ltd
Gaoding Xiamen Technology Co Ltd
Original Assignee
Xiamen Draft Co ltd
Gaoding Xiamen Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Xiamen Draft Co ltd, Gaoding Xiamen Technology Co Ltd filed Critical Xiamen Draft Co ltd
Priority to CN202210406394.5A priority Critical patent/CN114780077A/zh
Publication of CN114780077A publication Critical patent/CN114780077A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本申请公开了一种网页可视化编辑的装置及方法，本申请的装置包括样式配置模块、结构配置模块、控制模块、画布模块，样式配置模块和结构配置模块用于接收样式和结构的可视化变更操作，并根据可视化变更操作以及应用程序接口对私有样式数据和结构数据进行更新；控制模块，用于在私有样式数据更新和/或私有结构数据更新后向画布模块发送数据变更通知；画布模块，用于在接收到控制模块发送的数据变更通知后，将更新后的私有样式数据和/或更新后的私有结构数据映射为内嵌页面的结构代码和/或样式代码，并根据结构代码和/或样式代码更新用户正在编辑的页面的渲染。本申请解决如何提出一种更简便、更自由的网页编辑方式的问题。

Description

网页可视化编辑的装置及方法
技术领域
本申请涉及互联网技术领域，具体而言，涉及一种网页可视化编辑的装置及方法。
背景技术
为了满足用户个性化的设计要求，目前一些网站建站服务商提供网页的在线设计服务。具体是通过服务商提供的网页编辑页面，允许用户在固定模板上进行内容编辑、微调，但是这种填写固定模板的形式限制了高阶用户对页面样式效果的控制，也限制了用户的设计表达，导致产出的网页千篇一律。另外，也有的服务商可以提供在线的代码式编辑环境，让用户能够使用网页开发所用到的编程语言去编写页面，这种代码编程式的页面开发环境虽然能够让用户可以充分控制、表达页面的结构和样式，但是这种方式要求用户群体必须掌握网页相关的编程技能，无法广泛应用，而且这种方式也无法方便地可视化编辑。综上，如何提出一种更简便、更自由的网页编辑方式是亟需解决的。
发明内容
本申请的主要目的在于提供一种网页可视化编辑的装置及方法，解决如何提出一种更简便、更自由的网页编辑方式的问题。
为了实现上述目的，根据本申请的第一方面，提供了一种网页可视化编辑的装置。
根据本申请的网页可视化编辑的装置包括：样式配置模块、结构配置模块、控制模块、画布模块：所述样式配置模块，用于接收样式可视化变更操作，并根据所述样式可视化变更操作以及所述控制模块提供的应用程序接口对私有样式数据进行更新，所述应用程序接口为操作私有结构数据和私有样式数据的接口；所述结构配置模块，用于接收结构可视化变更操作，并根据所述结构可视化变更操作以及所述应用程序接口对私有结构数据进行更新；所述控制模块，用于提供所述应用程序接口，还用于在所述样式配置模块对私有样式数据进行更新和/或所述结构配置模块对私有结构数据进行更新后向所述画布模块发送数据变更通知，所述数据变更通知包括更新后的私有样式数据和/或更新后的私有结构数据；所述画布模块，用于将内联框架元素作为画布的容器，在内联框架元素内显示内嵌页面，还用于在接收到所述控制模块发送的所述数据变更通知后，将更新后的私有样式数据和/或更新后的私有结构数据映射为所述内嵌页面的结构代码和/或样式代码，并根据所述结构代码和/或样式代码更新所述内嵌页面的渲染，所述内嵌页面为用户正在编辑的页面。
可选的，所述样式配置模块还用于：通过图形用户界面接收对所述内嵌页面对应的样式控制项的调整，所述样式控制项的调整包括通过输入值填写、选项选择、开关切换中至少一种方式进行调整。
可选的，所述结构配置模块还用于：结构配置模块接收对所述内嵌页面对应的文档对象模型树中的节点的结构调整，所述结构调整包括复制、粘贴、删除、位置移动中的至少一种。
可选的，所述结构配置模块，包括：第一调整单元，用于若结构调整为复制，则将所述可视化变更操作对应的节点及其后代节点的数据进行复制；第二调整单元，用于若结构调整为粘贴，则将复制后的副本数据***到与所述可视化变更操作对应的节点或其一个祖先元素下；第三调整单元，用于若结构调整为删除，则将所述可视化变更操作对应的节点及其后代节点的数据进行删除；第四调整单元，用于若结构调整为位置移动，则所述可视化变更操作对应的节点所在的子树移动到新的父节点下。
可选的，所述装置还包括：画布交互模块，用于接收对所述画布上光标指向的文档对象模型节点的交互操作，并根据所述交互操作以及所述应用程序接口对所述私有结构数据和/或私有样式数据进行更新，所述交互操作包括拖拽、拉伸、旋转中至少一种。
可选的，所述控制模块，还用于在所述画布交互模块对私有样式数据进行更新和/或私有结构数据进行更新后向所述画布模块发送所述数据变更通知。
可选的，所述画布模块包括：第一更新单元，用于按照所述结构代码对所述内嵌网页的文档对象模型树结构进行一致性的更新；第二更新单元，用于按照所述样式代码对所述内嵌页面的样式数据进行一致性的更新；刷新单元，用于根据更新后的内嵌页面的文档对象模型树结构和/或更新后的内嵌页面的样式数据刷新所述内嵌页面的显示。
为了实现上述目的，根据本申请的第二方面，提供了一种网页可视化编辑的方法。
根据本申请的网页可视化编辑的方法包括：样式配置模块接收样式可视化变更操作，并根据所述样式可视化变更操作以及控制模块提供的应用程序接口对私有样式数据进行更新，所述应用程序接口为操作私有结构数据和私有样式数据的接口；和/或，结构配置模块接收结构可视化变更操作，并根据所述结构可视化变更操作以及所述应用程序接口对私有结构数据进行更新；控制模块向画布模块发送数据变更通知，所述数据变更通知包括更新后的私有样式数据和/或更新后的私有结构数据；画布模块将更新后的私有样式数据和/或更新后的私有结构数据映射为内嵌页面的结构代码和/或样式代码，并根据所述结构代码和/或样式代码更新所述内嵌页面的渲染，所述内嵌页面为在内联框架元素内显示的用户正在编辑的页面，所述内联框架元素为画布的容器。
可选的，所述样式配置模块接收样式可视化变更操作包括：样式配置模块通过图形用户界面接收对所述内嵌页面对应的样式控制项的调整，所述样式控制项的调整包括通过输入值填写、选项选择、开关切换中至少一种方式进行调整。
可选的，所述结构配置模块接收结构可视化变更操作包括：结构配置模块接收对所述内嵌页面对应的文档对象模型树中的节点的结构调整，所述结构调整包括复制、粘贴、删除、位置移动中的至少一种。
可选的，所述根据所述结构可视化变更操作以及所述应用程序接口对私有结构数据进行更新包括：若结构调整为复制，则将所述可视化变更操作对应的节点及其后代节点的数据进行复制；若结构调整为粘贴，则将复制后的副本数据***到与所述可视化变更操作对应的节点或其一个祖先元素下；若结构调整为删除，则将所述可视化变更操作对应的节点及其后代节点的数据进行删除；若结构调整为位置移动，则所述可视化变更操作对应的节点所在的子树移动到新的父节点下。
可选的，所述方法还包括：画布交互模块接收对所述画布上光标指向的文档对象模型节点的交互操作，并根据所述交互操作以及所述应用程序接口对所述私有结构数据和/或私有样式数据进行更新，所述交互操作包括拖拽、拉伸、旋转中至少一种。
可选的，所述根据所述结构代码和/或样式代码更新所述内嵌页面的渲染包括：按照所述结构代码对所述内嵌网页的文档对象模型树结构进行一致性的更新；和/或,按照所述样式代码对所述内嵌页面的样式数据进行一致性的更新；根据更新后的内嵌页面的文档对象模型树结构和/或更新后的内嵌页面的样式数据刷新所述内嵌页面的显示。
可选的，所述方法还包括：所述控制模块先对所述画布模块进行初始化，再对所述画布交互模块、样式配置模块、结构配置模块进行初始化。
为了实现上述目的，根据本申请的第三方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行上述第二方面中任意一项所述的网页可视化编辑的方法。
为了实现上述目的，根据本申请的第四方面，提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器执行上述第二方面中任意一项所述的网页可视化编辑的方法。
在本申请实施例的网页可视化编辑的装置及方法中，样式配置模块接收样式可视化变更操作，并根据所述样式可视化变更操作以及控制模块提供的应用程序接口对私有样式数据进行更新；和/或，结构配置模块接收结构可视化变更操作，并根据所述结构可视化变更操作以及所述应用程序接口对私有结构数据进行更新；控制模块向画布模块发送包括更新后的私有样式数据和/或更新后的私有结构数据的数据变更通知；画布模块将更新后的私有样式数据和/或更新后的私有结构数据映射为内嵌页面的结构代码和/或样式代码，并根据所述结构代码和/或样式代码更新在内联框架元素(画布的容器)内显示的用户正在编辑的页面的渲染。综上，本申请实施例的网页可视化编辑方式通过样式配置模块、结构配置模块让用户可以实现实现任意符合超文本标记语言(HyperText Markup Language，HTML)语言的网页内容结构和符合层叠样式表(Cascading Style Sheets，CSS)语言的样式规则，不受固定模板的限制，提供无限制的网页编辑区域；另外这些规则可以由编辑环境去封装提供，用户不必掌握编程技能，非常方便，此外通过画布模块可以实现网页编辑后的显示效果，实现实时预览的效果。
附图说明
构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是根据本申请实施例提供的一种网页可视化编辑的装置的组成框图；
图2是根据本申请实施例提供的一种网页可视化编辑的界面示意图；
图3是根据本申请实施例提供的另一种网页可视化编辑的装置的组成框图；
图4是根据本申请实施例提供的一种网页可视化编辑的方法的流程图。
具体实施方式
为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。
需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
当用户想要对网站建站服务商提供的网页进行私有化或者个性化的修改编辑时，可以基于下述实施例的方式进行可视化的编辑。
需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
根据本申请实施例，提供了一种网页可视化编辑的装置100，如图1所示，该装置包括样式配置模块11、结构配置模块12、控制模块13、画布模块14：样式配置模块11，用于接收样式可视化变更操作，并根据样式可视化变更操作以及控制模块13提供的应用程序接口对私有样式数据进行更新，应用程序接口为操作私有结构数据和私有样式数据的接口；结构配置模块12，用于接收结构可视化变更操作，并根据结构可视化变更操作以及应用程序接口对私有结构数据进行更新；控制模块13，用于提供应用程序接口，还用于在样式配置模块11对私有样式数据进行更新和/或结构配置模块12对私有结构数据进行更新后向画布模块14发送数据变更通知，数据变更通知包括更新后的私有样式数据和/或更新后的私有结构数据；画布模块14，用于将内联框架元素作为画布的容器，在内联框架元素内显示内嵌页面，还用于在接收到控制模块13发送的数据变更通知后，将更新后的私有样式数据和/或更新后的私有结构数据映射为内嵌页面的结构代码和/或样式代码，并根据结构代码和/或样式代码更新内嵌页面的渲染，内嵌页面为用户正在编辑的页面。
样式配置模块11提供图形化用户界面((Graphical User Interface，GUI)，如图2所示，为本申请提供的一种用户进行网页可视化编辑的界面，其中，可以看到样式配置模块11的GUI中可以通过输入值填写、选项选择、开关切换中至少一种方式进行样式的编辑，非常的方便，而且自由度很大。需要说明的是，图2中的样式配置模块11的GUI是示意图，并没有将所有的可编辑的样式显示出，在实际应用中，可以通过滚动条或其他方式查看并编辑其他样式。本申请实施例中将通过样式配置模块11的GUI进行的操作记作样式可视化变更操作，当用户通过样式配置模块11的GUI进行样式可视化变更操作后，样式配置模块11可以接收到该样式可视化变更操作，这些样式可视化变更操作是用户的个性化的网页样式设计，因此需要将样式可视化变更操作更新到私有样式数据中。私有样式数据是指用户私有的个性化的网页样式数据，不是公用的样式数据。需要说明的是，本申请实施例中的私有样式数据为浏览器内文档对象模型(Document Object Model，DOM)元素样式数据的结构化表述，可以包含如下字段：1.私有样式数据所对应的DOM元素的ID，也就是结构数据的元素的唯一身份标识号(Identity document，ID)。2.样式属性的哈希表，可以记录符合浏览器样式声明的各项属性及其取值3.其他便于本方案实现的数据。具体的将样式可视化变更操作更新到私有样式数据中的更新方式为：样式配置模块11根据样式可视化变更操作以及控制模块13提供的应用程序接口对私有样式数据进行更新，其中应用程序接口为操作私有结构数据和私有样式数据的应用程序接口(Application Program Interface，API)。控制模块13是整个网页可视化编辑的装置100的核心，负责装置内各模块之间的交互，以及装置内外的交互。
结构配置模块12也提供可以对文档对象模型树中的节点进行编辑的界面，如图2所示，可以看到结构配置模块12的可编辑界面中显示有文档对象模型树，用户可以通过对文档对象模型树中的节点进行选择并操作，具体的操作包括复制、粘贴、删除、位置移动等，非常的方便，而且自由度很大。本申请实施例中将通过结构配置模块12的GUI进行的操作记作结构可视化变更操作，当用户通过结构配置模块12的GUI进行结构可视化变更操作后，结构配置模块12可以接收到该结构可视化变更操作，这些结构可视化变更操作是用户的个性化的网页结构设计，因此需要将结构可视化变更操作更新到私有结构数据中。私有结构数据是指用户私有的个性化的网页结构数据，不是公用的结构数据。需要说明的是，私有结构数据为对HTML标签内容结构化表述，可以包含如下字段：1.标签名，2.DOM元素的唯一ID，3.父元素的ID，4.该DOM元素作为子元素时，在子元素列表中的位置顺序，5.HTML标签属性的哈希表，用于记录该元素的各项属性及其取值，6.其他便于本方案实现的数据。具体的将结构可视化变更操作更新到私有结构数据中的更新方式为：结构配置模块12根据结构可视化变更操作以及控制模块13提供的应用程序接口对私有结构数据进行更新，其中应用程序接口为操作私有结构数据和私有结构数据的API。
画布模块14将用户正在编辑的网页内容实时呈现在一个符合设计意图的屏幕范围。该模块可以提供网页在手机、平板、桌面浏览器等不同媒介的显示效果。本申请实施例中画布模块14使用一个HTML所定义的内联框架元素(IFrame)作为画布的容器。因为IFrame元素能够实现将另一个页面嵌入到当前的页面中，所以画布模块14会在IFrame内显示用户正在编辑的页面，从而实现带有隔离性的画布环境。画布模块14在私有结构数据和/或私有样式数据发生变动后，会将其映射为上述IFrame内嵌页面的HTML代码(结构代码)和CSS代码(样式代码)；而内嵌页面的HTML代码和CSS代码更新后，浏览器将会刷新页面的显示，从而让用户可以看到当前网页作品最新的效果。
画布模块14还包括第一更新单元、第二更新单元、刷新单元，这三个单元用于实现结构代码和/或样式代码更新内嵌页面的渲染。具体的，第一更新单元，用于按照结构代码对内嵌网页的文档对象模型树结构进行一致性的更新，即画布模块14利用HTML标准定义的、浏览器提供的API，将其控制的Iframe内部的网页文档的DOM进行操作，使得该树状结构的DOM树结构与私有的树状结构数据(私有结构数据)完全一致，实现HTML更新。第二更新单元，用于按照样式代码对内嵌页面的样式数据进行一致性的更新，即画布模块14利用浏览器提供的API，将私有样式数据更新到Iframe内，使得渲染效果与私有样式数据表述完全一致。刷新单元，用于根据更新后的内嵌页面的文档对象模型树结构和/或更新后的内嵌页面的样式数据刷新内嵌页面的显示。
进一步的，在内嵌页面显示刷新后，还需要浏览器API收集各个DOM元素的位置和浏览器对样式数据的最终计算数值，并将这些数据存储起来交给控制模块13用于碰撞检测等内部逻辑。
另外，对于网页可视化编辑的装置的初始化，还需要说明的是，初始化开始后浏览器将装置的各个模块通过脚本语言进行开发的代码文本加载；然后浏览器解析代码文本；其中控制模块13作为最核心的模块，将会被最先执行；控制模块13先将画布模块14初始化，再将画布交互模块15、样式配置模块11、结构配置模块12初始化。画布模块14初始化时，将创建前述的IFrame元素以及其内的页面内容。
从以上的描述中，可以看出，本申请实施例的网页可视化编辑的装置中，样式配置模块接收样式可视化变更操作，并根据样式可视化变更操作以及控制模块提供的应用程序接口对私有样式数据进行更新；和/或，结构配置模块接收结构可视化变更操作，并根据结构可视化变更操作以及应用程序接口对私有结构数据进行更新；控制模块向画布模块发送包括更新后的私有样式数据和/或更新后的私有结构数据的数据变更通知；画布模块将更新后的私有样式数据和/或更新后的私有结构数据映射为内嵌页面的结构代码和/或样式代码，并根据结构代码和/或样式代码更新在内联框架元素(画布的容器)内显示的用户正在编辑的页面的渲染。综上，本申请实施例的网页可视化编辑方式通过样式配置模块、结构配置模块让用户可以实现实现任意符合HTML语言的网页内容结构和符合CSS语言的样式规则，不受固定模板的限制，提供无限制的网页编辑区域；另外这些规则可以由编辑环境去封装提供，用户不必掌握编程技能，非常方便，此外通过画布模块可以实现网页编辑后的显示效果，实现实时预览的效果。
进一步的，如图3所示，网页可视化编辑的装置100还包括画布交互模块15，用于接收对画布上光标指向的文档对象模型节点的交互操作，并根据交互操作以及应用程序接口对私有结构数据和/或私有样式数据进行更新，交互操作包括拖拽、拉伸、旋转中至少一种。
如图2所示，画布交互模块15的交互界面在画布上，用户可以通过鼠标实现对画布区域的元素进行可视化编辑。具体的流程：用户通过移动鼠标的方式，让光标在画布上方游动；控制模块13根据浏览器提供的鼠标事件及其位置，然后利用上述画布模块14反馈的位置信息对光标所在的点和不同元素所对应的矩形进行碰撞检测，从而计算出当前光标所指向的DOM树的节点；画布交互模块15得知当前指向的节点，继而显示出光标悬浮在元素上时相应的交互提示；用户通过点击鼠标左键，在元素对应的区域触发点击事件；在浏览器发出鼠标点击事件后，画布交互模块15将正在操作的DOM节点定位，更新点选效果的交互提示，并且显示拖拽、拉伸、旋转等操作的起始区域；用户在上述的起始区域，按下鼠标左键并且拖动。根据起始区域的不同，操作类型分别是拖拽、拉伸、旋转等；画布交互模块15从浏览器提供的鼠标拖拽事件中得知拖动的方向和距离等信息，实时反馈拖拽、拉伸、旋转等操作的效果；用户释放鼠标左键，操作完毕；画布交互模块15从浏览器中接收到上述鼠标释放事件，得知操作完毕。到此画布交互模块15完成接收对画布上光标指向的文档对象模型节点的交互操作；然后通过控制模块13提供的应用程序接口将上述步骤中定位到的DOM节点以及关联节点在私有结构数据或者私有样式数据进行更新。同样，在私有结构数据或者私有样式数据进行更新后，控制模块13会通知画布模块14，利用新数据刷新显示，即将更新后的私有样式数据和/或更新后的私有结构数据映射为内嵌页面的结构代码和/或样式代码，并根据结构代码和/或样式代码更新内嵌页面的渲染。
进一步的，结构配置模块12，还包括：第一调整单元，用于若结构调整为复制，则将可视化变更操作对应的节点及其后代节点的数据进行复制；第二调整单元，用于若结构调整为粘贴，则将复制后的副本数据***到与可视化变更操作对应的节点或其一个祖先元素下；即将复制后的副本数据***到与可视化变更操作对应的节点下或将复制后的副本数据***到与可视化变更操作对应的节点的某一个祖先元素下，比如：可以将复制后的副本数据作为子元素***与可视化变更操作对应的节点下，这个节点是容器；还可以将复制后的副本数据***与可视化变更操作对应的节点的父节点下，即这个动作是将粘贴的数据作为兄弟元素***，属于对列表里并列的元素复制粘贴；还可以将复制后的副本数据***在根元素下，即作为一个独立的视觉组成去添加到页面；第三调整单元，用于若结构调整为删除，则将可视化变更操作对应的节点及其后代节点的数据进行删除；第四调整单元，用于若结构调整为位置移动，则可视化变更操作对应的节点所在的子树移动到新的父节点下。
进一步的，样式配置模块11还提供了代码式编辑环境，让用户也可以直接使用CSS语言来编写样式规则。
根据本申请实施例，还提供了一种应用于上述装置实施例的网页可视化编辑的方法，如图4所示，该方法包括如下步骤：S201.样式配置模块接收样式可视化变更操作，并根据样式可视化变更操作以及控制模块提供的应用程序接口对私有样式数据进行更新，应用程序接口为操作私有结构数据和私有样式数据的接口；S202.结构配置模块接收结构可视化变更操作，并根据结构可视化变更操作以及应用程序接口对私有结构数据进行更新；S203.控制模块向画布模块发送数据变更通知，数据变更通知包括更新后的私有样式数据和/或更新后的私有结构数据；S204.画布模块将更新后的私有样式数据和/或更新后的私有结构数据映射为内嵌页面的结构代码和/或样式代码，并根据结构代码和/或样式代码更新内嵌页面的渲染，内嵌页面为在内联框架元素内显示的用户正在编辑的页面，内联框架元素为画布的容器。其中，步骤S201和步骤S202在实际应用中，没有固定的先后执行顺序。
其中，步骤S201中样式配置模块接收样式可视化变更操作包括：样式配置模块通过图形用户界面接收对内嵌页面对应的样式控制项的调整，样式控制项的调整包括通过输入值填写、选项选择、开关切换中至少一种方式进行调整。步骤S202中结构配置模块接收结构可视化变更操作包括：结构配置模块接收对内嵌页面对应的文档对象模型树中的节点的结构调整，结构调整包括复制、粘贴、删除、位置移动中的至少一种。
步骤S202中根据结构可视化变更操作以及应用程序接口对私有结构数据进行更新包括：若结构调整为复制，则将可视化变更操作对应的节点及其后代节点的数据进行复制；若结构调整为粘贴，则将复制后的副本数据***到与可视化变更操作对应的节点或其一个祖先元素下；若结构调整为删除，则将可视化变更操作对应的节点及其后代节点的数据进行删除；若结构调整为位置移动，则可视化变更操作对应的节点所在的子树移动到新的父节点下。
进一步的，本申请实施例的网页可视化编辑方法还包括：画布交互模块接收对画布上光标指向的文档对象模型节点的交互操作，并根据交互操作以及应用程序接口对私有结构数据和/或私有样式数据进行更新，交互操作包括拖拽、拉伸、旋转中至少一种。需要说明的是，在画布交互模块对私有结构数据和/或私有样式数据进行更新后，控制模块同样也会向画布模块发送数据变更通知，然后画布模块将更新后的私有样式数据和/或更新后的私有结构数据映射为内嵌页面的结构代码和/或样式代码，并根据结构代码和/或样式代码更新内嵌页面的渲染。
具体的，步骤S204中根据结构代码和/或样式代码更新内嵌页面的渲染包括：按照结构代码对内嵌网页的文档对象模型树结构进行一致性的更新；和/或,按照样式代码对内嵌页面的样式数据进行一致性的更新；根据更新后的内嵌页面的文档对象模型树结构和/或更新后的内嵌页面的样式数据刷新内嵌页面的显示。
另外，对于网页可视化编辑的方法对应的可视化编辑环境的初始化流程为：浏览器将装置的各个模块通过脚本语言进行开发的代码文本加载；然后浏览器解析代码文本；其中控制模块作为最核心的模块，将会被最先执行；控制模块先将画布模块初始化，再将画布交互模块、样式配置模块、结构配置模块初始化。画布模块初始化时，将创建前述的IFrame元素以及其内的页面内容。
具体的，本申请实施例的方法中各步骤的实现的具体过程可参见装置实施例中的相关描述，此处不再赘述。
从以上的描述中，可以看出，本申请实施例的网页可视化编辑的方法中，样式配置模块接收样式可视化变更操作，并根据样式可视化变更操作以及控制模块提供的应用程序接口对私有样式数据进行更新；和/或，结构配置模块接收结构可视化变更操作，并根据结构可视化变更操作以及应用程序接口对私有结构数据进行更新；控制模块向画布模块发送包括更新后的私有样式数据和/或更新后的私有结构数据的数据变更通知；画布模块将更新后的私有样式数据和/或更新后的私有结构数据映射为内嵌页面的结构代码和/或样式代码，并根据结构代码和/或样式代码更新在内联框架元素(画布的容器)内显示的用户正在编辑的页面的渲染。综上，本申请实施例的网页可视化编辑方式通过样式配置模块、结构配置模块让用户可以实现实现任意符合HTML语言的网页内容结构和符合CSS语言的样式规则，不受固定模板的限制，提供无限制的网页编辑区域；另外这些规则可以由编辑环境去封装提供，用户不必掌握编程技能，非常方便，此外通过画布模块可以实现网页编辑后的显示效果，实现实时预览的效果。
需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机***中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
根据本申请实施例，还提供了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行上述方法实施例中的网页可视化编辑的方法。
根据本申请实施例，还提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器执行上述方法实施例中的网页可视化编辑的方法。
显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。
以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种网页可视化编辑的装置，其特征在于，所述装置包括样式配置模块、结构配置模块、控制模块、画布模块：
所述样式配置模块，用于接收样式可视化变更操作，并根据所述样式可视化变更操作以及所述控制模块提供的应用程序接口对私有样式数据进行更新，所述应用程序接口为操作私有结构数据和私有样式数据的接口；
所述结构配置模块，用于接收结构可视化变更操作，并根据所述结构可视化变更操作以及所述应用程序接口对私有结构数据进行更新；
所述控制模块，用于提供所述应用程序接口，还用于在所述样式配置模块对私有样式数据进行更新和/或所述结构配置模块对私有结构数据进行更新后向所述画布模块发送数据变更通知，所述数据变更通知包括更新后的私有样式数据和/或更新后的私有结构数据；
所述画布模块，用于将内联框架元素作为画布的容器，在内联框架元素内显示内嵌页面，还用于在接收到所述控制模块发送的所述数据变更通知后，将更新后的私有样式数据和/或更新后的私有结构数据映射为所述内嵌页面的结构代码和/或样式代码，并根据所述结构代码和/或样式代码更新所述内嵌页面的渲染，所述内嵌页面为用户正在编辑的页面。
2.根据权利要求1所述的网页可视化编辑的装置，其特征在于，所述样式配置模块还用于：通过图形用户界面接收对所述内嵌页面对应的样式控制项的调整，所述样式控制项的调整包括通过输入值填写、选项选择、开关切换中至少一种方式进行调整。
3.根据权利要求1所述的网页可视化编辑的装置，其特征在于，所述结构配置模块还用于：结构配置模块接收对所述内嵌页面对应的文档对象模型树中的节点的结构调整，所述结构调整包括复制、粘贴、删除、位置移动中的至少一种。
4.根据权利要求3所述的网页可视化编辑的装置，其特征在于，所述结构配置模块，包括：
第一调整单元，用于若所述结构调整为复制，则将所述可视化变更操作对应的节点及其后代节点的数据进行复制；
第二调整单元，用于若所述结构调整为粘贴，则将复制后的副本数据***到与所述可视化变更操作对应的节点或其一个祖先元素下；
第三调整单元，用于若所述结构调整为删除，则将所述可视化变更操作对应的节点及其后代节点的数据进行删除；
第四调整单元，用于若所述结构调整为位置移动，则所述可视化变更操作对应的节点所在的子树移动到新的父节点下。
5.根据权利要求1所述的网页可视化编辑的装置，其特征在于，所述装置还包括：
画布交互模块，用于接收对所述画布上光标指向的文档对象模型节点的交互操作，并根据所述交互操作以及所述应用程序接口对所述私有结构数据和/或私有样式数据进行更新，所述交互操作包括拖拽、拉伸、旋转中至少一种。
6.根据权利要求5所述的网页可视化编辑的装置，其特征在于，所述控制模块，还用于在所述画布交互模块对私有样式数据进行更新和/或私有结构数据进行更新后向所述画布模块发送所述数据变更通知。
7.根据权利要求1所述的网页可视化编辑的装置，其特征在于，所述画布模块包括：
第一更新单元，用于按照所述结构代码对所述内嵌网页的文档对象模型树结构进行一致性的更新；
第二更新单元，用于按照所述样式代码对所述内嵌页面的样式数据进行一致性的更新；
刷新单元，用于根据更新后的内嵌页面的文档对象模型树结构和/或更新后的内嵌页面的样式数据刷新所述内嵌页面的显示。
8.一种网页可视化编辑的方法，其特征在于，所述方法包括：
样式配置模块接收样式可视化变更操作，并根据所述样式可视化变更操作以及控制模块提供的应用程序接口对私有样式数据进行更新，所述应用程序接口为操作私有结构数据和私有样式数据的接口；和/或，
结构配置模块接收结构可视化变更操作，并根据所述结构可视化变更操作以及所述应用程序接口对私有结构数据进行更新；
控制模块向画布模块发送数据变更通知，所述数据变更通知包括更新后的私有样式数据和/或更新后的私有结构数据；
画布模块将更新后的私有样式数据和/或更新后的私有结构数据映射为内嵌页面的结构代码和/或样式代码，并根据所述结构代码和/或样式代码更新所述内嵌页面的渲染，所述内嵌页面为在内联框架元素内显示的用户正在编辑的页面，所述内联框架元素为画布的容器。
9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行权利要求8所述的网页可视化编辑的方法。
10.一种电子设备，其特征在于，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器执行权利要求8所述的网页可视化编辑的方法。
CN202210406394.5A 2022-04-18 2022-04-18 网页可视化编辑的装置及方法 Pending CN114780077A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210406394.5A CN114780077A (zh) 2022-04-18 2022-04-18 网页可视化编辑的装置及方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210406394.5A CN114780077A (zh) 2022-04-18 2022-04-18 网页可视化编辑的装置及方法

Publications (1)

Publication Number Publication Date
CN114780077A true CN114780077A (zh) 2022-07-22

Family

ID=82431877

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210406394.5A Pending CN114780077A (zh) 2022-04-18 2022-04-18 网页可视化编辑的装置及方法

Country Status (1)

Country Link
CN (1) CN114780077A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115562652A (zh) * 2022-11-24 2023-01-03 金现代信息产业股份有限公司 用于低代码开发平台的组件样式处理方法及***
CN115577570A (zh) * 2022-11-21 2023-01-06 北京尽微致广信息技术有限公司 一种画布图层的处理方法及装置、电子设备、存储介质

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115577570A (zh) * 2022-11-21 2023-01-06 北京尽微致广信息技术有限公司 一种画布图层的处理方法及装置、电子设备、存储介质
CN115562652A (zh) * 2022-11-24 2023-01-03 金现代信息产业股份有限公司 用于低代码开发平台的组件样式处理方法及***
CN115562652B (zh) * 2022-11-24 2023-08-15 金现代信息产业股份有限公司 用于低代码开发平台的组件样式处理方法及***

Similar Documents

Publication Publication Date Title
JP7354294B2 (ja) 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法
CN107844297B (zh) 一种数据可视化实现***及方法
CA2773152C (en) A method for users to create and edit web page layouts
US11216253B2 (en) Application prototyping tool
US8448074B2 (en) Method and apparatus for providing portioned web pages in a graphical user interface
US8875032B2 (en) System and method for dynamic configuration of components of web interfaces
US10318126B2 (en) Data-driven schema for describing and executing management tasks in a graphical user interface
CN114780077A (zh) 网页可视化编辑的装置及方法
CN101661506B (zh) 在本地定制导航页的方法、***和浏览器
KR20120139716A (ko) 공유가능한 사용자 인터페이스를 이용해 정보를 구성하는 방법 및 시스템
US11126787B2 (en) Generating responsive content from an electronic document
US9886465B2 (en) System and method for rendering of hierarchical data structures
US11868598B2 (en) Generating and modifying content using data structures
US20040133595A1 (en) Generation of persistent document object models
US20090183062A1 (en) Activatable table within webpages in a recursive browser system
CN111199568B (zh) 矢量图的绘制方法、装置及计算机可读存储介质
KR101114173B1 (ko) 마크업 언어 문서 내의 도구틀을 위한 시스템 및 방법
WO2014120287A2 (en) Creating a communication editable in a browser independent of platform and operating system
CN115309476A (zh) 一种基于浏览器的ofd文件显示和编辑方法
KR20140137630A (ko) 위젯 저작 시스템 및 방법
CN114003226A (zh) 一种分层分布式图形设计***
CN113626031A (zh) web页面实现方法、装置、电子设备及存储介质
CN115661311A (zh) 一种滚动特效制作方法、装置、设备及介质
CN117407618A (zh) 文档处理方法、装置及计算机设备、存储介质、程序产品
CN114385153A (zh) 界面编辑方法、编辑终端及计算机可读存储介质

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