Method and device for editing web page

Abstract

The present application discloses a method and device for editing a web page, and relates to the field of computer technology. A specific implementation of the method includes: determining a container in an empty state as a canvas; editing the elements to be edited on the canvas in turn according to the priority of the elements to be edited, and generating a rendering component; rendering on the web page according to the rendering component. This implementation can edit different types of elements to be edited, avoiding the technical defects of the prior art that only pictures can be used to edit web pages, but text and shapes cannot be edited, thereby achieving the technical effect of enriching the diversity of pictures in web pages; by using the priority of the elements to be edited, the elements to be edited are edited on the canvas in turn, and the technical means of generating a rendering component solves the technical defects of the prior art that only a layer corresponding to a picture can be edited, and it is not convenient to perform secondary editing on the layer.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method and device for editing a web page. Background Art

[0002] In the prior art, when generating images in web pages, canvas (a new tag added in HTML5) is often used to load images, edit the canvas, and finally generate image code.

[0003] In the process of implementing this application, the inventors found that there are at least the following problems in the prior art:

[0004] 1. Existing technologies cannot store data other than images;

[0005] 2. The prior art has only one layer, which is not convenient for secondary editing. Summary of the invention

[0006] In view of this, the embodiments of the present application provide a method and device for editing a web page, which can solve the technical defects of the prior art that only a layer corresponding to a picture can be edited and it is inconvenient to perform secondary editing on the layer.

[0007] To achieve the above objective, according to one aspect of an embodiment of the present application, a method for editing a webpage is provided, comprising:

[0008] A container in an empty state is determined as a canvas;

[0009] Edit the elements to be edited on the canvas in sequence according to the priorities of the elements to be edited, and generate rendering components;

[0010] According to the rendering component, rendering is performed on the web page.

[0011] Optionally, the elements to be edited are edited on the canvas in sequence according to the priorities of the elements to be edited, before generating the rendering component, including: acquiring a first image; scaling and loading the first image onto the canvas to form a first layer;

[0012] According to the priorities of the elements to be edited, the elements to be edited are edited on the canvas in sequence to generate a rendering component, including:

[0013] Determine the order of priority of the elements to be edited from small to large;

[0014] Generate a layer corresponding to each element to be edited according to the order of priority of the elements to be edited from small to large;

[0015] Editing the layer corresponding to each element to be edited;

[0016] After the editing is completed, the layers corresponding to the elements to be edited are combined to generate a rendering component.

[0017] Optionally, editing a layer corresponding to an element to be edited includes at least one of the following:

[0018] Drag the layer to change the layout information of the layer;

[0019] Placing an input box in the layer, and inputting text in the input box;

[0020] The layout information includes: the size, position, level, and / or shape of the element to be edited.

[0021] Optionally, the properties of the rendering component include:

[0022] The horizontal and vertical coordinates corresponding to each layer are converted from pixels to percentages based on the width and height of the image.

[0023] According to another aspect of the embodiments of the present application, there is provided a device for editing a webpage, comprising:

[0024] A canvas determination module, used for determining a container in an empty state as a canvas;

[0025] A component generation module, used to edit the elements to be edited on the canvas in order according to the priorities of the elements to be edited, and generate rendering components;

[0026] A rendering module is used to render on a web page according to the rendering component.

[0027] Optionally, it includes: a first layer generation module, which is used to edit the elements to be edited on the canvas in sequence according to the priority of the elements to be edited, before generating the rendering component: obtaining a first image; scaling and loading the first image onto the canvas to form a first layer;

[0028] According to the priorities of the elements to be edited, the elements to be edited are edited on the canvas in sequence to generate a rendering component, including:

[0029] Determine the order of priority of the elements to be edited from small to large;

[0030] Generate a layer corresponding to each element to be edited according to the order of priority of the elements to be edited from small to large;

[0031] Editing the layer corresponding to each element to be edited;

[0032] After the editing is completed, the layers corresponding to the elements to be edited are combined to generate a rendering component.

[0033] Optionally, editing a layer corresponding to an element to be edited includes at least one of the following:

[0034] Drag the layer to change the layout information of the layer;

[0035] Placing an input box in the layer, and inputting text in the input box;

[0036] The layout information includes: the size, position, level, and / or shape of the element to be edited.

[0037] Optionally, the properties of the rendering component include:

[0038] The horizontal and vertical coordinates corresponding to each layer are converted from pixels to percentages based on the width and height of the image.

[0039] According to another aspect of an embodiment of the present application, there is provided an electronic device for editing a webpage, comprising:

[0040] one or more processors;

[0041] a storage device for storing one or more programs,

[0042] When the one or more programs are executed by the one or more processors, the one or more processors implement the web page editing method provided by the present application.

[0043] According to another aspect of an embodiment of the present application, a computer-readable medium is provided, on which a computer program is stored, and when the program is executed by a processor, the method for editing a web page provided by the present application is implemented.

[0044] One embodiment of the above invention has the following advantages or beneficial effects:

[0045] In some embodiments of the present application, different types of elements to be edited can be edited, avoiding the technical defect in the prior art that only pictures can be used to edit web pages, but text and shapes cannot be edited, thereby achieving the technical effect of enriching the diversity of pictures in web pages.

[0046] In some embodiments of the present application, the elements to be edited are edited on the canvas in sequence according to their priorities, and a technical means of generating a rendering component solves the technical defect that the prior art can only edit the layer corresponding to one image and is not convenient for secondary editing of the layer.

[0047] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with the specific implementation manner. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] The accompanying drawings are used to better understand the present application and do not constitute an improper limitation on the present application.

[0049] Figure 1 is a schematic diagram of the main process of a method for editing a web page according to an embodiment of the present application;

[0050] Figure 2 is a 3D perspective view of the rendered component;

[0051] Figure 3 is a schematic diagram of a specific process of a method for editing a webpage according to an embodiment of the present application;

[0052] Figure 4 is a schematic diagram of main modules of an apparatus for editing a web page according to an embodiment of the present application;

[0053] Figure 5 is an exemplary system architecture diagram to which the embodiments of the present application can be applied;

[0054] Figure 6 It is a structural diagram of a computer system of a terminal device or server suitable for implementing an embodiment of the present application. DETAILED DESCRIPTION

[0055] The following is a description of exemplary embodiments of the present application in conjunction with the accompanying drawings, including various details of the embodiments of the present application to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present application. Similarly, for the sake of clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0056] Figure 1 is a schematic diagram of the main process of a method for editing a web page according to an embodiment of the present application, such as Figure 1 As shown, including:

[0057] Step S101: Determine a container in an empty state as a canvas;

[0058] Step S102: Edit the elements to be edited on the canvas in sequence according to the priorities of the elements to be edited, and generate rendering components;

[0059] Step S103: Rendering is performed on the web page according to the rendering component.

[0060] The purpose of the above step S101 is to prepare an empty canvas to facilitate the subsequent editing of the element to be edited on the canvas.

[0061] The type of the element to be edited may include, but is not limited to, text, shape, and picture. In the present application, different types of elements to be edited can be edited, thus avoiding the technical defect that only pictures can be used to edit web pages, but text and shapes cannot be edited in the prior art, thereby achieving the technical effect of enriching the diversity of pictures in web pages.

[0062] By using the priority of the elements to be edited, the elements to be edited are edited on the canvas in turn to generate a rendering component, which solves the technical defect that the prior art can only edit the layer corresponding to one image and is not convenient for secondary editing of the layer.

[0063] Specifically, in an optional embodiment of the present application, by setting a technical means of multiple layers, that is, editing an element to be edited in each layer, the technical means of setting multiple layers can reduce the cost for secondary editing, especially when performing a deletion operation, only the corresponding layer needs to be deleted. When the photo in the rendering component is replaced, the picture link can be replaced. The rendering component is stored in the background database, which facilitates data conversion. By using the technical means of editing in multiple layers, more data can be stored, which provides great convenience for the automatic replacement of the elements to be edited, and avoids the technical defects of high cost and low efficiency caused by manual replacement by users.

[0064] The rendering component is used to convert the x, y coordinates, width and height of each layer from pixel units to percentages based on the width and height of the image during export / save operations, so that the image can be scaled freely during rendering in step S103.

[0065] In the development project, if there is a need for automated updates, images can be replaced without user operation. You only need to link the images to the existing backend database.

[0066] Optionally, the elements to be edited are edited on the canvas in sequence according to the priorities of the elements to be edited, before generating the rendering component, including: acquiring a first image; scaling and loading the first image onto the canvas to form a first layer;

[0067] According to the priority (index) of the elements to be edited, the elements to be edited are edited on the canvas in sequence to generate a rendering component, including:

[0068] The editing process may first determine the order of priority of the elements to be edited from small to large;

[0069] Generate a layer corresponding to each element to be edited according to the order of priority of the elements to be edited from small to large;

[0070] Editing the layer corresponding to each element to be edited;

[0071] After the editing is completed, the layers corresponding to the elements to be edited are combined to generate a rendering component.

[0072] Figure 2 is a 3D perspective view of a rendering component; specifically, the 3D perspective view corresponding to the rendering component is as follows Figure 2 In this embodiment, there are three elements to be edited, which are pictures, texts and graphics according to their priorities. Figure 2 As shown, layer 1 is the image layer; layer 2 is the text layer; and layer 3 is the image layer.

[0073] Optionally, editing a layer corresponding to an element to be edited includes at least one of the following:

[0074] Drag the layer to change 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;

[0075] An input box (Dom element) is placed in the layer, and text is input in the input box, thereby achieving a technical effect of conveniently customizing various layers for editing;

[0076] The layout information includes: the size, position, level, and / or shape of the element to be edited.

[0077] By superimposing various layers, the technical effect of layering each element can be achieved, so that when making changes to the web page, only the corresponding layer needs to be changed, thereby achieving the technical effect of convenient and fast rendering and reducing modification costs.

[0078] Among them, the text layer can be embedded with an input box. When the layer is clicked, it will actively focus on the input box, allowing the user to enter text. When the outside of the text layer is clicked, the input box loses focus and is hidden, while the input text is displayed.

[0079] Optionally, the properties of the rendering component include:

[0080] The horizontal and vertical coordinates (x, y coordinates) corresponding to each layer are converted from pixels to percentages based on the width and height of the image, so that the size of the rendering component rendered on the web page can be freely controlled.

[0081] The properties of the rendering component may also include: a transform style, wherein the transform properties include displacement, scaling, deformation, etc. The transform style is a style in CSS, which is used to control the position, width, height, deformation, and scaling of elements. CSS is used to control the text input control in the language input web page of the layout of the web page.

[0082] The rendering process is performed according to the properties of the rendering component, and the type of each layer is determined according to the type data. Specifically, if the type of the element to be edited is a shape, it contains attributes such as the color and thickness of the border, so each layer can be processed separately on the page according to the type of the layer. Each layer can be reused.

[0083] The rendering component also includes the content of each layer. Specifically, if the element corresponding to a layer is a picture, the corresponding content is the URL of a picture. If the content corresponding to a layer can be set to text, the corresponding content can be set to text content. If the element corresponding to a layer is a shape, the corresponding content can be set to empty.

[0084] Each layer in the rendering component corresponds to a field for data storage, and the data storage can be stored in JSON format.

[0085] Figure 3 is a schematic diagram of a specific process of a method for editing a webpage according to an embodiment of the present application;

[0086] Step S301: Determine a container in an empty state as a canvas;

[0087] Step S302, loading an image as the first layer to the canvas;

[0088] Step S303: Edit the elements to be edited on the canvas in order according to their priorities, and generate rendering components; wherein the rendering components include customizable data, text content, image URLs, and layout information;

[0089] Step S304: export and / or save the rendering component, wherein the export information includes the x, y coordinates of each layer, and the width and height are converted from pixel units to percentages based on the width and height of the image;

[0090] Step S305: Rendering is performed on the web page according to the rendering component.

[0091] Figure 4 is a schematic diagram of main modules of an apparatus for editing a web page according to an embodiment of the present application; according to another aspect of an embodiment of the present application, an apparatus 400 for editing a web page is provided, comprising:

[0092] A canvas determination module 401 is used to determine a container in an empty state as a canvas;

[0093] A component generation module 402, used to edit the elements to be edited on the canvas in order according to the priorities of the elements to be edited, and generate rendering components;

[0094] The rendering module 403 is used to render on the web page according to the rendering component.

[0095] Figure 5 An exemplary system architecture 500 is shown to which the method for editing a web page or the apparatus for editing a web page according to the embodiments of the present application can be applied.

[0096] like Figure 5 As shown, system architecture 500 may include terminal devices 501, 502, 503, a network 504 and a server 505. Network 504 is used to provide a medium for communication links between terminal devices 501, 502, 503 and server 505. Network 504 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0097] Users can use terminal devices 501, 502, 503 to interact with server 505 through network 504 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 501, 502, 503, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).

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

[0099] The server 505 may be a server that provides various services, such as a backend management server (only an example) that provides support for shopping websites browsed by users using the terminal devices 501, 502, and 503. The backend management server may analyze and process the received data such as product information query requests, and feed back the processing results (such as target push information, product information - only an example) to the terminal device.

[0100] It should be noted that the web page editing method provided in the embodiment of the present application is generally executed by the server 505 , and accordingly, the web page editing device is generally set in the server 505 .

[0101] It should be understood that Figure 5The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0102] Reference below Figure 6 , which shows a schematic diagram of the structure of a computer system 600 of a terminal device suitable for implementing an embodiment of the present application. Figure 6 The terminal device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0103] like Figure 6 As shown, the computer system 600 includes a central processing unit (CPU) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage part 608 into a random access memory (RAM) 603. In the RAM 603, various programs and data required for the operation of the system 600 are also stored. The CPU 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0104] The following components are connected to the I / O interface 605: an input section 606 including a keyboard, a mouse, etc.; an output section 607 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 608 including a hard disk, etc.; and a communication section 609 including a network interface card such as a LAN card, a modem, etc. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to the I / O interface 605 as needed. A removable medium 611, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 610 as needed, so that a computer program read therefrom is installed into the storage section 608 as needed.

[0105] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 609, and / or installed from the removable medium 611. When the computer program is executed by the central processing unit (CPU) 601, the above-mentioned functions defined in the system of the present application are executed.

[0106] 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 above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, 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 disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present application, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0107] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the above-mentioned module, program segment or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0108] The modules involved in the embodiments of the present application may be implemented by software or hardware. The modules described may also be set in a processor. For example, they may be described as: a processor includes a sending module, an acquisition module, a determination module, and a first processing module. The names of these modules do not, in some cases, constitute a limitation on the modules themselves. For example, the sending module may also be described as a "module for sending a picture acquisition request to the connected server."

[0109] As another aspect, the present application further provides a computer-readable medium, which may be included in the device described in the above embodiment; or may exist independently without being assembled into the device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by a device, the device includes:

[0110] A container in an empty state is determined as a canvas;

[0111] Edit the elements to be edited on the canvas in sequence according to the priorities of the elements to be edited, and generate rendering components;

[0112] Rendering is performed on the web page according to the rendering component.

[0113] According to the technical solution of the embodiment of the present application, the following beneficial effects can be achieved:

[0114] In some embodiments of the present application, different types of elements to be edited can be edited, avoiding the technical defect in the prior art that only pictures can be used to edit web pages, but text and shapes cannot be edited, thereby achieving the technical effect of enriching the diversity of pictures in web pages.

[0115] In some embodiments of the present application, the elements to be edited are edited on the canvas in sequence according to their priorities, and a technical means of generating a rendering component solves the technical defect that the prior art can only edit the layer corresponding to one image and is not convenient for secondary editing of the layer.

[0116] The above specific implementations do not constitute a limitation on the protection scope of this application. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of this application should be included in the protection scope of this application.

Claims

1. A method for editing a web page, characterized in that: include: A container in an empty state is determined as a canvas; According to the priorities of the elements to be edited, the elements to be edited are edited on the canvas in sequence to generate a rendering component, including: determining the order of the priorities of the elements to be edited from small to large; generating a layer corresponding to each element to be edited according to the order of the priorities of the elements to be edited from small to large; editing the layer corresponding to each element to be edited; combining the layers corresponding to the elements to be edited after the editing is completed to generate a rendering component; Rendering is performed on the web page according to the rendering component.

2. The method according to claim 1, characterized in that: According to the priority of the elements to be edited, the elements to be edited are edited on the canvas in sequence before generating the rendering component, including: obtaining a first image; scaling and loading the first image onto the canvas to form a first layer.

3. The method according to claim 2, characterized in that Edit the layer corresponding to an element to be edited, including at least one of the following: Drag the layer to change the layout information of the layer; Placing an input box in the layer, and inputting text in the input box; The layout information includes: the size, position, level, and / or shape of the element to be edited.

4. The method according to claim 2, characterized in that: The properties of the rendering component include: The horizontal and vertical coordinates corresponding to each layer are converted from pixels to percentages based on the width and height of the image.

5. A device for editing a web page, characterized in that: include: A canvas determination module, used for determining a container in an empty state as a canvas; A component generation module, used to edit the elements to be edited on the canvas in order according to the priority of the elements to be edited, and generate rendering components; A rendering module, used for rendering on a web page according to the rendering component; The component generation module is also used to: determine the order of priority of the elements to be edited from small to large; Generate a layer corresponding to each element to be edited according to the order of priority of the elements to be edited from small to large; Editing the layer corresponding to each element to be edited; After the editing is completed, the layers corresponding to the elements to be edited are combined to generate a rendering component.

6. The device according to claim 5, characterized in that include: The first layer generation module is used to edit the elements to be edited on the canvas in order according to the priority of the elements to be edited, before generating the rendering component: obtaining a first picture; The first image is scaled and loaded onto the canvas to form a first layer.

7. The device according to claim 6, characterized in that Edit the layer corresponding to an element to be edited, including at least one of the following: Drag the layer to change the layout information of the layer; Placing an input box in the layer, and inputting text in the input box; The layout information includes: the size, position, level, and / or shape of the element to be edited.

8. The device according to claim 6, characterized in that The properties of the rendering component include: The horizontal and vertical coordinates corresponding to each layer are converted from pixels to percentages based on the width and height of the image.

9. An electronic device for editing a web page, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 4.

10. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

Images