CN108710490B

CN108710490B - Method and device for editing Web page

Info

Publication number: CN108710490B
Application number: CN201710236133.2A
Authority: CN
Inventors: 赵玉开; 者文明; 赵波; 蔚伟
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Jingdong Shangke Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Jingdong Shangke Information Technology Co Ltd
Priority date: 2017-04-12
Filing date: 2017-04-12
Publication date: 2022-06-07
Anticipated expiration: 2037-04-12
Also published as: CN108710490A

Abstract

The invention provides a method and a device for editing a Web page, electronic equipment and a computer readable medium, which can accurately control the correctness of HTML codes in a Web page area and ensure that the format of HTML codes in a partial area of the Web page submitted by an end user is correct, thereby ensuring that the format of the whole Web page is correct and the condition of page disorder does not occur. The editing method of the Web page comprises the following steps: when an instruction that a user selects one region to edit is received, acquiring an HTML fragment of the selected region from a server; extracting the HTML DOM element attribute of each editing object in the selected area from the HTML fragment; generating an input control corresponding to the attribute of each HTML DOM element for each edited object, wherein the input control is used for receiving the edited content of the edited object; and splicing the edit content received in each input control with the HTML fragment according to a preset format to obtain the edited HTML fragment.

Description

Method and device for editing Web page

Technical Field

The present invention relates to the field of computer technologies, and in particular, to a method and an apparatus for editing a Web page, an electronic device, and a computer-readable medium.

Background

Some areas on home pages or channel pages of various websites are often required to be manually set, such as common home page promotion focus maps, recommended contents on banners and the like. The HTML format of these areas needs to conform to the given format to correctly display the page, and if the HTML format is wrong, the page content is messy, which affects the user experience.

A currently generally adopted scheme is to edit the above page area by a hypertext editor of HTML, such as an editor of tinyme, FCKEditor, FreeTextBox, etc., and mainly sets the edited content to a new iframe (an HTML tag), then sets the contentdifable attribute of the document of this iframe to true, and edits the content of the iframe by a command of the browser, wherein the content of the iframe is written into the text area when editing occurs.

In the process of implementing the invention, the inventor finds that at least the following problems exist in the prior art: the above scheme of setting the contentready attribute of the iframe to true and then editing through the browser cannot control the format of the content in the HTML region, which may cause a messy page format.

Disclosure of Invention

In view of this, the present invention provides a method and an apparatus for editing a Web page, an electronic device, and a computer readable medium, which can accurately control the accuracy of an HTML code in a Web page area, and ensure that the format of the HTML code in a partial area of the Web page submitted by an end user is correct, so as to ensure that the format of the whole Web page is correct, and a page disorder situation does not occur.

To achieve the above object, according to an aspect of the embodiments of the present invention, a method for editing a Web page is provided.

A method of editing a Web page, the Web page comprising a plurality of regions, each region comprising one or more editing objects, the method comprising: when an instruction that a user selects one region to edit is received, acquiring an HTML fragment of the selected region from a server; extracting HTML DOM element attributes of all editing objects in the selected area from the HTML fragments; generating an input control corresponding to the attribute of each HTML DOM element for each edited object, wherein the input control is used for receiving the edited content of the edited object; and splicing the editing content received in each input control with the HTML fragment according to a preset format to obtain an edited HTML fragment, wherein the DOM is a Document Object Model (Document Object Model).

Optionally, before receiving an instruction that the user selects one of the regions for editing, the method further includes: adding a suspension layer which can be hidden for the area in advance, wherein the suspension layer comprises an interface used for receiving an instruction sent by a user for editing the area, the suspension layer is displayed when the area is selected and hidden when the area is not selected, and the area is selected when the mouse moves to the area.

Optionally, each edited object has respective path information, where the path information is DOM path information, and the extracting, from the HTML segment, the HTML DOM element attribute of each edited object in the selected region includes: obtaining DOM elements indicated by the DOM path information in the HTML fragments according to the DOM path information of each editing object; and extracting HTML DOM element attributes from the DOM elements.

Optionally, the HTML DOM element attributes include a link text attribute, a link address attribute, a link opening mode attribute, a picture attribute, and a description text attribute, and generating an input control corresponding to the respective HTML DOM element attribute for each editing object includes: when the HTML DOM element attribute is the link character attribute, generating a link character input control; when the HTML DOM element attribute is the link address attribute, generating a URL input control; when the HTML DOM element attribute is the link opening mode attribute, generating a link opening mode selection control; when the HTML DOM element attribute is the picture attribute, generating a picture uploading control; and when the HTML DOM element attribute is a description text attribute, generating a description text input control.

Optionally, the preset format is a code format of the HTML segment.

According to another aspect of the present invention, an apparatus for editing a Web page is provided.

An editing apparatus of a Web page, the Web page including a plurality of regions, each region including one or more editing objects, the apparatus comprising: the HTML acquisition module is used for acquiring HTML fragments of the selected area from the server side when receiving an instruction that the user selects one area to edit; the attribute extraction module is used for extracting the HTML DOM element attributes of all the editing objects in the selected area from the HTML fragments; the control generation module is used for generating an input control corresponding to the attribute of each HTML DOM element for each edited object, and the input control is used for receiving the edited content of the edited object; and the HTML splicing module is used for splicing the editing content received in each input control with the HTML fragment according to a preset format to obtain the edited HTML fragment.

Optionally, the mouse further comprises a floating layer adding module, configured to add a floating layer capable of being hidden for the region in advance, where the floating layer includes an interface configured to receive an instruction issued by a user to edit the region, and the floating layer is displayed when the region is selected and hidden when the region is not selected, where the region is selected when the mouse moves onto the region.

Optionally, each editing object has respective path information, where the path information is DOM path information, and the attribute extraction module is further configured to: obtaining DOM elements indicated by the DOM path information in the HTML fragments according to the DOM path information of each editing object; and extracting HTML DOM element attributes from the DOM elements.

Optionally, the HTML DOM element attributes include a link text attribute, a link address attribute, a link opening mode attribute, a picture attribute, and a description text attribute, and the control generation module is further configured to: when the HTML DOM element attribute is the link character attribute, generating a link character input control; when the HTML DOM element attribute is the link address attribute, generating a URL input control; when the HTML DOM element attribute is the link opening mode attribute, generating a link opening mode selection control; when the HTML DOM element attribute is the picture attribute, generating a picture uploading control; and when the HTML DOM element attribute is a description text attribute, generating a description text input control.

Optionally, the preset format is a code format of the HTML segment.

According to yet another aspect of the present invention, an electronic device is provided.

An electronic device, comprising: one or more processors; memory for storing one or more programs that, when executed by the one or more processors, cause the one or more processors to implement a method for editing a Web page.

According to yet another aspect of the present invention, a computer-readable medium is provided.

A computer-readable medium, on which a computer program is stored, which, when executed by a processor, implements a method of editing a Web page. .

According to the technical scheme of the invention, one embodiment of the invention has the following advantages or beneficial effects: when an instruction that a user selects one area to edit is received, an HTML fragment of the selected area is obtained from a server, HTML DOM element attributes of all editing objects in the selected area are extracted from the HTML fragment, input controls corresponding to the HTML DOM element attributes of all the editing objects are generated for all the editing objects, and the editing contents of the editing objects received in all the input controls are spliced with the HTML fragment according to the code format of the HTML fragment to obtain the edited HTML fragment. The method can accurately control the accuracy of the HTML codes in the Web page area, and ensure that the HTML codes in the partial area of the Web page submitted by the end user are in correct format, thereby ensuring that the format of the whole Web page is correct and avoiding the condition of page disorder.

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 better understanding of the invention and are not to be construed as unduly limiting the invention. Wherein:

FIG. 1 is a schematic diagram of the main steps of a method for editing a Web page according to an embodiment of the present invention;

FIG. 2 is a schematic diagram of an editing interface for editing objects according to an embodiment of the invention;

FIG. 3 is a schematic diagram of a formatting interface according to an embodiment of the present invention;

fig. 4 is a schematic diagram of main blocks of an editing apparatus for a Web page according to an embodiment of the present invention;

FIG. 5 is a schematic block diagram of a computer system suitable for use with the electronic device to implement an embodiment of the invention.

Detailed Description

Exemplary embodiments of the present invention are described below with reference to the accompanying drawings, in which various details of embodiments of the invention are included to assist understanding, and which are to be considered as merely exemplary. 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 invention. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.

When an instruction of a user for selecting a region to edit is received, acquiring an HTML fragment of the selected region from a server, extracting HTML DOM element attributes of each editing object in the selected region from the HTML fragment, generating input controls corresponding to the HTML DOM element attributes of each editing object, and splicing the editing content of the editing objects received in each input control and the HTML fragment according to the code format of the HTML fragment to obtain the edited HTML fragment. The method can accurately control the accuracy of the HTML codes in the Web page area, and ensure that the HTML codes in the partial area of the Web page submitted by the end user are in correct format, thereby ensuring that the format of the whole Web page is correct and avoiding the condition of page disorder.

Fig. 1 is a schematic diagram of main steps of an editing method of a Web page according to an embodiment of the present invention.

As shown in fig. 1, the method for editing a Web page according to the embodiment of the present invention mainly includes the following steps S11 to S14. Wherein the Web page includes a plurality of regions, each region including one or more editing objects.

Step S11: when an instruction that a user selects one area to edit is received, the HTML fragment of the selected area is obtained from the server side.

Before receiving an instruction of a user for selecting a region to edit, a suspension layer capable of being hidden can be added to the region in advance, the suspension layer can comprise an interface used for receiving the instruction of the user for editing the region, the suspension layer is displayed when the region is selected and hidden when the region is not selected, wherein the region is selected when the mouse moves to the region. The floating layer may be a semi-transparent layer floating on the area, and the interface for receiving the instruction sent by the user to edit the area may be a pre-programmed button.

The process of adding the concealable suspension layer is described in detail below. Firstly, an editing page of a Web page area is loaded from a server, a javascript script of the editing page is executed, an HTML node path of the area to be edited is designated, and the HTML node path indicates an HTML node corresponding to the area to be edited in HTML. And adding an onmouseover event (mouse passing event) to the path of the HTML node, wherein the onmouseover event specifies that the CSS style of the suspension layer on the region corresponding to the HTML node is semitransparent, and adding an 'edit fragment' button to the suspension layer. When the mouse is hovered over the region to be edited, which means that the user selects the region, the onmouseover event dynamically creates a div (block level element) including the HTML code of the region, thereby displaying a semi-transparent hover layer over the region, and displaying an "edit fragment" button added to the hover layer. A fragment represents a region on a page to be edited, and each time the region is edited, a copy (i.e., version) of the fragment content is generated, and if the version needs to be viewed, a "view version" button can be added to the hover layer.

Adding an onclick event (mouse click event) to a button arranged on the suspension layer to enable a user to make a corresponding response when clicking the button, wherein when the user moves a mouse to a region to select the region, the onclick event is triggered to display the semitransparent suspension layer on the corresponding region, when the user clicks an 'edit fragment' button on the suspension layer, the onclick event is triggered to pop up a generated formatting interface, and when the user clicks a 'view version' button, the version of the current edit fragment is displayed. The formatting interface provides an operable interface for the user to edit the selected area, and the specific process of generating the formatting interface will be described in detail in steps S12 to S13.

Before an onmouseover event and an onclick event are added, a javascript array is stated on an editing page, attributes of a page area are written into the array, each element of the array specifies an area identifier, an area name, a script code path for generating a formatting interface and an HTML DOM path of the page area, and then the arrays are traversed to add the events one by one. The area attribute javascript object is described as follows:

wherein "id: 9" represents the area identification of the page area, "hotspot product at the right side of the focus map" represents the area name, "foolJsUrl: _ur + ' fragmentclient/fools/li _js '" represents the script code path for generating the formatting interface, and "element: ' div. When an instruction that a user selects one area to edit is received, the HTML fragment can be obtained from the server according to the area identifier of the selected area, and the HTML fragment corresponding to the selected area can be loaded by the server according to the area identifier.

The generation process of the formatting interface is described in detail below. The formatted interface may be generated by a pre-stored javascript, which is a scripting language running on the client that may be used to manipulate HTML page elements. When an instruction that a user selects an area to edit is received, transmitting an area identifier of the selected area and a code path of the prestored javascript script to a server, loading the prestored javascript according to the code path by the server, loading an HTML fragment of the selected area according to the area identifier, putting the HTML fragment into a hidden div (block-level element), acquiring the hidden div on an editing page by the client by executing the javascript loaded by the server, analyzing the HTML fragment in the hidden div, analyzing the format of the HTML fragment, generating a fixed input control for the user to input editing contents, and combining the input controls into a formatting interface. The pre-stored javascript script may specifically generate the formatting interface by performing the following steps S12 and S13.

Step S12: and extracting the HTMLDOM element attribute of each editing object of the selected area from the HTML fragment.

Each editing object has respective path information, and the path information of the editing object may be DOM path information. The HTML (hypertext markup language) DOM (document object model) defines a standard method of accessing and manipulating HTML documents, which presents the HTML document as a tree structure with elements, attributes and text, through which DOM path information can be located to DOM elements.

The method includes that DOM path information of each editing object is pre-specified in a pre-stored javascript script, and HTML DOM element attributes of each editing object in the selected area are extracted from an HTML fragment, and the method specifically includes: and obtaining DOM elements indicated by the DOM path information in the HTML fragment according to the DOM path information of each editing object, and then extracting the attribute of the HTMLDOM element from each DOM element. For example, li, item [0] > div represents DOM path information of an editing object, and a DOM element can be parsed in the following manner: firstly, splitting DOM path information through '>' symbols to obtain a DOM path segment array, and then circularly analyzing the DOM path segment, wherein the specific analysis method comprises the following steps:

get the element list meeting the condition through element. getElementsByTagName (tagName), then traverse the list to find the element meeting the condition,

the condition comprises 1) item represents that cs class contains item;

2) [ x ] represents the xth element, and the first element meeting the condition is taken as default;

each segment is analyzed to be used as a parent node of the next segment to obtain a node of the next level, wherein li represents that an HTML node label is li, li is the li element of item contained in CSS class, and 0 th element is taken from li item [0], and the obtained DOM element is assumed to be in the following form: and if < div class ═ dt item _ txt > text content </div >, the descriptive text attribute can be extracted. It will be understood by those skilled in the art that other attributes may be extracted in the same manner as described above if the DOM element indicated by the DOM path information also contains other attributes.

The HTML DOM element attributes may specifically include: the method comprises the following steps of linking character attributes, linking address attributes, linking opening mode attributes, picture attributes and description text attributes. The HTML DOM element attribute in the DOM element is specified by an expression, and the syntax can be [ elementName ] [ @ attribute | # text ]. For example, string # text represents the InnerText attribute of the string tag within the DOM element, i.e., the descriptive text attribute; @ href denotes the href attribute of the current element, i.e., the link address attribute; img @ src represents the src attribute of the img element, i.e. the picture attribute. The HTML DOM element attributes may also include a CSS information attribute, which specifies element style information. After extracting the HTML DOM element attributes of each editing object one by one, each editing object may be named and the HTML DOM element attributes of each editing object may be stored as an editing object array, the names of the editing objects are, for example, "category title link", "left recommended product link", and the like.

Step S13: and generating an input control corresponding to the attribute of the HTML DOM element for each editing object, wherein the input control is used for receiving the editing content of the editing object.

Wherein: when the HTML DOM element attribute is the link character attribute, generating a link character input control; when the HTML DOM element attribute is the link address attribute, generating a URL (uniform resource locator) input control; when the HTML DOM element attribute is the link opening mode attribute, generating a link opening mode selection control; when the HTML DOM element attribute is the picture attribute, generating a picture uploading control; and when the HTML DOM element attribute is a description text attribute, generating a description text input control.

Specifically, the following steps a to f may be executed in a loop according to the content in the editing object array:

a: generating DOM elements of an editing object grouping container, wherein the DOM elements comprise attributes such as a link address, a link text, a description character and a picture address;

b: if the link character attribute is specified by the editing object, generating a link character input control of the editing object;

c: if the link address attribute is specified by the editing object, generating a URL input control of the editing object;

d: if the editing object designates the link opening mode attribute, generating a link opening mode selection control of the editing object;

e: if the picture attribute is specified by the editing object, generating a picture uploading control of the editing object;

f: if the description text is specified by the editing object, a description text input control is generated.

Each input control can be created through document, createlement ('input'), and then set HTML element attributes such as type, title, width, CSS class, and the like. Moreover, the input controls may be implemented as input boxes, such as a link text input box, a URL input box, a link open mode selection box, a picture uploading box, a description text input box, and the like.

A plurality of input controls generated according to the attributes of each HTML DOM element of an editing object constitute an editing interface of the editing object, and fig. 2 is a schematic diagram of the editing interface of an editing object according to an embodiment of the present invention. The editing object name is "left recommended product link" as shown in fig. 2, and includes four HTML DOM element attributes of "link letter", "link address", "picture address", and "descriptive text". FIG. 3 is a diagrammatic view of a formatting interface in accordance with an embodiment of the present invention. As shown in fig. 3, the editing interfaces of a plurality of editing objects ("category title link", "left recommended product link", "right product link") are assembled into one formatting interface. The user can input corresponding information such as 'link characters', 'link addresses', 'picture addresses', 'description texts' and the like in the editing interface of each editing object, and therefore the content of each editing object in the Web page can be edited.

Step S14: and splicing the edit content received in each input control with the HTML fragment according to a preset format to obtain the edited HTML fragment.

The preset format may be a code format of an HTML fragment.

After receiving the editing content input by the user in each input control, the editing content and the HTML fragment can be spliced into an HTML code with a fixed format (namely the edited HTML fragment) through the pre-stored javascript, and the HTML code is submitted to the server side to be stored. The splicing process is as follows:

i: circularly traversing the generated input controls to obtain the editing content input by the user;

ii: and assembling the generated input controls according to the code format of the HTML fragments of the Web page, and circularly acquiring the editing content of each input control to obtain the edited HTML fragments. The spliced grammar, for example, the original HTML fragment is: the method comprises the following steps of (i) preparing a new description text, (ii) preparing a new description text, (iii) splicing < li ═ news _ item "> < a href ═ target ═ blank" class ═ news _ link "> original description text </a > </li >, and carrying out the following splicing: the method comprises the following steps of (1), recovering ═ news _ item "> < a href ═ ' + url + ', ' target ═ blank ═ class ═ news _ link ' > + text + ' </li >; wherein url represents the added link address and text represents the updated description text.

Fig. 4 is a schematic diagram of main blocks of an editing apparatus for a Web page according to an embodiment of the present invention. The Web page includes a plurality of regions, each region including one or more editing objects.

As shown in fig. 4, the apparatus 40 for editing a Web page according to the embodiment of the present invention mainly includes: an HTML acquisition module 41, a property extraction module 42, a control generation module 43, and an HTML splicing module 44. Wherein the content of the first and second substances,

the HTML obtaining module 41 is configured to, when receiving an instruction from a user to select an area for editing, obtain an HTML fragment of the selected area from the server;

the attribute extraction module 42 is used for extracting the HTML DOM element attributes of each editing object in the selected area from the HTML fragments;

the control generating module 43 is configured to generate, for each edited object, an input control corresponding to the respective HTML DOM element attribute, where the input control is configured to receive the edited content of the edited object;

the HTML splicing module 44 is configured to splice the edited content received in each input control with the HTML segment according to a preset format, so as to obtain an edited HTML segment.

The preset format may specifically be a code format of an HTML fragment.

The editing apparatus 40 of the Web page according to the embodiment of the present invention may further include a floating layer adding module, where the floating layer adding module is configured to add a hidden floating layer to the page region in advance, where the floating layer includes an interface configured to receive an instruction sent by a user to edit the region, and the floating layer is displayed when the region is selected and hidden when the region is not selected, where the region is selected when the mouse moves onto the region.

Each editing object has respective path information, the path information is DOM path information, and the attribute extraction module 42 may further obtain, according to the DOM path information of each editing object, a DOM element indicated by the DOM path information in the HTML segment, and extract an attribute of the HTML DOM element from each DOM element.

The HTML DOM element attributes mainly comprise a link character attribute, a link address attribute, a link opening mode attribute, a picture attribute and a description text attribute.

The control generation module 43 may also be configured to: when the HTML DOM element attribute is the link character attribute, generating a link character input control; when the HTML DOM element attribute is the link address attribute, generating a URL input control; when the HTML DOM element attribute is the link opening mode attribute, generating a link opening mode selection control; when the HTML DOM element attribute is the picture attribute, generating a picture uploading control; and when the HTML DOM element attribute is a description text attribute, generating a description text input control.

The invention also provides an electronic device and a computer readable medium according to the embodiment of the invention.

The electronic device of the present invention includes: one or more processors; a memory for storing one or more programs that, when executed by the one or more processors, cause the one or more processors to implement a method for editing a Web page.

The computer-readable medium of the present invention has stored thereon a computer program which, when executed by a processor, implements a method of editing a Web page.

Referring now to FIG. 5, shown is a block diagram of a computer system 500 suitable for use in implementing an electronic device of an embodiment of the present invention. The electronic device shown in fig. 5 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. 5, the computer system 500 includes a Central Processing Unit (CPU)501 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM)502 or a program loaded from a storage section 508 into a Random Access Memory (RAM) 503. In the RAM 503, various programs and data necessary for the operation of the system 500 are also stored. The CPU 501, ROM 502, and RAM 503 are connected to each other through a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.

The following components are connected to the I/O interface 505: an input portion 506 including a keyboard, a mouse, and the like; an output portion 507 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage portion 508 including a hard disk and the like; and a communication section 509 including a network interface card such as a LAN card, a modem, or the like. The communication section 509 performs communication processing via a network such as the internet. The driver 510 is also connected to the I/O interface 505 as necessary. A removable medium 511 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 510 as necessary, so that a computer program read out therefrom is mounted into the storage section 508 as necessary.

In particular, according to the embodiments of the present disclosure, the processes described above in the main step schematic of the editing method of a Web page may be implemented as a computer software program. For example, a disclosed embodiment of the invention includes a computer program product comprising a computer program embodied on a computer-readable medium, the computer program containing program code for performing the method shown in the main step schematic of the method for editing a Web page. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 509, and/or installed from the removable medium 511. 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) 501.

It should be noted that the computer readable medium shown in the present invention can 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 principal step 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 main step diagram 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 main step diagram, and combinations of blocks in the main step diagram, 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 invention 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 an HTML acquisition module 41, a property extraction module 42, a control generation module 43, an HTML stitching module 44. The names of these modules do not constitute a limitation to the module itself in some cases, for example, the HTML obtaining module 41 can also be described as "a module for obtaining HTML fragments of a selected area from a server when receiving an instruction from a user to select the selected area for editing".

As another aspect, the present invention also provides a computer-readable medium that 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: when an instruction that a user selects an area to edit is received, acquiring an HTML fragment of the selected area from a server; extracting the HTML DOM element attribute of each editing object in the selected area from the HTML fragment; generating an input control corresponding to the attribute of each HTML DOM element for each edited object, wherein the input control is used for receiving the edited content of the edited object; and splicing the edit content received in each input control with the HTML fragment according to a preset format to obtain the edited HTML fragment.

According to the technical scheme of the embodiment of the invention, when an instruction of a user for selecting one area to edit is received, the HTML fragment of the selected area is obtained from the server, the HTML DOM element attribute of each editing object in the selected area is extracted from the HTML fragment, the input control corresponding to the HTML DOM element attribute is generated for each editing object, and the editing content of the editing object received in each input control is spliced with the HTML fragment according to the code format of the HTML fragment to obtain the edited HTML fragment. The method can accurately control the accuracy of the HTML codes in the Web page area, and ensure that the HTML codes in the partial area of the Web page submitted by the end user are in correct format, thereby ensuring that the format of the whole Web page is correct and avoiding the condition of page disorder.

The above-described embodiments should not be construed as limiting the scope of the invention. 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 invention should be included in the protection scope of the present invention.

Claims

1. A method of editing a Web page, the Web page comprising a plurality of regions, each region comprising one or more editing objects, the method comprising:

when an instruction that a user selects one region to edit is received, acquiring an HTML fragment of the selected region from a server;

extracting the HTML DOM element attribute of each editing object in the selected area from the HTML fragment;

generating an input control corresponding to each HTML DOM element attribute for each editing object, wherein the input control of the editing object forms an editing interface of the editing object, and the input control in the editing interface is used for receiving the editing content of the editing object; each generated input control is assembled according to the code format of the HTML fragment of the Web page;

and splicing the edit content received in each input control in the edit interface with the HTML fragment according to a preset format to obtain the edited HTML fragment.

2. The method of claim 1, wherein prior to receiving an indication that a user selected one of the regions for editing, further comprising:

adding a suspension layer which can be hidden for the area in advance, wherein the suspension layer comprises an interface used for receiving an instruction sent by a user for editing the area, the suspension layer is displayed when the area is selected and hidden when the area is not selected, and the area is selected when the mouse moves to the area.

3. The method of claim 1, wherein each edited object has respective path information, the path information being DOM path information, and extracting HTML DOM element attributes of each edited object of the selected region from the HTML fragments comprises:

obtaining DOM elements indicated by the DOM path information in the HTML fragments according to the DOM path information of each editing object;

and extracting HTML DOM element attributes from the DOM elements.

4. The method of claim 1, wherein the HTML DOM element attributes include a link text attribute, a link address attribute, a link open mode attribute, a picture attribute, a description text attribute,

and, generating an input control for each edit object corresponding to a respective HTML DOM element attribute comprises:

when the HTML DOM element attribute is the link character attribute, generating a link character input control;

when the HTML DOM element attribute is the link address attribute, generating a URL input control;

when the HTML DOM element attribute is the link opening mode attribute, generating a link opening mode selection control;

when the HTML DOM element attribute is the picture attribute, generating a picture uploading control;

and when the HTML DOM element attribute is a description text attribute, generating a description text input control.

5. The method of claim 1, wherein the predetermined format is a code format of the HTML segment.

6. An apparatus for editing a Web page, the Web page including a plurality of regions, each region including one or more editing objects, the apparatus comprising:

the HTML acquisition module is used for acquiring HTML fragments of the selected area from the server side when receiving an instruction that the user selects one area to edit;

the attribute extraction module is used for extracting the HTML DOM element attributes of all the editing objects in the selected area from the HTML fragments;

the control generation module is used for generating an input control corresponding to each HTML DOM element attribute for each editing object, the input control of the editing object forms an editing interface of the editing object, and the input control in the editing interface is used for receiving the editing content of the editing object; each generated input control is assembled according to the code format of the HTML fragment of the Web page;

and the HTML splicing module is used for splicing the editing content received in each input control in the editing interface with the HTML fragments according to a preset format to obtain the edited HTML fragments.

7. The apparatus of claim 6, further comprising a hover layer adding module for adding a concealable hover layer to the region in advance, wherein the hover layer comprises an interface for receiving a user-generated instruction to edit the region, and wherein the hover layer is displayed when the region is selected and is hidden when the region is not selected, wherein the region is selected when the mouse is moved over the region.

8. The apparatus of claim 6, wherein each edited object has respective path information, and the path information is DOM path information, and the attribute extraction module is further configured to:

and extracting HTML DOM element attributes from the DOM elements.

9. The apparatus of claim 6, wherein the HTML DOM element attributes comprise a link text attribute, a link address attribute, a link open mode attribute, a picture attribute, a description text attribute,

and the control generation module is further configured to:

10. The apparatus of claim 6, wherein the predetermined format is a code format of the HTML fragment.

11. An electronic device, comprising:

one or more processors;

a memory for storing one or more programs,

when executed by the one or more processors, cause the one or more processors to implement the method of any one of claims 1-5.

12. A computer-readable medium, on which a computer program is stored, which program, when being executed by a processor, is adapted to carry out the method of any one of claims 1-5.