Page generating and updating method

Abstract

The invention discloses a page generating and updating method, and belongs to the technical field of Internet. According to the scheme, firstly, a page template file is designed, semantic tags are used as placeholders in the page template file, a corresponding HTML code template is defined for each semantic tag, and a semantic tag plug-in of a rich text editor is developed; creating an editing interface according to the page template file, creating a rich text editor for each semantic tag in the template file, and editing content corresponding to each semantic tag through the rich text editor and the semantic tag plug-in thereof; then monitoring the change of the content of the rich text editor, and binding the HTML code needing to be replaced with the semantic tag to form an HTML code snippet list; and finally, the template engine generates or updates the page according to the HTML code snippet list. By means of the template file and the rich text editor plug-in, flexible editing and efficient management of page content are achieved, and the operation efficiency is remarkably improved.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a page generation and updating method. Background Art

[0002] In content-based pages such as e-commerce, news and blog aggregation, the page layout is usually relatively fixed. The content editing and publishing of these pages are usually completed by operators through the operation platform. However, there are the following problems in the content editing and updating process:

[0003] 1. High technical threshold: Content editing and updating require operators to have certain basic knowledge of HTML, CSS, etc., which puts forward higher technical requirements for operators and increases the difficulty of their work.

[0004] 2. Inefficiency: Due to the existence of technical barriers, operators often need to spend more time and energy when editing and updating content, which affects work efficiency.

[0005] These problems not only limit the work flexibility of operators, but also reduce the overall efficiency of content editing and publishing. Therefore, a solution that can lower the technical threshold and improve editing and updating efficiency is urgently needed to meet the growing needs of content management and publishing. Summary of the invention

[0006] The technical problem to be solved by the present invention is: to provide a page generation and updating method in view of the above-mentioned defects of the prior art.

[0007] To achieve the above object, the present invention provides a page generation and updating method, the method comprising the following steps:

[0008] Step S1, designing a page template file, in which one or more semantic tags are used as placeholders to replace the actual content of the page;

[0009] Step S2, defining an HTML code template for each of the semantic tags, and developing a semantic tag plug-in for a rich text editor; the semantic tag plug-in for the rich text editor displays the page element layout and placeholder content corresponding to the HTML code template corresponding to the semantic tag in the rich text editor in response to a click operation by a user;

[0010] Step S3, creating an editing interface according to the page template file, creating a rich text editor for each of the semantic tags in the page template file, and editing the page content corresponding to each of the semantic tags through the rich text editor and the rich text editor semantic tag plug-in; if the page is updated, obtaining the page content of the previous historical version, and displaying the content corresponding to each semantic tag in the rich text editor corresponding to it;

[0011] Step S4, monitoring the changes of the content of each rich text editor, and obtaining the HTML code corresponding to the page content in the rich text editor, binding the HTML code with the semantic tag corresponding to the rich text editor and storing it in the HTML code snippet list; if it is an updated page, comparing and merging the page content in the rich text editor with the page content of the previous historical version to form a new HTML code, binding the new HTML code with the semantic tag corresponding to the rich text editor and storing it in the HTML code snippet list;

[0012] Step S5: The template engine uses the content in the HTML code snippet list to generate a new page file or update an existing page file.

[0013] Preferably, in step S2, the specific method of defining an HTML code template for each semantic tag is as follows: the semantic tag contains a string part, the string part of each semantic tag is a unique value, and the id attribute value of the root node of the HTML code template is the same as the string part in the semantic tag.

[0014] Preferably, in step S2, the specific method for developing a rich text editor semantic tag plug-in is: the rich text editor semantic tag plug-in responds to a user's click operation, and displays corresponding page elements and placeholder content in the page according to the type of each tag in the HTML code template corresponding to the semantic tag and the id and class attribute values.

[0015] Preferably, in step S3, the specific method of creating a rich text editor bound to each semantic tag in the page template file is: inserting an iframe tag in the editing area of ​​the rich text editor, inserting a body tag in the iframe tag, setting the contenteditable attribute of the body tag to true, and recording the correspondence between the iframe and the semantic tag in the rich text editor.

[0016] Preferably, in step S4, the specific method of monitoring the change of the content of each rich text editor is: monitoring the change of the content of each rich text editor by binding a processing function of an onchange event or an onblur event.

[0017] Preferably, in step S4, the specific method of comparing and merging the page content in the rich text editor with the page content of the previous historical version to form a new HTML code is: converting the HTML code in the page content in the rich text editor and the HTML code in the page content of the previous historical version into a custom JSON format, traversing and comparing the contents of each DOM node in the page in the rich text editor and the page of the previous historical version through the JSON format, replacing or merging the node contents according to the comparison results to form a new HTML code.

[0018] Preferably, the specific method for converting to the custom JSON format is: taking the root node as a JSON object, whose structure is {'componentName':,'props':{},'children':[],}, wherein the componentName field corresponds to the id attribute value of the root node, the props field corresponds to the set of other attributes and attribute values ​​of the root node, the children field corresponds to the child node list of the root node, and the structure of each object in children is {'componentName':,'content':{'type':,'value':,'style':{},'class':}}, wherein the componentName field corresponds to the id attribute or class attribute value of the child node, the type field under the content field corresponds to the type of the node, the value field corresponds to the specific content of the node, the style attribute corresponds to the style of the node, and the class field corresponds to the class attribute value of the node.

[0019] Preferably, the specific method of replacing or merging the node contents according to the comparison result to form a new HTML code includes:

[0020] Use the componentName field to locate the root node, traverse each child node under children in turn, and compare whether the content object value of each child node has changed;

[0021] For nodes whose content has been modified, the modified version shall prevail. For newly added child nodes under the nodes in the original DOM tree, the newly added child nodes shall be merged with the old nodes in the historical version.

[0022] Preferably, the specific method of replacing or merging the node contents according to the comparison result to form a new HTML code also includes:

[0023] If the componentName field of the root node matches, but the number of unmatched first-level child nodes of the root node exceeds the preset threshold, or the componentName field of the root node does not match, the comparison of subsequent nodes is skipped, and the HTML code corresponding to the content in the rich text editor is used as the new HTML code.

[0024] Preferably, before step S3, the method further includes:

[0025] A rich text editor interactive function plug-in is developed for the page interactive function. The rich text editor interactive function plug-in responds to a user's click operation and inserts a page with interactive function in the rich text editor in the form of an iframe.

[0026] The present invention has the following beneficial effects: the present invention first designs a page template file, uses semantic tags as placeholders in the page template file to replace the actual content of the page, defines a corresponding HTML code template for each semantic tag, and develops a semantic tag plug-in for a rich text editor; then creates an editing interface based on the page template file, creates a rich text editor for each semantic tag in the template file, and edits the content corresponding to each semantic tag through the rich text editor and its semantic tag plug-in; then monitors the changes in the content of each rich text editor, binds the HTML code that needs to be replaced to the semantic tag, and forms an HTML code snippet list; finally, the template engine generates or updates the page based on the HTML code snippet list. This solution significantly reduces the technical threshold for operators through page templates and rich text editor plug-ins, allowing non-technical personnel to efficiently manage and edit page content, greatly improving operational efficiency, simplifying the editing and management process of page content, and making operational work more convenient and efficient. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the drawings:

[0028] Figure 1 A schematic diagram of the steps of a page generation and updating method provided by an embodiment of the present invention.

[0029] Figure 2 A schematic diagram of a rich text editor provided by an embodiment of the present invention.

[0030] Figure 3An effect diagram of inserting an accounting module with interactive functions by clicking an accounting plug-in in a rich text editor provided in an embodiment of the present invention.

[0031] Figure 4 A schematic diagram of the semantic tag HTML code provided by an embodiment of the present invention.

[0032] Figure 5 A schematic diagram of an initial page displayed in a rich text editor through a rich text editor semantic tag plug-in provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0033] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0034] The embodiments of the present invention are further described in detail below in conjunction with the accompanying drawings of the specification. It should be understood that the embodiments described herein are only used to illustrate and explain the present invention, and are not used to limit the present invention.

[0035] like Figure 1 As shown, an embodiment of the present invention provides a page generation and updating method, the method comprising the following steps:

[0036] Step S1, designing a page template file, in which one or more semantic tags are used as placeholders to replace actual page content.

[0037] In an embodiment of the present invention, ESJ (Embedded JavaScript) is used to create an .ejs template file, and <%-%> is used in the .esj template file to define semantic tags. In actual applications, the required page template file is written and designed according to the page interaction effect, and the content contains some semantic tags or special tags for subsequent data replacement and filling and key code scripts, such as: header, navigation bar, bottom, etc. In order to facilitate comparison with the business, business-specific semantic tags are introduced in the template design. The identifier of the semantic tag is a string, and each string uniquely identifies a semantic tag. For example, <%-product-info%> is used to identify the product information part, and <%-product-description%> is used to describe the product details. In addition, it can also be classified and named according to the commonality and relevance of the content to form a label system with business characteristics. For example, define product tags: such as <%-product-category->(product category), <%-product-detail->(product details), etc., to organize and manage product information; service tags: such as <%-service-introduction->(service introduction), <%-service-process->(service process), etc., to display and explain service content; user tags: such as <%-user-profile->(user profile), <%-user-activity->(user activity), etc., to manage and display user information. Semantic tags can be used to further build hierarchical page content, or more complex page hierarchies can be achieved through nested template files.

[0038] Examples of level labels are as follows:

[0039]

[0040] <%-product-category%>

[0041] <%-product-detail%>

[0042] <%-product-info%>

[0043]

[0044]

[0045] <%-product-description%>

[0046]

[0047] An example of a nested tag / template is as follows:

[0048]

[0049] <%-product-list%>

[0050]

[0051] <%users.forEach(function(user){%>

[0052] <%-include('product.ejs',{user:user});%>

[0053] <%});%>

[0054]

[0055] <%-product-similar%>

[0056]

[0057] Semantic tags simplify the representation of data and clarify the purpose and ownership of each part of the data. They have significant advantages in improving the clarity of content structure, enhancing the expression of semantic information, and accelerating the development process.

[0058] In some embodiments of the present invention, when designing a page template file, compression and optimization are performed on resources such as CSS and JS, and corresponding static page versions can be generated for different devices. For example, corresponding style files can be added to mobile H5 and PC devices to optimize the responsive layout performance effect.

[0059] In some embodiments of the present invention, the page template file is stored in the distributed object storage system minio. The distributed object system can realize efficient storage and access of the template, support high availability and data redundancy backup, and ensure the stability and scalability of the system. In some other embodiments of the present invention, the page template file is stored in gitlab. In practical applications, the page template file storage path can be organized according to the business type to achieve efficient and orderly storage.

[0060] Step S2, defining an HTML code template for each of the semantic tags, and developing a rich text editor semantic tag plug-in; the rich text editor semantic tag plug-in responds to a user's click operation to display the page element layout and placeholder content corresponding to the HTML code template corresponding to the semantic tag in the rich text editor.

[0061] In the embodiment of the present invention, the BS (Browser / Server) architecture is used to implement the page generation and update functions, and the operator publishes and manages the content through a unified operation platform. The operator accesses the operation platform through the browser and edits the page content through the rich text editor. The rich text editor semantic tag plug-in effectively reduces the technical threshold and editing difficulty. The browser side summarizes the HTML code that needs to be replaced in the page template file and submits it to the background server. The server calls the EJS template engine to replace the semantic tags in the page template file with the HTML code submitted by the browser, and generates a new static page file or updates the original static page file.

[0062] like Figure 2 As shown, this is the rich text editor interface corresponding to the <%-product-detail%> semantic tag. A large number of rich text editor plug-in icons are integrated above the editing area. Clicking the plug-in icon can quickly insert preset content in the editing area. In an embodiment of the present invention, a corresponding HTML code template is defined for each semantic tag in the page template file, and a rich text editor semantic tag plug-in is developed for each semantic tag. Clicking the rich text editor semantic tag plug-in can display the page element layout and placeholder content corresponding to the HTML code template corresponding to the semantic tag in the rich text editor. The operator can insert the corresponding content in the page area according to the placeholder content prompt. By creating a page in this way, operators can quickly get started without mastering the basic knowledge of HTML and CSS, which effectively improves operational efficiency.

[0063] In some embodiments of the present invention, in addition to the rich text editor semantic tag plug-in, a rich text editor interactive function plug-in is also developed for page interactive functions. The rich text editor interactive function plug-in responds to the user's click operation and inserts a page with interactive functions in the rich text editor in the form of an iframe. Figure 3 The following is a diagram showing the effect of inserting an accounting module with interactive functions by clicking the accounting plug-in in the rich text editor. In actual applications, the interactive module can be inserted at the corresponding position of the page as needed.

[0064] In the embodiment of the present invention, in order to facilitate real-time viewing of the HTML code of the content in the rich text editor, an HTML code viewing plug-in is also designed. Click the HTML code viewing plug-in to display the HTML code corresponding to the page content in the rich text editor. This function is usually used by developers to assist operators in debugging page effects. The specific implementation method is as follows: when clicking the HTML code viewing plug-in, read the display style value of the iframe tag in the rich text editor and set it to none; then add a div tag at the same level as the iframe tag, whose id value is CodeMirror, split the HTML source code under the body into individual tags, such as keywords, identifiers, operators, etc., and use the js syntax structure to do dictionary mapping, assign different colors to different tags, and display the HTML code of all dom nodes under the body element in the div tag with the id value of CodeMirror according to the HTML syntax and the assigned color through the pre tag. When clicking the HTML code viewing plug-in again, hide the div tag with the id value of CodeMirror, and show the original iframe tag in the rich text editor.

[0065] In addition, plug-ins can be developed for other commonly used functions based on operational needs to improve operational efficiency.

[0066] In the embodiment of the present invention, in step S2, the specific method of defining an HTML code template for each semantic tag is as follows: the semantic tag includes a string part, the string part of each semantic tag is a unique value, and the id attribute value of the root node of the HTML code template is the same as the string part in the semantic tag. For example, for the semantic tag <%-product-detail%>, the root node of the corresponding HTML code template is <div id＝’product-detail’>。

[0067] The specific method for developing the semantic tag plugin of the rich text editor is as follows: in response to the user's click operation, the semantic tag plugin of the rich text editor displays the corresponding page elements and placeholder content on the page according to the types of each tag and the id and class attribute values in the HTML code template corresponding to the semantic tag.

[0068] Such as Figure 4 shown is the schematic diagram of the HTML code of product-detail, and as Figure 5 shown is the schematic diagram of the initial page displayed in the rich text editor through the semantic tag plugin of the rich text editor. Figure 5 The page content in Figure 4 corresponds to the HTML code in Figure 5

[0069] Step S3, create an editing interface according to the page template file, create a rich text editor for each semantic tag in the page template file, and edit the page content corresponding to each semantic tag through the rich text editor and the semantic tag plugin of the rich text editor; if it is to update the page, obtain the page content of the previous historical version, and display the content corresponding to each semantic tag in the rich text editor corresponding to it;

[0070] When the user creates a new page, first, the user needs to select a page template file. The browser sends a request to the server to obtain the content of the page template file. The server obtains the specific content of the page template file from Minio or GitLab according to the page template file name. The browser parses the page template file, creates an editing section, and creates a corresponding rich text editor for each semantic tag.

[0071] In an embodiment of the present invention, in step S3, the specific method of creating a rich text editor for each of the semantic tags in the page template file is: inserting an iframe tag in the editing area of ​​the rich text editor, inserting a body tag in the iframe tag, setting the contenteditable attribute of the body tag to true, and recording the correspondence between the iframe and the semantic tag in the rich text editor in the memory.

[0072] For newly added pages, operators use the rich text editor semantic tag plug-in to display placeholder content in the rich text editor, and edit text, insert pictures, and other operations according to the placeholder content prompts. For updated pages, the browser obtains the page content of the previous historical version based on the page ID, and displays the content corresponding to each semantic tag in the corresponding rich text editor. Operators make modifications based on the page content of the historical version. Whether it is a new page or an updated page, the root node corresponding to the semantic tag will be inserted under the body tag under the iframe of the rich text editor, and the id attribute value of the root node will be set to the string part in the semantic tag.

[0073] Page template files are usually universal, and multiple pages can be generated from one page template file. For example, if a product details page template is created, when the operator needs to generate specific pages for multiple products, they can select the same product details page template, fill in different product information each time, and generate detail pages corresponding to different products.

[0074] Step S4, monitor the changes of the content of each rich text editor, and obtain the HTML code corresponding to the page content in the rich text editor, bind the HTML code with the semantic tag corresponding to the rich text editor and store it in the HTML code snippet list; if it is an updated page, compare and merge the page content in the rich text editor with the page content of the previous historical version to form a new HTML code, bind the new HTML code with the semantic tag corresponding to the rich text editor and store it in the HTML code snippet list.

[0075] In the embodiment of the present invention, in the step S4, the specific method of monitoring the change of the content of each rich text editor is: monitoring the change of the content of each rich text editor by binding the processing function of the onchange event or the onblur event.

[0076] In an embodiment of the present invention, in step S4, the specific method of comparing and merging the page content in the rich text editor with the page content of the previous historical version to form a new HTML code is: converting the HTML code in the page content in the rich text editor and the HTML code in the page content of the previous historical version into a custom JSON format, traversing and comparing the contents of each DOM node in the page in the rich text editor and the page of the previous historical version through the JSON format, replacing or merging the node contents according to the comparison results to form a new HTML code. In some embodiments of the present invention, the specific method of converting to the custom JSON format is: take the root node as a JSON object, whose structure is {'componentName':,'props':{},'children':[],}, wherein the componentName field corresponds to the id attribute value of the root node, the props field corresponds to the set of other attributes and attribute values ​​of the root node, the children field corresponds to the list of child nodes of the root node, and the structure of each object in children is {'componentName':,'content':{'type':,'value':,'style':{},'class':}}, wherein the componentName field corresponds to the id attribute or class attribute value of the child node, the type field under the content field corresponds to the type of the node, the value field corresponds to the specific content of the node, the style attribute corresponds to the style of the node, and the class field corresponds to the class attribute value of the node. Table 1 is an example of an HTML code snippet and its corresponding JSON object.

[0077] Table 1 Comparison table of HTML code and JSON object

[0078]

[0079]

[0080] In some embodiments of the present invention, the specific method of replacing or merging the node contents according to the comparison result to form a new HTML code includes:

[0081] Use the componentName field to locate the root node, traverse each child node under children in turn, and compare whether the content object value of each child node has changed.

[0082] For nodes whose content has been modified, the modified content will prevail. For example, for span tags with the same class attribute value, if the corresponding content is modified, the modified content will prevail.

[0083] For newly added child nodes under the nodes in the original DOM tree, merge the newly added child nodes with the old nodes in the historical version. For example, in the previous historical version, there are 2 li tags under a ul tag, and in the rich text editor, there are 3 li tags under this ul tag, 2 of which have the same content as in the previous historical version, the modified one shall prevail. If in the previous historical version, there are 2 li tags under a ul tag, and in the rich text editor, there is only 1 li tag under this ul tag, and the content of this li tag is different from the 2 li tags in the historical version, then merge the two versions to form 3 li tags. It can be understood that the processing strategy for newly added nodes can be adjusted according to actual needs.

[0084] When the number of nodes is large, node comparison through JSON objects consumes a large amount of page memory. In some embodiments of the present invention, if the componentName field of the root node matches, but the number of unmatched first-level child nodes of the root node exceeds a preset threshold, or the componentName field of the root node does not match, the comparison of subsequent nodes is skipped, and the HTML code corresponding to the page content in the rich text editor is used as the new HTML code. In the above two cases, it is considered that the rich text editor is brand new content, and all the content in the rich text editor is directly used to replace the content of the corresponding semantic tag of the original page. When the number of nodes is large, the above method can effectively reduce the browser page memory consumption.

[0085] Step S5: The template engine uses the content in the HTML code snippet list to generate a new page file or update an existing page file.

[0086] An editing page usually has multiple rich text editors. The browser monitors the content changes of each rich text editor, collects the HTML code snippets that need to be replaced in the template, and forms an HTML code snippet list. In response to the user's confirmation of the modification, the browser submits the content in the HTML code snippet list to the server. For the updated page, if the content of a rich text editor has not changed, the content corresponding to the rich text editor in the previous historical version is placed in the corresponding position in the HTML code snippet list.

[0087] The server calls the EJS template engine and uses the corresponding HTML code in the HTML code snippet list to replace each semantic tag, generate a new static page, or update the original page.

[0088] In some embodiments of the present invention, the static pages generated by the EJS template engine are stored in the distributed object storage system minio. For the convenience of management and access, the generated static pages will be organized according to certain rules. For example, static pages can be stored in different minio file paths according to date, classification or other logic. The distributed object storage system adopts a high-performance storage engine and algorithm, can provide excellent performance, support high-concurrency read and write operations, has the characteristics of low latency and high throughput, supports horizontal expansion, and can easily add or delete nodes to meet storage needs of different scales. Using a distributed storage architecture, data is stored in multiple nodes in a dispersed manner to ensure data reliability and availability. The distributed object storage system supports redundant data storage and automatic repair, and can ensure data integrity and accessibility even in the event of node failure. The use of a distributed object storage system can greatly enhance the user experience.

[0089] The automatic publishing process of static pages can be connected with the EJS template engine to display or update static pages in real time on the client, thereby realizing a one-stop and efficient page management process and improving operation and maintenance efficiency.

[0090] The present invention has the following beneficial effects: the present invention first designs a page template file, uses semantic tags as placeholders in the page template file to replace the actual content of the page, defines a corresponding HTML code template for each semantic tag, and develops a semantic tag plug-in for a rich text editor; then creates an editing interface based on the page template file, creates a rich text editor for each semantic tag in the template file, and edits the content corresponding to each semantic tag through the rich text editor and its semantic tag plug-in; then monitors the changes in the content of each rich text editor, binds the HTML code that needs to be replaced to the semantic tag, and forms an HTML code snippet list; finally, the template engine generates or updates the page based on the HTML code snippet list. This solution significantly reduces the technical threshold for operators through page templates and rich text editor plug-ins, allowing non-technical personnel to efficiently manage and edit page content, greatly improving operational efficiency, simplifying the editing and management process of page content, and making operational work more convenient and efficient.

[0091] The above are only specific implementations of the present invention, which cannot be used to limit the scope of the present invention. Equivalent changes made by ordinary technicians in this technical field based on this creation, as well as changes known to technicians in this field, should still fall within the scope of the present invention.

Claims

1. A page generation and updating method, characterized in that: The method comprises the following steps: Step S1, designing a page template file, in which one or more semantic tags are used as placeholders to replace the actual content of the page; Step S2, defining an HTML code template for each of the semantic tags, and developing a semantic tag plug-in for a rich text editor; the semantic tag plug-in for the rich text editor displays the page element layout and placeholder content corresponding to the HTML code template corresponding to the semantic tag in the rich text editor in response to a click operation by a user; Step S3, creating an editing interface according to the page template file, creating a rich text editor for each of the semantic tags in the page template file, and editing the page content corresponding to each of the semantic tags through the rich text editor and the rich text editor semantic tag plug-in; if the page is updated, obtaining the page content of the previous historical version, and displaying the content corresponding to each semantic tag in the rich text editor corresponding to it; Step S4, monitoring the changes of the content of each rich text editor, and obtaining the HTML code corresponding to the page content in the rich text editor, binding the HTML code with the semantic tag corresponding to the rich text editor and storing it in the HTML code snippet list; if it is an updated page, comparing and merging the page content in the rich text editor with the page content of the previous historical version to form a new HTML code, binding the new HTML code with the semantic tag corresponding to the rich text editor and storing it in the HTML code snippet list; Step S5: The template engine uses the content in the HTML code snippet list to generate a new page file or update an existing page file.

2. The page generation and updating method according to claim 1, characterized in that: In step S2, the specific method of defining an HTML code template for each semantic tag is as follows: the semantic tag contains a string part, the string part of each semantic tag is a unique value, and the id attribute value of the root node of the HTML code template is the same as the string part in the semantic tag.

3. The page generation and updating method according to claim 2, characterized in that: In step S2, the specific method for developing a rich text editor semantic tag plug-in is: the rich text editor semantic tag plug-in responds to the user's click operation, and displays the corresponding page elements and placeholder content in the page according to the type of each tag in the HTML code template corresponding to the semantic tag and the id and class attribute values.

4. The page generation and updating method according to claim 3, characterized in that: In step S3, the specific method of creating a rich text editor bound to each semantic tag in the page template file is: inserting an iframe tag in the editing area of ​​the rich text editor, inserting a body tag in the iframe tag, setting the contenteditable attribute of the body tag to true, and recording the correspondence between the iframe and the semantic tag in the rich text editor.

5. The page generation and updating method according to claim 1, characterized in that: In the step S4, the specific method of monitoring the change of the content of each rich text editor is: monitoring the change of the content of each rich text editor by binding the processing function of the onchange event or the onblur event.

6. The page generation and updating method according to claim 5, characterized in that: In the step S4, the specific method of comparing and merging the page content in the rich text editor with the page content of the previous historical version to form a new HTML code is: converting the HTML code in the page content in the rich text editor and the HTML code in the page content of the previous historical version into a custom JSON format, traversing and comparing the contents of each DOM node in the page in the rich text editor and the page of the previous historical version through the JSON format, replacing or merging the node contents according to the comparison results to form a new HTML code.

7. The page generation and updating method according to claim 6, characterized in that: The specific method for converting to the custom JSON format is: taking the root node as a JSON object, whose structure is {'componentName':,'props':{},'children':[],}, wherein the componentName field corresponds to the id attribute value of the root node, the props field corresponds to the set of other attributes and attribute values ​​of the root node, the children field corresponds to the child node list of the root node, and the structure of each object in children is {'componentName':,'content':{'type':,'value':,'style':{},'class':}}, wherein the componentName field corresponds to the id attribute or class attribute value of the child node, the type field under the content field corresponds to the type of the node, the value field corresponds to the specific content of the node, the style attribute corresponds to the style of the node, and the class field corresponds to the class attribute value of the node.

8. The page generation and updating method according to claim 7, characterized in that: The specific method of replacing or merging the node contents according to the comparison result to form a new HTML code includes: Use the componentName field to locate the root node, traverse each child node under children in turn, and compare whether the content object value of each child node has changed; For nodes whose content has been modified, the modified version shall prevail. For newly added child nodes under the nodes in the original DOM tree, the newly added child nodes shall be merged with the old nodes in the historical version.

9. The page generation and updating method according to claim 8, characterized in that: The specific method of replacing or merging the node contents according to the comparison result to form a new HTML code also includes: If the componentName field of the root node matches, but the number of unmatched first-level child nodes of the root node exceeds the preset threshold, or the componentName field of the root node does not match, the comparison of subsequent nodes is skipped, and the HTML code corresponding to the content in the rich text editor is used as the new HTML code.

10. The page generation and updating method according to claim 1, characterized in that: Before step S3, the method further includes: A rich text editor interactive function plug-in is developed for the page interactive function. The rich text editor interactive function plug-in responds to a user's click operation and inserts a page with interactive function in the rich text editor in the form of an iframe.

Images