CN113282852A - Method and device for editing webpage - Google Patents

Abstract

The application discloses a method and a device for editing a webpage, and relates to the technical field of computers. One embodiment of the method comprises: determining the container in the empty state as a canvas; sequentially editing the elements to be edited on the canvas according to the priority of the elements to be edited to generate a rendering component; and rendering on the webpage according to the rendering component. The implementation method can edit different types of elements to be edited, avoids the technical defects that in the prior art, only pictures can be adopted to edit the webpage and characters and shapes cannot be edited, and further achieves the technical effect of enriching the diversity of the pictures in the webpage; the technical means of sequentially editing the elements to be edited on the canvas to generate the rendering assembly through the priority of the elements to be edited solves the technical defects that only the layer corresponding to one picture can be edited and the layer is inconvenient to be edited for the second time in the prior art.

Description

Method and device for editing webpage

Technical Field

The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for editing a web page.

Background

In the prior art, a canvas (HTML5 new tags) is often used to load pictures when generating pictures in a web page, edit canvas of the canvas, and finally generate picture codes.

In the process of implementing the present application, the inventor finds that at least the following problems exist in the prior art:

1. the prior art can not store data except pictures;

2. the layer of the prior art is only one layer, which is inconvenient for secondary editing.

Disclosure of Invention

In view of this, embodiments of the present application provide a method and an apparatus for editing a web page, which can solve the technical defects that only a layer corresponding to one picture can be edited and the layer is inconvenient to be edited for the second time in the prior art.

To achieve the above object, according to an aspect of an embodiment of the present application, there is provided a method of editing a web page, including:

determining the container in the empty state as a canvas;

sequentially editing the elements to be edited on the canvas according to the priority of the elements to be edited to generate a rendering component;

and rendering the webpage according to the rendering component.

Optionally, sequentially editing the elements to be edited on the canvas according to the priority of the elements to be edited, before generating the rendering component, the method includes: acquiring a first picture; zooming and loading the first picture onto the canvas to form a first layer;

according to the priority of the elements to be edited, the elements to be edited are sequentially edited on the canvas, and a rendering assembly is generated, wherein the method comprises the following steps:

determining the order of the priority levels of the elements to be edited from small to large;

generating a layer corresponding to each element to be edited according to the sequence of the priority levels of the elements to be edited from small to large;

editing the layer corresponding to each element to be edited;

and combining the layers corresponding to the elements to be edited after the editing is finished to generate a rendering assembly.

Optionally, editing a layer corresponding to an element to be edited, where the editing includes at least one of:

dragging the layer and changing the layout information of the layer;

placing an input box in the layer, and inputting characters in the input box;

wherein the layout information includes: size, location, hierarchy, and/or shape of the element to be edited.

Optionally, the attributes of the rendering component include:

and the horizontal and vertical coordinates corresponding to each image layer are converted into percentages by taking the width and the height of the picture as the reference from pixels.

According to another aspect of the embodiments of the present application, there is provided an apparatus for editing a web page, including:

the canvas determining module is used for determining the container in the vacant state as the canvas;

the component generation module is used for sequentially editing the elements to be edited on the canvas according to the priority of the elements to be edited to generate a rendering component;

and the rendering module is used for rendering on the webpage according to the rendering component.

Optionally, comprising: the first layer generation module is used for sequentially editing the elements to be edited on the canvas according to the priority of the elements to be edited, and before generating the rendering component: acquiring a first picture; zooming and loading the first picture onto the canvas to form a first layer;

according to the priority of the elements to be edited, the elements to be edited are sequentially edited on the canvas, and a rendering assembly is generated, wherein the method comprises the following steps:

determining the order of the priority levels of the elements to be edited from small to large;

generating a layer corresponding to each element to be edited according to the sequence of the priority levels of the elements to be edited from small to large;

editing the layer corresponding to each element to be edited;

and combining the layers corresponding to the elements to be edited after the editing is finished to generate a rendering assembly.

Optionally, editing a layer corresponding to an element to be edited, where the editing includes at least one of:

dragging the layer and changing the layout information of the layer;

placing an input box in the layer, and inputting characters in the input box;

wherein the layout information includes: size, location, hierarchy, and/or shape of the element to be edited.

Optionally, the attributes of the rendering component include:

and the horizontal and vertical coordinates corresponding to each image layer are converted into percentages by taking the width and the height of the picture as the reference from pixels.

According to another aspect of the embodiments of the present application, there is provided an electronic device for editing a web page, including:

one or more processors;

a storage device for storing one or more programs,

when executed by the one or more processors, cause the one or more processors to implement the method for editing a web page provided herein.

According to yet another aspect of embodiments of the present application, there is provided a computer-readable medium on which a computer program is stored, the program, when executed by a processor, implementing a method for editing a web page provided by the present application.

One embodiment of the above invention has the following advantages or benefits:

in some embodiments of the application, different types of elements to be edited can be edited, so that the technical defects that in the prior art, only pictures can be used for editing the webpage and characters and shapes cannot be edited are overcome, and the technical effect of enriching the diversity of the pictures in the webpage is achieved.

In addition, in some embodiments of the application, the elements to be edited are sequentially edited on the canvas through the priority of the elements to be edited to generate a technical means of rendering the assembly, so that the technical defects that only the layer corresponding to one picture can be edited and the layer is inconvenient to be edited for the second time in the prior art are overcome.

Further effects of the above-mentioned non-conventional alternatives will be described below in connection with the embodiments.

Drawings

The drawings are included to provide a further understanding of the application and are not to be construed as limiting the application. Wherein:

FIG. 1 is a schematic diagram of a main flow of a method for editing a web page according to an embodiment of the present application;

FIG. 2 is a 3D perspective view of a rendering assembly;

FIG. 3 is a schematic diagram of a detailed flow of a method of editing a web page according to an embodiment of the present application;

FIG. 4 is a schematic diagram of the main modules of an apparatus for editing a web page according to an embodiment of the present application;

FIG. 5 is an exemplary system architecture diagram to which embodiments of the present application may be applied;

fig. 6 is a schematic structural diagram of a computer system suitable for implementing the terminal device or the server according to the embodiment of the present application.

Detailed Description

The following description of the exemplary embodiments of the present application, taken in conjunction with the accompanying drawings, includes various details of the embodiments of the application for the understanding of the same, which are to be considered exemplary only. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present application. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.

Fig. 1 is a schematic diagram of a main flow of a method for editing a web page according to an embodiment of the present application, as shown in fig. 1, including:

step S101, determining a container in an empty state as a canvas;

step S102, editing the elements to be edited on the canvas in sequence according to the priority of the elements to be edited to generate a rendering component;

and S103, rendering on the webpage according to the rendering component.

The purpose of the step S101 is to prepare an empty canvas to facilitate the editing of the elements to be edited subsequently on the canvas.

The type (type) of the element to be edited may include, but is not limited to: characters, shapes, pictures. The method and the device can edit different types of elements to be edited, avoid the technical defects that in the prior art, only pictures can be adopted to edit the webpage and characters and shapes cannot be edited, and further achieve the technical effect of enriching the diversity of the pictures in the webpage.

The technical means of sequentially editing the elements to be edited on the canvas to generate the rendering assembly through the priority of the elements to be edited solves the technical defects that only the layer corresponding to one picture can be edited and the layer is inconvenient to be edited for the second time in the prior art.

Specifically, in the optional embodiment of the present application, a technical means of setting a plurality of layers may be used, that is, one element to be edited is edited in each layer, and a technical means of setting a plurality of layers may be used to reduce cost for secondary editing, and particularly, when a deletion operation is performed, only a corresponding layer needs to be deleted. When the photos in the rendering assembly are replaced, the picture links can be replaced. Wherein the rendering component is stored in a background database, thereby facilitating data conversion. More data can be stored by adopting the technical means of editing by a plurality of image layers, great convenience is provided for automatically replacing elements to be edited, and the technical defects of high cost and low efficiency caused by manual replacement of a user are avoided.

The rendering component is configured to convert the x, y coordinates and the width and height of each layer from pixel units to percentages based on the width and height of the picture during the export/save operation, so that the picture can be optionally scaled in the rendering step S103.

In the development project, if the automatic updating requirement exists, the pictures can be replaced without user operation, and the pictures only need to be linked for replacement according to the existing background database.

Optionally, sequentially editing the elements to be edited on the canvas according to the priority of the elements to be edited, before generating the rendering component, the method includes: acquiring a first picture; zooming and loading the first picture onto the canvas to form a first layer;

sequentially editing the elements to be edited on the canvas according to the priorities (indexes) of the elements to be edited to generate a rendering assembly, comprising:

the editing process can firstly determine the order of the priority of the elements to be edited from small to large;

generating a layer corresponding to each element to be edited according to the sequence of the priority levels of the elements to be edited from small to large;

editing the layer corresponding to each element to be edited;

and combining the layers corresponding to the elements to be edited after the editing is finished to generate a rendering assembly.

FIG. 2 is a 3D perspective view of a rendering assembly; specifically, a 3D perspective view corresponding to the rendering component is shown in fig. 2. In this embodiment, there are 3 elements to be edited, which are respectively pictures, texts and graphics according to the priority ranking. Further, as shown in fig. 2, thelayer 1 is a picture layer; thelayer 2 is a text layer; the layer 3 is a picture layer.

Optionally, editing a layer corresponding to an element to be edited, where the editing includes at least one of:

dragging the layer and changing the layout information of the layer, wherein the dragging process can change the shape of the layout information to change the width and height attributes of the shape;

an input box (Dom element) is placed in the layer, and characters are input in the input box, so that the technical effect of conveniently customizing various layers for editing and using is achieved;

wherein the layout information includes: size, location, hierarchy, and/or shape of the element to be edited.

The technical effect of layering each element can be realized by carrying out the technical means of superposing each layer, so that the technical effects of conveniently and quickly rendering and reducing the modification cost can be achieved by only modifying the corresponding layer when the webpage is modified.

The text layer can be embedded with an input box, when the layer is clicked, the input box is actively focused to the input box, characters can be input by a user, when the outside of the text layer is clicked, the input box is out of focus, the input box is hidden, and the input characters are displayed at the same time.

Optionally, the attributes of the rendering component include:

the horizontal and vertical coordinates (x, y coordinates) corresponding to each image layer are converted into percentages by taking the width and the height of the picture as the reference, and then the size change of the rendering assembly on the webpage can be freely controlled.

The attributes of the rendering component may further include: transform (transform) styles, where transform properties include displacement, scaling, deformation, and the like. One of the transformation patterns css is used for controlling the position, width and height, deformation and scaling of the element. The css is used for controlling a text input control in the language input webpage of the typesetting of the webpage.

The rendering process is performed according to attributes of the rendering component, wherein the type corresponding to each layer is determined according to type data, and specifically, if the type of the element to be edited is a shape, the element to be edited contains attributes such as a color of a frame and a thickness of the frame, so that the element to be edited can be processed in the page according to the determined type of each layer. Where each layer is multiplexed.

The rendering component further includes content of each image layer, specifically, if an element corresponding to one image layer is a picture, the corresponding content is a URL of the picture, if the content corresponding to the one image layer can be set as a text, the corresponding content can be set as text content, and if the element corresponding to the one image layer is a shape, the corresponding content can be set as a null.

Each layer in the rendering assembly corresponds to a field for data storage, and the data storage mode can be stored in a JSON format.

FIG. 3 is a schematic diagram of a detailed flow of a method of editing a web page according to an embodiment of the present application;

step S301, determining a container in an empty state as a canvas;

step S302, loading a picture as a first layer to the canvas;

step S303, editing the elements to be edited on the canvas in sequence according to the priority of the elements to be edited to generate a rendering component; the rendering component comprises user-defined data, text content, picture URL and layout information;

step S304, exporting and/or storing the rendering components, wherein the export information comprises x and y coordinates of each image layer, and the width and the height are converted into percentages by taking the width and the height of the picture as references from pixel units;

and S305, rendering on the webpage according to the rendering component.

FIG. 4 is a schematic diagram of the main modules of an apparatus for editing a web page according to an embodiment of the present application; according to still another aspect of the embodiments of the present application, there is provided anapparatus 400 for editing a web page, including:

acanvas determining module 401, configured to determine a container in an empty state as a canvas;

thecomponent generation module 402 is configured to sequentially edit the elements to be edited on the canvas according to the priority of the elements to be edited, and generate a rendering component;

and arendering module 403, configured to render on the webpage according to the rendering component.

Fig. 5 illustrates anexemplary system architecture 500 to which the method of editing a web page or the apparatus for editing a web page of the embodiments of the present application may be applied.

As shown in fig. 5, thesystem architecture 500 may includeterminal devices 501, 502, 503, anetwork 504, and aserver 505. Thenetwork 504 serves to provide a medium for communication links between theterminal devices 501, 502, 503 and theserver 505.Network 504 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.

The user may use theterminal devices 501, 502, 503 to interact with aserver 505 over anetwork 504 to receive or send messages or the like. Theterminal devices 501, 502, 503 may have installed thereon various communication client applications, such as shopping-like applications, web browser applications, search-like applications, instant messaging tools, mailbox clients, social platform software, etc. (by way of example only).

Theterminal devices 501, 502, 503 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like.

Theserver 505 may be a server providing various services, such as a background management server (for example only) providing support for shopping websites browsed by users using theterminal devices 501, 502, 503. The backend management server may analyze and perform other processing on the received data such as the product information query request, and feed back a processing result (for example, target push information, product information — just an example) to the terminal device.

It should be noted that the method for editing a web page provided in the embodiment of the present application is generally executed by theserver 505, and accordingly, the apparatus for editing a web page is generally disposed in theserver 505.

It should be understood that the number of terminal devices, networks, and servers in fig. 5 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.

Referring now to FIG. 6, shown is a block diagram of acomputer system 600 suitable for use in implementing a terminal device of an embodiment of the present application. The terminal device shown in fig. 6 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present application.

As shown in fig. 6, thecomputer system 600 includes a Central Processing Unit (CPU)601 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM)602 or a program loaded from astorage section 608 into a Random Access Memory (RAM) 603. In theRAM 603, various programs and data necessary for the operation of thesystem 600 are also stored. TheCPU 601,ROM 602, andRAM 603 are connected to each other via abus 604. An input/output (I/O)interface 605 is also connected tobus 604.

The following components are connected to the I/O interface 605: aninput portion 606 including a keyboard, a mouse, and the like; anoutput portion 607 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; astorage section 608 including a hard disk and the like; and acommunication section 609 including a network interface card such as a LAN card, a modem, or the like. Thecommunication section 609 performs communication processing via a network such as the internet. Thedriver 610 is also connected to the I/O interface 605 as needed. Aremovable medium 611 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on thedrive 610 as necessary, so that a computer program read out therefrom is mounted in thestorage section 608 as necessary.

In particular, according to embodiments disclosed herein, the processes described above with reference to the flow diagrams may be implemented as computer software programs. For example, embodiments disclosed herein include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through thecommunication section 609, and/or installed from theremovable medium 611. The above-described functions defined in the system of the present application are executed when the computer program is executed by the Central Processing Unit (CPU) 601.

It should be noted that the computer readable medium shown in the present application may be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present application, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In this application, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.

The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The modules described in the embodiments of the present application may be implemented by software or hardware. The described modules may also be provided in a processor, which may be described as: a processor includes a sending module, an obtaining module, a determining module, and a first processing module. The names of these modules do not form a limitation on the modules themselves in some cases, and for example, the sending module may also be described as a "module sending a picture acquisition request to a connected server".

As another aspect, the present application also provides a computer-readable medium, which may be contained in the apparatus described in the above embodiments; or may be separate and not incorporated into the device. The computer readable medium carries one or more programs which, when executed by a device, cause the device to comprise:

determining the container in the empty state as a canvas;

sequentially editing the elements to be edited on the canvas according to the priority of the elements to be edited to generate a rendering component;

and rendering on the webpage according to the rendering component.

According to the technical scheme of the embodiment of the application, the following beneficial effects can be achieved:

in some embodiments of the application, different types of elements to be edited can be edited, so that the technical defects that in the prior art, only pictures can be used for editing the webpage and characters and shapes cannot be edited are overcome, and the technical effect of enriching the diversity of the pictures in the webpage is achieved.

In addition, in some embodiments of the application, the elements to be edited are sequentially edited on the canvas through the priority of the elements to be edited to generate a technical means of rendering the assembly, so that the technical defects that only the layer corresponding to one picture can be edited and the layer is inconvenient to be edited for the second time in the prior art are overcome.

The above-described embodiments should not be construed as limiting the scope of the present application. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions can occur, depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims (10)

1. A method of editing a web page, comprising:

determining the container in the empty state as a canvas;

sequentially editing the elements to be edited on the canvas according to the priority of the elements to be edited to generate a rendering component;

and rendering on the webpage according to the rendering component.

2. The method according to claim 1, wherein before editing the elements to be edited on the canvas in sequence according to the priority of the elements to be edited and generating the rendering component, the method comprises: acquiring a first picture; zooming and loading the first picture onto the canvas to form a first layer;

according to the priority of the elements to be edited, the elements to be edited are sequentially edited on the canvas, and a rendering assembly is generated, wherein the method comprises the following steps:

determining the order of the priority levels of the elements to be edited from small to large;

generating a layer corresponding to each element to be edited according to the sequence of the priority levels of the elements to be edited from small to large;

editing the layer corresponding to each element to be edited;

and combining the layers corresponding to the elements to be edited after the editing is finished to generate a rendering assembly.

3. The method according to claim 2, wherein editing the layer corresponding to an element to be edited includes at least one of:

dragging the layer and changing the layout information of the layer;

placing an input box in the layer, and inputting characters in the input box;

wherein the layout information includes: size, location, hierarchy, and/or shape of the element to be edited.

4. The method of claim 2, wherein the attributes of the rendering component comprise:

and the horizontal and vertical coordinates corresponding to each image layer are converted into percentages by taking the width and the height of the picture as the reference from pixels.

5. An apparatus for editing a web page, comprising:

the canvas determining module is used for determining the container in the vacant state as the canvas;

the component generation module is used for sequentially editing the elements to be edited on the canvas according to the priority of the elements to be edited to generate a rendering component;

and the rendering module is used for rendering on the webpage according to the rendering component.

6. The apparatus of claim 5, comprising: the first layer generation module is used for sequentially editing the elements to be edited on the canvas according to the priority of the elements to be edited, and before generating the rendering component: acquiring a first picture; zooming and loading the first picture onto the canvas to form a first layer;

according to the priority of the elements to be edited, the elements to be edited are sequentially edited on the canvas, and a rendering assembly is generated, wherein the method comprises the following steps:

determining the order of the priority levels of the elements to be edited from small to large;

generating a layer corresponding to each element to be edited according to the sequence of the priority levels of the elements to be edited from small to large;

editing the layer corresponding to each element to be edited;

and combining the layers corresponding to the elements to be edited after the editing is finished to generate a rendering assembly.

7. The apparatus according to claim 6, wherein editing the layer corresponding to an element to be edited includes at least one of:

dragging the layer and changing the layout information of the layer;

placing an input box in the layer, and inputting characters in the input box;

wherein the layout information includes: size, location, hierarchy, and/or shape of the element to be edited.

8. The apparatus of claim 6, wherein the attributes of the rendering component comprise:

and the horizontal and vertical coordinates corresponding to each image layer are converted into percentages by taking the width and the height of the picture as the reference from pixels.

9. An electronic device for editing a web page, comprising:

one or more processors;

a storage device for storing one or more programs,

the one or more programs, when executed by the one or more processors, implement the method of any of claims 1-4.

10. A computer-readable medium, on which a computer program is stored, which, when being executed by a processor, carries out the method according to any one of claims 1-4.

Images