Web page real-time preview editing method, device, equipment and storage medium

Abstract

The present application discloses a method, device, equipment and storage medium for real-time preview editing of a web page, the method comprising the following steps: creating a blank template at a web page editing end, inserting the HTML source code of a published web page obtained from a remote server into the blank template; after monitoring that the blank template completes the insertion of the HTML source code, instantiating the blank template to preview the corresponding editable web page at the web page editing end; receiving editing data acting on the editable web page, storing the editing data in a global variable; in response to the data update of the global variable, refreshing the preview effect of the editable web page. The present application is suitable for providing an efficient editing solution for large-scale web page special development projects, and can better achieve code isolation and management.

Description

Technical Field

[0001] The present application belongs to the field of Internet technology, and specifically relates to a method for real-time preview and editing of a web page, and also relates to a device, an electronic device and a non-volatile storage medium corresponding to the aforementioned method. Background Art

[0002] With the comprehensive and in-depth development of Internet applications and technologies, more and more online applications are based on web pages. The popularity of HTML5 has enabled various terminal applications and websites based on web pages to flourish. Applications based on web pages need to provide a production and configuration environment for web pages. Large Internet platforms, especially some portal websites and live broadcast websites, involve many pages to be developed, operated, and maintained. The development and editing time is often relatively tight, and the design requirements vary. The work pressure on developers is bound to be huge. Faced with this situation, it is more urgent to provide a more efficient editing mechanism for web page development and operation and maintenance.

[0003] To solve the above problems, the industry adopts a visual solution that allows website operation and development personnel to preview the results of each editing step of the web page in real time, and re-edit it when problems are found, so as to improve the efficiency of operating and maintaining the web page.

[0004] There are two common solutions for visualization construction:

[0005] First, by embedding an iframe tag in the HTML source code, a remote topic publishing page is nested, and data is transferred by postMessage or URL parameter passing; second, by deploying the topic publishing page and the topic editing end in the same project, the topic publishing page is displayed as a submodule of the topic editing end. Because they are in the same project, the topic publishing page and the topic editing end are in a parent-child module relationship, and data transfer between parent-child modules is more convenient. However, both of the above solutions have certain defects. For example, both require re-editing the code or re-touching the controls or plug-ins, so that each time a small update is made to the web page, the code needs to be re-edited or the controls or plug-ins need to be touched, which increases unnecessary workload, reduces work efficiency, and is not conducive to large-scale updating of web pages. At the same time, the former solution is more complex and cumbersome to implement, and the latter solution is not conducive to code separation and management. Summary of the invention

[0006] The primary purpose of this application is to provide a web page real-time preview editing method that is easy to operate and maintain.

[0007] As another object of the present application, a web page real-time preview and editing device adapted to the aforementioned web page real-time preview and editing method is provided.

[0008] As another object of the present application, an electronic device adapted to the real-time preview and editing method of a web page is provided based on the above method.

[0009] As another object of the present application, a non-volatile storage medium suitable for storing a computer program implemented by the web page real-time preview editing method is provided.

[0010] In order to meet the various objectives of this application, this application adopts the following technical methods:

[0011] In order to achieve the primary purpose of this application, a web page real-time preview editing method is provided, comprising the following steps:

[0012] Create a blank template on the web page editing terminal, and insert the HTML source code of the published web page obtained from the remote server into the blank template;

[0013] After monitoring that the blank template completes the insertion of the HTML source code, instantiating the blank template to preview the corresponding editable web page on the web page editing terminal;

[0014] receiving editing data acting on the editable webpage, and storing the editing data in a global variable;

[0015] In response to the data update of the global variable, the preview effect of the editable webpage is refreshed.

[0016] In one embodiment, the HTML source code inserted into the blank template only includes executable code and / or style code.

[0017] Furthermore, the editing data includes definition data of one or more layout elements in the editable web page.

[0018] Preferably, a root element ID identical to that of the publishing end of the published web page is created for the blank template, so that the editing data of the edited editable web page is synchronized to the publishing end for publishing according to the root element ID.

[0019] Preferably, the web page editing terminal provides a graphical user interface, which includes an editing control area and an editing preview area, wherein the editing control area is used to trigger editing events acting on the editable web page, and the editing preview area is used to display a preview effect of the editable web page.

[0020] In one embodiment, the method includes the following steps: starting a scheduled task, periodically fetching the published web pages from a remote server, and storing them in a local database for insertion into the blank template.

[0021] In one embodiment, a post-processing step is included: in response to a user publishing instruction, the updated edit data in the global variable is synchronized to the remote server to implement the update of the published web page.

[0022] Another object of the present application is to provide a web page real-time preview editing device, which includes:

[0023] An inserting unit creates a blank template at the web page editing end, and inserts the HTML source code of the published web page obtained from the remote server into the blank template;

[0024] The editing unit, after monitoring that the blank template completes the insertion of the HTML source code, instantiates the blank template to preview the corresponding editable web page on the web page editing terminal;

[0025] The receiving unit receives the editing data acting on the editable webpage and stores the editing data in a global variable;

[0026] The preview unit refreshes the preview effect of the editable web page in response to the data update of the global variable.

[0027] An electronic device is provided to meet another purpose of the present application, including a central processing unit and a memory, wherein the central processing unit is used to call and run a computer program stored in the memory to execute the steps of the real-time preview editing method of a web page.

[0028] A non-volatile storage medium is provided to meet another purpose of the present application, which stores a computer program implemented according to the web page real-time preview editing method. When the computer program is called and executed by a computer, the steps included in the method are executed.

[0029] Compared with the prior art, the advantages of this application are as follows:

[0030] First, the application obtains the HTML source code of the published web page from the remote server, inserts the obtained HTML source code into the blank template created on the web page editing end, and instantiates the blank template with the inserted HTML source code as an editable web page that can be previewed on the web page editing end, so that the display effect of the published web page can be previewed through the editable web page on the web page editing end. After that, the editing data acting on the editable web page is received, so that in the process of editing the editable web page, the editing effect can be previewed while editing, thereby improving the editing efficiency.

[0031] Secondly, the web page editing end of the present application is separated from the HTML source code of the published web page stored on the remote server. When the HTML source code is edited on the web page editing end, it will not affect the HTML source code of the published web page stored on the remote server, thereby effectively achieving isolation between the web page editing end and the HTML source code stored on the remote server.

[0032] Again, the remote server of the present application responds to instructions sent by the user and transmits data by remotely loading global variables, which simplifies the complexity of data transmission and reduces the difficulty of mutual communication and data transmission between the web page editing end and the remote server.

[0033] In addition, by obtaining the HTML source code of the published web page, the web page editor only needs to update or add data to create the web page, avoiding the development of the entire web page, reducing the workload of editing the web page, and improving the efficiency of editing the web page.

[0034] Additional aspects and advantages of the present application will be partially given in the following description, which will become apparent from the following description, or will be understood through the practice of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] The above and / or additional aspects and advantages of the present application will become apparent and easily understood from the following description of the embodiments in conjunction with the accompanying drawings, in which:

[0036] Figure 1 A schematic diagram of a typical network deployment architecture related to implementing the technical solution of this application;

[0037] Figure 2 A flowchart of a typical embodiment of the web page real-time preview editing method of the present application;

[0038] Figure 3 This is a principle block diagram of a typical embodiment of the web page real-time preview and editing device of the present application.

[0039] Figure 4 A schematic diagram of a graphical user interface of a web page editing terminal of the web page real-time preview editing method of the present application.

[0040] Figure 5 A schematic diagram of a graphical user interface preview of a web page editing terminal of the web page real-time preview editing method of the present application. DETAILED DESCRIPTION

[0041] The embodiments of the present application are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present application, and cannot be interpreted as limiting the present application.

[0042] It will be understood by those skilled in the art that, unless expressly stated, the singular forms "one", "said", and "the" used herein may also include plural forms. It should be further understood that the term "comprising" used in the specification of the present application refers to the presence of the features, integers, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or groups thereof. It should be understood that when we refer to an element as being "connected" or "coupled" to another element, it may be directly connected or coupled to the other element, or there may be an intermediate element. In addition, the "connection" or "coupling" used herein may include wireless connection or wireless coupling. The term "and / or" used herein includes all or any unit and all combinations of one or more associated listed items.

[0043] It will be understood by those skilled in the art that, unless otherwise defined, all terms (including technical and scientific terms) used herein have the same meaning as those generally understood by those skilled in the art to which this application belongs. It should also be understood that terms such as those defined in general dictionaries should be understood to have meanings consistent with those in the context of the prior art, and will not be interpreted with idealized or overly formal meanings unless specifically defined as here.

[0044] It will be understood by those skilled in the art that the "client", "terminal" and "terminal device" used herein include both devices with wireless signal receivers, which are devices with only wireless signal receivers without transmission capabilities, and devices with receiving and transmitting hardware, which are devices with receiving and transmitting hardware capable of two-way communication on a two-way communication link. Such devices may include: cellular or other communication devices such as personal computers, tablet computers, which have single-line displays or multi-line displays or cellular or other communication devices without multi-line displays; PCS (Personal Communications Service, personal communication system), which can combine voice, data processing, fax and / or data communication capabilities; PDA (Personal Digital Assistant, personal digital assistant), which may include a radio frequency receiver, pager, Internet / intranet access, web browser, notepad, calendar and / or GPS (Global Positioning System, global positioning system) receiver; conventional laptop and / or palmtop computers or other devices, which have and / or include a conventional laptop and / or palmtop computer or other device with and / or including a radio frequency receiver. The "client", "terminal" and "terminal device" used herein may be portable, transportable, installed in a vehicle (air, sea and / or land), or suitable for and / or configured to run locally, and / or in a distributed form, at any other location on the earth and / or in space. The "client", "terminal" and "terminal device" used herein may also be a communication terminal, an Internet terminal, a music / video playing terminal, for example, a PDA, a MID (Mobile Internet Device) and / or a mobile phone with a music / video playing function, or a smart TV, a set-top box and other devices.

[0045] The hardware referred to by the names such as "server", "client", and "service node" in this application is essentially an electronic device with the equivalent capabilities of a personal computer. It is a hardware device with the necessary components revealed by the von Neumann principle, such as a central processing unit (including an arithmetic unit and a controller), a memory, an input device, and an output device. The computer program is stored in its memory, and the central processing unit calls the program stored in the external memory into the internal memory for execution, executes the instructions in the program, and interacts with the input and output devices to complete specific functions.

[0046] It should be pointed out that the concept of "server" referred to in this application can also be extended to the case of server clusters. According to the network deployment principle understood by those skilled in the art, the servers should be logically divided. In physical space, these servers can be independent of each other but can be called through interfaces, or integrated into a physical computer or a set of computer clusters. Those skilled in the art should understand this flexibility, and should not use it to restrict the implementation of the network deployment method of this application.

[0047] See also Figure 1 , the hardware foundation required for the implementation of the relevant technical solutions of this application can be deployed according to the architecture shown in the figure. The server 80 referred to in this application is deployed in the cloud. As a front-end application server, it can be responsible for further connecting related data servers and other servers that provide related support, etc., so as to form a logically related service cluster to provide services for related terminal devices, such as the smartphone 81 and personal computer 82 shown in the figure. The smartphone and personal computer can access the Internet through a well-known network access method, and establish a data communication link with the server 80 in the cloud, so as to run the terminal application related to the service provided by the server.

[0048] Generally speaking, the web page of a certain topic involved in this application will be published to a special server as a topic publishing page, which server can be called a web server. The web page editing end of this application can be edited based on the topic publishing page through the implementation of the web page real-time preview editing method of this application, and even the edited web page can be republished to the original server network space. When this application involves the capture of the source code resources of the topic publishing page, it can also be executed by an independent server, which can be called a crawler server. The captured resources can be stored in a database maintained by the server for call. On this basis, it is more helpful to implement various technical solutions of this application.

[0049] First, see Figure 2 , a web page real-time preview editing method of the present application, in a typical embodiment, comprises the following steps:

[0050] Step S10: Create a blank template on the web page editing terminal, and insert the HTML source code of the published web page obtained from the remote server into the blank template:

[0051] The published web page described in the present application is a page of an application or a website, which has been published to the web server in advance. The relevant URL of the published web page can be entered through the browser of the terminal device. On the basis of establishing data communication between the browser and the web server corresponding to the relevant URL, the browser requests the web server to send the data of the published web page. After receiving the relevant web page data, the web page data is parsed and finally the web page content is displayed on the user interface of the browser.

[0052] The web page editing end of the present application is a page editor supported in the form of a browser or application. The web page editing end can create a blank template as a data container and display window for an editable web page. It acts as a data container at the back end for adding the code of the corresponding editable web page, and parses the code at the front end through a display window provided by the web page editing end to display the content of the editable web page. This parsing mechanism based on the browser is essentially to instantiate the code of the editable web page into a web page interface effect through the browser. Through instantiation, the code added to the blank template will usually reflect the corresponding changes in the display window. Conversely, the editing of the blank template in the display window will often cause the corresponding code to change.

[0053] The web page editing end provides the function of an HTML source code editor, which can create the blank template as described above. The blank template is used to insert the HTML source code of the published web page, thereby instantiating an editable web page and displaying it in the corresponding display window. On this basis, the editable web page can continue to be edited through the web page editor.

[0054] The acquisition of the HTML source code of the published web page can be implemented by the crawler server. Specifically, the crawler server starts a scheduled task, calls a related program to regularly execute the task of crawling the HTML source code of the published web page from the web server, and stores the crawled HTML source code of the published web page in a local database for subsequent use by the web page editing terminal.

[0055] The crawler server is a server that constructs a Node.js operating environment. As mentioned above, it uses a scheduled task to crawl the HTML source code of each topic's published web page. After crawling the HTML source code of each topic, it extracts the executable code and style code in the HTML source code of each published web page and completes formatting for subsequent efficient calls.

[0056] The application needs to call the HTML source code of the published web page, which mainly involves the executable code and / or style code therein. The executable code is usually Javascript-related code, and the style code is usually CSS-related code. Accordingly, the web page editing terminal mainly calls the Javascript-related code and CSS-related code of the published web page from the database stored in the crawler server.

[0057] After the blank template is created, the webpage editing terminal calls the Javascript-related code and the CSS-related code from the database and adds them to the blank template. On this basis, the blank template can instantiate an editable webpage. In some embodiments, only the Javascript-related code or only the CSS-related code can be considered, depending on the actual code of the published webpage.

[0058] When the aforementioned crawler server crawls the published web pages of each topic, for the convenience of subsequent association management, the HTML source code (especially Javascript, CSS related codes) of each published web page will be stored in association with the unique characteristics of the topic (topic ID, or root element ID). Because of this correspondence, the web page editing end will bind it to the root element ID of the corresponding published web page when creating a blank template. In other words, the topic root element ID bound to the blank template is the topic ID bound to the corresponding published web page. Therefore, the web page editing end can request the HTML source code of the corresponding published web page from the crawler server based on the root element ID, and can also synchronize the edited web page to the web server based on the root element ID to complete the republication.

[0059] When the web page editing end inserts the HTML source code into the blank template, it requests the crawler server to obtain the file path of the executable code and / or style code. After the crawler server queries the database to obtain the file path, it feeds back to the web page editing end; the web page editing end obtains the executable code and / or style code according to the file path, and then dynamically inserts the style code and the executable code into the blank template. Preferably, in order to take into account the real-time display effect, the style code can be inserted into the blank template before the executable code.

[0060] In one embodiment, before step S10, a pre-step is also included: starting a scheduled task to periodically fetch the published web pages from a remote server, ie, the web page server, and storing them in a local database for insertion into the blank template.

[0061] In an improved embodiment, the crawler server can store the captured HTML source codes by category by calling an internal function, assign the same ID to HTML source codes of different categories, and classify HTML source codes of the same category.

[0062] Step S11, after monitoring that the blank template completes the insertion of the HTML source code, instantiate the blank template to preview the corresponding editable web page on the web page editing terminal:

[0063] When the HTML source code of the published web page obtained from the web page server is inserted into the blank template, the web page editing terminal automatically parses the HTML source code, displays the parsed web page content in the display window corresponding to the blank template, presents the editable web page, and completes the instantiation of the HTML source code. Because the HTML source code of the editable web page is completely or partially the same as the HTML source code of the published web page, the web page editing terminal can preview all or part of the display effect of the published web page through the display window of the blank template.

[0064] In another embodiment, the blank template only obtains the Javascript code and CSS code of the HTML source code of the published web page, and executes the Javascript code and CSS code to instantiate the blank template into an editable web page, which displays the static style effect reflected by the CSS code of the published web page and the dynamic rendering effect reflected by the Javascript code. That is, the editable web page only displays the frame style effect of the published web page, without the specific text, picture or video data of the published web page. The frame style effect can be style effects such as web page layout, color limitation, picture display size, and picture color rendering effect.

[0065] In order to take into account the editing of the editable web page, the web page editing terminal provides a graphical user interface, which includes an editing control area and an editing preview area. The editing control area is used to trigger editing events acting on the editable web page and display the HTML source code of the editable web page. The editing preview area is used to accommodate the display window of the blank template so as to display the preview effect of the editable web page. For further information, see Figure 4 The graphical user interface of the web page editing terminal can be the opening page of the browser, so as to make the graphical user interface visual. The editing control area of ​​the graphical user interface includes Figure 4 The code editing area 30 and the control editing area 31 and / or the plug-in editing area 31 in the code editing area 30 and the control editing area 31 and / or the plug-in editing area 31 can realize the editing of the editable web page by triggering the triggering events of the code editing area 30 and the control editing area 31 and / or the plug-in editing area 31. Figure 4The editing preview area 32 of the graphical user interface also includes that the editable web page responds to the triggering event, updates the visual effect of the editable web page, and displays the response effect in the editing preview area 32.

[0066] Step S12, receiving editing data acting on the editable web page, and storing the editing data in a global variable:

[0067] The editing event acting on the editable web page will generate corresponding editing data. By receiving the editing data acting on the editable web page, the editing data is stored in the global variable constructed by the present application, and the stored editing data in the global variable is updated in a timely manner. Specifically, according to the web page visualization effect to be created, editing can be implemented on the editable web page, acting on its corresponding HTML source code, or inserting other data during the editing process through various means provided by the web page editing end, or implementing various editing including deleting elements and restoring elements on the editable web page, and so on, the corresponding editing data will eventually be formed. The web page editing end is then responsible for storing the editing data in the global variable, so that when the editable web page is refreshed and parsed, it can monitor whether the global variable has data updated, and implement the parsing according to the latest editing data in the global variable, so that the editable web page presents the latest effect.

[0068] In one embodiment, the HTML source code is edited in the code editing area 30 of the editing control area of ​​the graphical user interface through a touch device. After the HTML source code is edited, the HTML source code is stored in a global variable. The edited HTML source code data is the editing data, and the editing data includes one or more editing data of text editing data, picture editing data, audio editing data, video editing data, table editing data, control editing data, and code editing data. These editing data are used to update or replace or add the HTML source code in the blank template, so that the blank template changes due to receiving these editing data. The dynamic change of the blank template is realized by using the global variable as a transmission medium as described above.

[0069] In another embodiment, the control editing area 31 or the plug-in editing area 31 of the editing control area of ​​the graphical user interface is touched by a touch device, and the control or plug-in is dragged to the editing preview area of ​​the graphical user interface, that is, the control or plug-in is inserted into the editable web page by visual construction, and the web page is edited. Further, files of various formats such as text, pictures, audio, video, and tables are inserted into the editable web page by visual construction. After the editing of controls, plug-ins and various files is completed by visual editing, the edited controls, plug-ins and files are converted into HTML source code, and the HTML source code obtained by editing is stored in the global variable, so that the global variable can pass the relevant editing data to the editable web page.

[0070] Step S13: Refreshing the preview effect of the editable web page in response to the data update of the global variable.

[0071] After the user completes editing and writes the edited data into the global variable, the latest visual effect of the edited editable web page can be previewed in the edit preview area of ​​the graphical user interface provided by the web page editing terminal, achieving a real-time preview effect of what you see is what you get.

[0072] As mentioned above, after the global variable data is updated, the web page editing end monitors the changes of the global variable in real time, and controls the editable web page to respond to the update event, thereby reading data from the global variable as the latest data of the editable web page for web page parsing, thereby displaying the corresponding parsing effect in the editing preview area of ​​the graphical user interface, thereby realizing the corresponding web page preview function.

[0073] In one embodiment, image data is replaced on the editable web page, so the latest image data is stored in the global variable. The web page editing end monitors the modification of the global variable, and controls the editable web page to refresh the display. When re-parsing the editable web page, the image data in the global variable is read to replace the original corresponding image resource, so as to output the page effect with the replaced image to the display window. Figure 5 As shown, after the web page editing end detects that the global variable is updated, the updated web page preview effect is displayed on the editable web page, and the updated data is image data.

[0074] In one embodiment, the blank template as described in step S11 only obtains the Javascript code and CSS code of the HTML source code of the published web page, obtains the frame style effect of the published web page through the Javascript code and CSS code, inserts the edit data obtained by this step into the global variable, refreshes the editable web page, and displays the effect of the inserted edit data instantiation in the frame style effect of the editable web page. For example, the editable web page has a blank picture frame, and by inserting the picture data into the global variable and refreshing the editable web page, the inserted picture is displayed in the picture frame of the editable web page.

[0075] Based on the various embodiments disclosed above, it can be seen that the editable web page of the present application is highly scalable. The web page data can be edited while retaining the source code of the published web page that can be used for the edited web page, so as to easily and efficiently produce interactive web pages, making the web page update and production process time-saving and labor-saving.

[0076] In the above embodiments, the subsequent release of the editable web page after editing can be handled by an independent terminal device, which is responsible for maintaining the connection with the web server and uploading the web page files related to the entire topic to the web server. The terminal device can of course also share the same hardware device with the crawler server. In any case, the terminal device is responsible for maintaining the web page file resources related to each topic, and establishing an ID based on each web page file for the entire topic, which includes the root node ID (root element ID). Thus, the web page editing end can submit the editing data of the global variables corresponding to the editable web page and the corresponding HTML source code to the terminal device to realize the transmission of the resources corresponding to the editable page to the terminal device, and then the terminal device can synthesize it into the edited page file, which is used to upload and replace the corresponding web page file on the web server to realize the web page update.

[0077] In another embodiment, after step S13, a post-step is further included: in response to a user publishing instruction, the edited data updated in the global variable is synchronized to the web server to update the published web page. It should be noted that, since one embodiment of the present application has realized that the editable web page and the published web page are associated with the same topic ID, when the editable web page after editing is republished to the web server, the topic ID can be directly used to establish a corresponding relationship between the two, so as to achieve rapid replacement and complete the web page update.

[0078] When implemented according to this embodiment, the web page editing terminal can integrate the corresponding web page publishing function, which is responsible for responding to user publishing instructions, synthesizing the latest HTML source code of the editable web page, including the Javascript, CSS code and various latest editing data in the global variables, into a web page file corresponding to the editable web page, and uploading the web page file to the web server based on the topic ID, thereby directly replacing the corresponding published web page on the web server.

[0079] Furthermore, by functionalizing the various embodiments of the above-mentioned web page real-time preview editing method, a web page real-time preview editing device of the present application can be constructed. According to this idea, please refer to Figure 3 In a typical embodiment, the device comprises:

[0080] An inserting unit 20 creates a blank template at the web page editing terminal, and inserts the HTML source code of the published web page obtained from the remote server into the blank template;

[0081] The editing unit 21, after monitoring that the blank template completes the insertion of the HTML source code, instantiates the blank template to preview the corresponding editable web page on the web page editing terminal;

[0082] The receiving unit 22 receives the editing data acting on the editable webpage and stores the editing data in a global variable;

[0083] The preview unit 23 refreshes the preview effect of the editable web page in response to the data update of the global variable.

[0084] Furthermore, to facilitate the execution of the present application, an electronic device is provided as a server deployed by the present application, comprising a central processing unit and a memory, wherein the central processing unit is used to call and run a computer program stored in the memory to execute the steps of a web page real-time preview editing method as described above.

[0085] It can be seen that the memory is suitable for using a non-volatile storage medium. By implementing the aforementioned method as a computer program and installing it in an electronic device such as a mobile phone, the relevant program code and data are stored in the non-volatile storage medium of the electronic device. The program is further run by the central processor of the electronic device, and it is transferred from the non-volatile storage medium to the memory for running, so that the desired purpose of the present application can be achieved. Therefore, it can be understood that in one embodiment of the present application, a non-volatile storage medium can also be provided, in which a computer program implemented according to various embodiments of the web page real-time preview editing method is stored. When the computer program is called and run by the computer, the steps included in the method are executed.

[0086] In summary, this application is suitable for providing efficient editing solutions for large-scale web page development projects, and can better achieve code isolation and management.

[0087] It will be appreciated by those skilled in the art that the present application package relates to devices for performing one or more of the operations and methods described in the present application. These devices may be specially designed and manufactured for the desired purpose, or may also include known devices in general-purpose computers. These devices have computer programs stored in their memory, which are selectively activated or reconstructed. Such computer programs may be stored in a device (e.g., computer) readable medium or in any type of medium suitable for storing electronic instructions and coupled to a bus, respectively, the computer readable medium including but not limited to any type of disk (including floppy disk, hard disk, optical disk, CD-ROM, and magneto-optical disk), ROM (Read-Only Memory), RAM (Random Access Memory), EPROM (Erasable Programmable Read-Only Memory), EEPROM (Electrically Erasable Programmable Read-Only Memory), flash memory, magnetic card or optical card. That is, the readable medium includes any medium that stores or transmits information in a readable form by a device (e.g., computer).

[0088] Those skilled in the art will appreciate that each block in these structure diagrams and / or block diagrams and / or flow charts and combinations of blocks in these structure diagrams and / or block diagrams and / or flow charts can be implemented using computer program instructions. Those skilled in the art will appreciate that these computer program instructions can be provided to a general-purpose computer, a professional computer, or a processor of other programmable data processing methods to implement, thereby executing the scheme specified in the block or multiple blocks of the structure diagrams and / or block diagrams and / or flow charts disclosed in this application through the processor of the computer or other programmable data processing method.

[0089] Those skilled in the art will appreciate that the various operations, methods, steps, measures, and schemes in the processes discussed in this application may be alternated, altered, combined, or deleted. Further, other steps, measures, and schemes in the various operations, methods, and processes discussed in this application may also be alternated, altered, rearranged, decomposed, combined, or deleted. Further, the steps, measures, and schemes in the prior art that are similar to those disclosed in this application may also be alternated, altered, rearranged, decomposed, combined, or deleted.

[0090] The above description is only a partial implementation method of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A web page real-time preview editing method, characterized in that: The steps include: Creating a blank template at the web page editing end, inserting the HTML source code of the published web page obtained from the crawler server into the blank template, wherein the crawler server periodically crawls the published web page from the web page server, and stores the crawled HTML source code of the published web page in a local database, and after the blank template is created, the web page editing end calls the HTML source code from the local database and adds it to the blank template; After the webpage editing end monitors that the blank template completes the insertion of the HTML source code, the blank template is instantiated to preview the corresponding editable webpage on the webpage editing end; The webpage editing terminal receives editing data acting on the editable webpage and stores the editing data in a global variable, wherein the editing data includes any one or more of text editing data, picture editing data, audio editing data, video editing data, table editing data, and control editing data; The web page editing end responds to the data update of the global variable, refreshes the preview effect of the editable web page according to the edit data stored in the global variable, and then, in response to the user's release instruction, the crawler server synchronizes the updated edit data in the global variable to the web page server to update the published web page, wherein the web page editing end transmits the resources corresponding to the editable page to the crawler server by submitting the edit data of the global variable and the corresponding HTML source code to the crawler server, and then the crawler server synthesizes them into an edited page file for uploading to replace the corresponding web page file on the web server, thereby updating the web page.

2. The method according to claim 1, characterized in that The HTML source code inserted into the blank template only includes its executable code and / or style code.

3. The method according to claim 1, characterized in that The editing data includes definition data of one or more layout elements in the editable web page.

4. The method according to claim 1, characterized in that A root element ID identical to that of the publishing end of the published web page is created for the blank template, so that the editing data of the edited editable web page is synchronized to the publishing end for publishing according to the root element ID.

5. The method according to claim 1, characterized in that The web page editing terminal provides a graphical user interface, which includes an editing control area and an editing preview area. The editing control area is used to trigger an editing event acting on the editable web page, and the editing preview area is used to display a preview effect of the editable web page.

6. A web page real-time preview and editing device, characterized in that: include: An inserting unit is used to create a blank template at the web page editing end, and insert the HTML source code of the published web page obtained from the crawler server into the blank template, wherein the crawler server periodically crawls the published web page from the web page server, and stores the crawled HTML source code of the published web page in a local database. After the blank template is created, the web page editing end calls the HTML source code from the local database and adds it to the blank template; The editing unit is configured to instantiate the blank template to preview the corresponding editable web page on the web page editing end after the web page editing end monitors that the blank template completes the insertion of the HTML source code; A receiving unit, configured to receive editing data acting on the editable web page at a web page editing end, and store the editing data in a global variable, wherein the editing data includes any one or any combination of text editing data, picture editing data, audio editing data, video editing data, table editing data, and control editing data; The preview unit is configured such that the web page editing end responds to the data update of the global variable, refreshes the preview effect of the editable web page according to the edit data stored in the global variable, and then, in response to the user's release instruction, the crawler server synchronizes the edit data updated in the global variable to the web page server to realize the update of the published web page, wherein the web page editing end transmits the resources corresponding to the editable page to the crawler server by submitting the edit data of the global variable and the corresponding HTML source code to the crawler server, and then the crawler server synthesizes them into an edited page file for uploading to replace the corresponding web page file on the web server, thereby realizing the web page update.

7. An electronic device, comprising a central processing unit and a memory, characterized in that: The central processing unit is used to call and run the computer program stored in the memory to execute the steps of the web page real-time preview editing method according to any one of claims 1 to 5.

8. A non-volatile storage medium, characterized in that: It stores a computer program implemented according to the web page real-time preview editing method described in any one of claims 1 to 5, and when the computer program is called and run by a computer, the steps included in the method are executed.

Images