A method for running a rich text editor supporting dynamic templates

Abstract

The present invention relates to the technical field of rich text editors, and in particular to a method for running a rich text editor that supports dynamic templates. The method includes inserting dynamic data through a rich text editor and outputting it as HTML content, precompiling the received HTML content through a precompiler and writing it into a database, parsing and rendering the precompiled HTML content in the database, and co-editing through multiple users, which effectively solves the limitations of existing rich text editors in processing dynamic data and co-editing: users can directly insert and operate dynamic data in the editor, create richer and more personalized documents, and improve content management flexibility; the pre-compilation mechanism optimizes content loading and presentation speed, and enhances user experience; editing conflicts are avoided through multi-user co-editing, data integrity is ensured, and collaboration efficiency and transparency are improved through real-time synchronization.

Description

Technical Field

[0001] The present invention relates to the technical field of rich text editors, and in particular to a rich text editor operation method supporting dynamic templates. Background Art

[0002] With the rapid development of information technology and corporate business, enterprises have an increasing demand for data processing and presentation. Template editors play a vital role in many business scenarios, such as in-site message sending templates and email sending templates. Traditional template editors focus more on text editing and formatting, but have limitations in processing dynamic data and expressions.

[0003] Currently, there are many rich text editors on the market, such as WangEditor4, which provide rich text editing and formatting functions, but lack the ability to handle dynamic data and expressions. On the other hand, expression evaluation engines such as Liquid can handle complex logic and mathematical operations and dynamically generate content, but they are insufficient in text editing and formatting. Summary of the invention

[0004] In view of the above-mentioned shortcomings of the prior art, an object of the present invention is to provide a method for running a rich text editor supporting dynamic templates, so as to solve one or more problems in the prior art.

[0005] To achieve the above object, the technical solution of the present invention is as follows:

[0006] A method for running a rich text editor supporting dynamic templates includes the following steps:

[0007] Insert dynamic data through the rich text editor and output as HTML content.

[0008] The precompiler precompiles the received HTML content and writes it into the database.

[0009] Parse and render precompiled HTML content in the database.

[0010] Furthermore, inserting dynamic data through a rich text editor and outputting it as HTML content includes:

[0011] Listen to the event triggered by the user's request to insert dynamic data, and output the associated dynamic data after the user selects the entity information.

[0012] Receive dynamic data selected by the user according to the entity information, generate a non-editable DOM object accordingly, and add identification attributes bound to the entity information to the DOM object.

[0013] Get the cursor position, insert the DOM object to the cursor position, and output the HTML content.

[0014] Through the above technical solution, the responsiveness and accuracy of data insertion are improved, the stability and traceability of data are ensured, and the user editing experience and content accuracy are optimized.

[0015] Furthermore, the precompiler precompiles the received HTML content and writes it into the database, including:

[0016] Receive HTML content output by a rich text editor, name the HTML content according to the naming convention, and output the HTML content before pre-compilation.

[0017] The HTML content before pre-compilation is parsed through the HTML parsing library, the original DOM object is obtained, and the DOM tree is constructed.

[0018] Traverse the DOM tree, search for the original DOM object whose identification attribute is a specific field, read the identification attribute of the original DOM object that matches, and output the corresponding identification attribute field and the corresponding entity information.

[0019] According to the grammatical rules of the template language, read and convert the identification attribute fields and the corresponding entity information, output them as template expressions, and name the template expressions according to the naming conventions.

[0020] Generate a conversion rule mapping table to define the mapping relationship between the original DOM object and the template expression.

[0021] According to the conversion rule mapping table, the template expression is overwritten to the original DOM object, and the precompiled HTML content is output and written to the database.

[0022] Through the above technical solutions, the consistency and manageability of data are improved, the accuracy and efficiency of data parsing are enhanced, the standardization and readability of template expressions are improved, the accuracy and processing efficiency of mapping are improved, and the data storage structure and query efficiency are optimized.

[0023] Furthermore, the precompiled HTML content in the database is parsed and rendered:

[0024] Read the precompiled HTML content in the database, parse the precompiled HTML content through the template engine, and output attribute fields and corresponding entity information.

[0025] Generate a hash table and insert the attribute fields and corresponding entity information into the hash table.

[0026] Call the rendering method of the template engine, perform dynamic rendering processing according to the template expression content and the hash table content, and output the rendering result.

[0027] Through the above technical solutions, the accuracy and real-time performance of content rendering are improved, the efficiency and accuracy of data processing are improved, and the dynamic update of content and user visual experience are ensured.

[0028] Furthermore, inserting dynamic data through a rich text editor and outputting it as HTML content also includes:

[0029] Cursor fix, add unicode characters after the DOM object after inserting it at the cursor.

[0030] Through the above technical solution, the cursor abnormality problem caused by the non-editable attributes of the DOM object is fixed.

[0031] Furthermore, the precompiler precompiles the received HTML content and writes it into the database, which further includes:

[0032] Error handling, monitoring the I / O activities of the precompiler and the database, restarting services that fail to connect to the database, terminating processes with read and write permission issues, intercepting incomplete field data, recording error logs and writing them to the database.

[0033] Log storage captures all historical execution activities during the compilation process, generates log files and writes them to the database log area.

[0034] Through the above technical solutions, the stability of the system and the integrity of the data are improved, and the traceability and problem diagnosis capabilities of the system are enhanced.

[0035] Furthermore, the precompiler precompiles the received HTML content and writes it into the database, which further includes:

[0036] Streaming processing processes HTML content block by block and releases the corresponding memory after processing the HTML content block.

[0037] Cache precompilation results, search in the cache after receiving HTML content, call the HTML content already in the cache, and skip the compilation process.

[0038] Through the above technical solution, the memory utilization efficiency and system response speed are improved, and the processing speed and system performance are optimized.

[0039] In a preferred embodiment of the present invention, the operation method further comprises editing by multiple users:

[0040] User access control, create multiple users with different read and write permissions.

[0041] Synchronize user operations, synchronize multi-user historical editing activities through the communication interface, and output multi-user historical and real-time editing activities in real time.

[0042] Through the above technical solution, the efficiency of multi-user collaboration and the real-time nature of data are improved, ensuring that users will not mistakenly edit protected content.

[0043] In a preferred embodiment of the present invention, the multi-user collaborative editing further includes:

[0044] Mark the document version, bind the initial version number to the document, listen to all users' editing events, save the edited document as a new document according to the timestamp and bind the incremental new version number.

[0045] When a user performs an editing operation, the document is locked from other users according to the locking mechanism.

[0046] The above technical solution ensures the management and tracking of document versions.

[0047] In a preferred embodiment of the present invention, the multi-user collaborative editing further includes:

[0048] The merge operation listens to and receives events indicating that the user has completed editing the document. Based on the user's access control, the operation from the user with high-level read / write permissions overwrites the operation from the user with low-level read / write permissions, generates a new document, and binds a new version number.

[0049] Output the merge results, output the latest version of the document and merge records to multiple users.

[0050] Through the above technical solution, editing conflicts are reduced and data consistency is improved, editing priority and data integrity are ensured, and the transparency of collaborative editing and the convenience of review are improved.

[0051] Compared with the prior art, the beneficial technical effects of the present invention are as follows:

[0052] (I) By integrating the rich text editor and dynamic data binding, the present invention enables users to directly embed and manipulate dynamic content during the editing process, thereby creating richer and more interactive documents. This combination improves the flexibility and personalization level of content management, enables users to reflect data changes in real time, and enhances user experience.

[0053] (ii) With the help of template engine and pre-compilation processing mechanism, the present invention can call the database when calling the rich text editor, so that the rich text editor has dynamic data and expression processing capabilities, combining the advantages of both. The pre-compilation process converts dynamic content into static templates, reducing the computing burden of the server, making the document load faster and the content presentation faster, thereby improving the user access speed and the overall performance of the system.

[0054] (III) By implementing multi-user collaborative editing, document locking and real-time operation synchronization technology, the present invention effectively avoids editing conflicts and ensures data integrity while maintaining document content consistency. Real-time synchronization technology allows users to see the operations of other collaborators, enhancing the transparency and efficiency of team collaboration and making multi-person collaboration smoother. BRIEF DESCRIPTION OF THE DRAWINGS

[0055] Figure 1 It is a flow chart of a method for operating a rich text editor supporting dynamic templates according to the present invention. DETAILED DESCRIPTION

[0056] In order to make the purpose, technical solution and advantages of the present invention clearer, a rich text editor component supporting dynamic templates proposed by the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be noted that the structure, proportion, size, etc. illustrated in the drawings attached to this specification are only used to match the contents disclosed in the specification for people familiar with this technology to understand and read, and are not used to limit the limiting conditions for the implementation of the present invention, so they have no technical substantive significance. Any modification of the structure, change in the proportional relationship or adjustment of the size should still fall within the scope of the technical content disclosed by the present invention without affecting the effects and purposes that can be achieved by the present invention.

[0057] Application Overview:

[0058] Traditional rich text editors mainly provide basic functions such as text formatting, image insertion, and table creation to meet users' visual needs for document editing. With the diversification of business needs, users begin to need to embed dynamic content in documents, such as real-time data and user interactive elements. These needs are beyond the capabilities of traditional editors.

[0059] Traditional editors usually do not support direct embedding and processing of dynamic data, which makes content updates cumbersome and untimely. In a team collaboration environment, existing editors cannot effectively support multiple people editing the same document at the same time, which easily leads to conflicts and is difficult to coordinate. As document content becomes more complex, the performance of existing editors decreases when processing large amounts of data, affecting the user experience.

[0060] In view of the above technical problems, the concept of the present invention is to propose a method for calling a database and user access control in a rich text editor to obtain dynamic data processing and collaborative editing functions.

[0061] Exemplary methods:

[0062] like Figure 1 As shown, a method for running a rich text editor supporting dynamic templates includes the following steps:

[0063] S1 inserts dynamic data through a rich text editor and outputs it as HTML content.

[0064] S2 precompiles the received HTML content to the precompiler and writes it into the database.

[0065] S3 parses and renders the precompiled HTML content in the database.

[0066] S4 supports multi-user collaborative editing.

[0067] Among them, S1 inserts dynamic data through a rich text editor and outputs it as HTML content including:

[0068] Deploy and initialize the wangeditor4 runtime environment.

[0069] S110 The user clicks the add button at the cursor position to request to insert dynamic data, and a modal box pops up in the rich text editor. The modal box is divided into left and right columns, the left column displays entity information that can be selected by the user, such as entity properties, relationships, etc., and the right column displays dynamic data associated with the entity information, and the user selects the dynamic data.

[0070] S120 generates a DOM object that is not editable by the user (contenteditable="false") according to the dynamic data selected by the user. The DOM object includes types such as tables and tags.

[0071] Bind a DOM object to that dynamic data.

[0072] Add identification attributes to the dynamic data, such as data-fscloud-context-field and data-fscloud-context-relation. The identification attributes include types such as the nature, relationship, and identity of an entity.

[0073] S130 uses the Range.insertNode method to insert the DOM object into the cursor position.

[0074] Range.insertNode() allows developers to insert nodes precisely into the desired location of a document. This method provides a high degree of flexibility and can insert various types of nodes, including element nodes, text nodes, etc., to support complex document editing requirements. Most modern rich text editors support the operation of Range objects. Using Range.insertNode() ensures compatibility with these editors, and can immediately reflect user input or dynamically generated content in the editor, providing real-time feedback and enhancing the user experience.

[0075] S140 cursor fix, after inserting a DOM object at the cursor, add unicode characters after the DOM object. The user-uneditable attribute of the DOM object (contenteditable="false") will cause the cursor to display abnormally. Adding Unicode characters (such as \uFEFF) after the inserted DOM object can fix this problem.

[0076] The above technical solutions improve the responsiveness and accuracy of data insertion, ensure the stability and traceability of data, optimize the user editing experience and content accuracy. The cursor abnormality caused by the uneditable attributes of DOM objects has been fixed.

[0077] Specifically, S2 precompiles the received HTML content and writes it into the database, including:

[0078] S200 stream processing, the precompiler processes HTML content block by block, and can release the corresponding memory immediately after processing the HTML content block. Stream processing can quickly release the occupied memory and make room for the next data block, thereby improving the concurrent data processing capability.

[0079] S201 caches the pre-compilation result, searches the cache for HTML content, and directly calls the cache if a cache file exists, skipping the compilation process of the HTML content. If no cache exists, continue the compilation process.

[0080] The system implements a cache strategy to store precompiled HTML content in a fast-access storage medium. When the same HTML content or template is requested again, the system can directly obtain the precompiled result from the cache, avoiding repeated precompilation processes. This greatly saves system resources and improves compilation efficiency.

[0081] Through the above technical solution, the memory utilization efficiency and system response speed are improved, and the processing speed and system performance are optimized.

[0082] S210 formulates a naming convention for distinguishing files before and after pre-compilation, and the naming convention specifies how to name HTML content before and after the pre-compilation process step.

[0083] Name the HTML file before precompilation.

[0084] S220 parses and restores the HTML content before pre-compilation through the HTML parsing library to obtain the original DOM object, and constructs a DOM tree using the original DOM object.

[0085] S230 traverses the DOM tree, searches for the original DOM object whose identification attribute is a specific content field, reads the identification attribute of the original DOM object that matches, and restores it to the corresponding identification attribute field and the corresponding entity information.

[0086] S240 reads and converts the recognized attribute fields and the corresponding entity information according to the grammatical rules of the template language, that is, according to the liquid template, outputs them as template expressions, and names the compiled HTML content, that is, the template expression, according to the naming convention.

[0087] S250 generates a conversion rule mapping table, which specifies the mapping relationship between the original DOM object and the template expression.

[0088] S260 overwrites the template expression to the original DOM object according to the conversion rule mapping table, and writes the precompiled HTML content, that is, the overwritten original DOM object, into the database.

[0089] S270 error handling, monitoring the I / O activities of the precompiler and the database, restarting services that fail to connect to the database, terminating processes with read and write permission issues, intercepting incomplete field data, recording error logs and writing them to the database.

[0090] S280 log storage captures all historical execution activities during the compilation process into log files and writes them to the database log area.

[0091] The above technical solutions improve the consistency and manageability of data, enhance the accuracy and efficiency of data analysis, improve the standardization and readability of template expressions, improve the accuracy and processing efficiency of mapping, optimize the data storage structure and query efficiency, improve the stability of the system and the integrity of data, and enhance the traceability and problem diagnosis capabilities of the system.

[0092] Specifically, S3 parses and renders the precompiled HTML content in the database:

[0093] Install DotLiquid through NuGet and initialize it. DotLiquid is the official implementation of the Liquid template engine in .NET. Use the template engine provided by DotLiquid to obtain higher stability and reliability. Convert the required liquid template to a dotliquid template. The dotliquid template contains all the structure and logic of the Liquid template and is the basis for the subsequent rendering process.

[0094] In order to extract the required entities and fields from the precompiled expression, it is preferred to use regular expressions. Regular expressions can accurately match the contents of double braces ({{}}) and the combination of braces and percent signs ({% %}), thereby obtaining the entity names and field names defined in the template.

[0095] S310 reads the precompiled HTML content in the database, parses the precompiled HTML content through a template engine, namely, a dotliquid template, and searches the parsed result in the database.

[0096] S320 generates a hash table and inserts the search result in S310 into the hash table. The result includes the attribute field corresponding to the compiled HTML content and the entity information bound thereto.

[0097] S330 calls the rendering method of the template engine and performs dynamic rendering processing according to the content of the template expression and the content of the hash table. The dynamic rendering method calculates according to the rules in the template expression and the content in the hash table, outputs and displays the rendering result to the user.

[0098] Through the above technical solutions, the accuracy and real-time performance of content rendering are improved, the efficiency and accuracy of data processing are improved, and the dynamic update of content and user visual experience are ensured.

[0099] Specifically, S4 includes:

[0100] S410 user access control, create multiple users with different read and write permissions.

[0101] S420 synchronizes user operations, synchronizes historical editing activities of multiple users through a communication interface, and displays historical editing records and real-time editing activities of all users to everyone in real time.

[0102] Through the above technical solution, the efficiency of multi-user collaboration and the real-time nature of data are improved, ensuring that users will not mistakenly edit protected content.

[0103] In a preferred embodiment of the present invention, the multi-user collaborative editing further includes:

[0104] S421 marks the document version, binds the initial version number to the document, such as 1, and after monitoring all users' editing events, saves the edited document as a new document according to the editing timestamp and binds an incremental new version number, such as 2, 3, 4...

[0105] S422 When the user performs an editing operation, the document is locked for other users according to the locking mechanism. When a user is operating a document, the document is locked and cannot be edited, and other users will also receive a prompt that they cannot edit.

[0106] The above technical solution ensures the management and tracking of document versions.

[0107] In a preferred embodiment of the present invention, the multi-user collaborative editing further includes:

[0108] S423 merge operation, when the document is edited, the editing results of the high-authority user will overwrite the editing results of the low-authority user, generate a new document and bind a new version number.

[0109] S424 outputs the merge result, shows the last edited document to all users, and records and displays the historical editing activities of all authorized users. When an error occurs in overwriting data, the original data can be manually restored.

[0110] The above technical solution reduces editing conflicts and improves data consistency, ensures editing priority and data integrity, and improves the transparency of collaborative editing and the convenience of auditing. The editing records and content of all authorized users are recorded, and the original data can be manually restored when the overwriting result fails.

[0111] The technical features of the above-described embodiments may be arbitrarily combined. To make the description concise, not all possible combinations of the technical features in the above-described embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

Claims

1. A method for running a rich text editor supporting dynamic templates, characterized in that: The following steps are involved: Insert dynamic data through the rich text editor and output it as HTML content; The precompiler precompiles the received HTML content and writes it into the database; Parse and render the precompiled HTML content in the database; Through multi-user collaborative editing; The method of inserting dynamic data through a rich text editor and outputting it as HTML content includes: monitoring an event triggered by a user's request to insert dynamic data, and outputting the associated dynamic data after the user selects entity information; receiving the dynamic data selected by the user according to the entity information, generating a non-editable DOM object accordingly, and adding an identification attribute bound to the entity information to the DOM object; obtaining a cursor position, inserting the DOM object to the cursor position, and outputting HTML content; The precompilation of the received HTML content by the precompiler and writing it into the database includes: streaming processing, processing the HTML content block by block, and releasing the corresponding memory after processing the HTML content block; caching the precompilation result, searching in the cache after receiving the HTML content, calling the HTML content already in the cache, and skipping the compilation process; receiving the HTML content output by the rich text editor, naming the HTML content according to the naming convention, and outputting the HTML content before precompilation; parsing the HTML content before precompilation through the HTML parsing library, obtaining the original DOM object, and building a DOM tree; traversing the DOM tree, searching for the original DOM object whose identification attribute is a specific field, reading the identification attribute of the original DOM object that meets the requirements, and outputting the corresponding identification attribute field and the corresponding entity information; reading and converting the identification attribute field and the corresponding entity information according to the grammatical rules of the template language, and outputting them as template expressions, and naming the template expressions according to the naming convention; generating a conversion rule mapping table for defining the mapping relationship between the original DOM object and the template expression; overwriting the template expression to the original DOM object according to the conversion rule mapping table, outputting the precompiled HTML content and writing it into the database; Among them, multi-user collaborative editing includes: user access control, creating multiple users with different read and write permissions; synchronized user operations, synchronizing multi-user historical editing activities through the communication interface, and real-time output of multi-user historical and real-time editing activities; Among them, parsing and rendering the precompiled HTML content in the database includes: reading the precompiled HTML content in the database, parsing the precompiled HTML content through the template engine, outputting attribute fields and corresponding entity information; generating a hash table, inserting the attribute fields and corresponding entity information into the hash table; calling the rendering method of the template engine, performing dynamic rendering processing according to the template expression content and the hash table content, and outputting the rendering result.

2. A method for running a rich text editor supporting dynamic templates as claimed in claim 1, characterized in that: Inserting dynamic data through the rich text editor and outputting it as HTML content also includes: Cursor fix, add unicode characters after the DOM object after inserting it at the cursor.

3. A method for running a rich text editor supporting dynamic templates as claimed in claim 1, characterized in that: The precompiler precompiles the received HTML content and writes it into the database, which also includes: Error handling, monitoring the I / O activities of the precompiler and the database, restarting services that fail to connect to the database, terminating processes with read and write permission issues, intercepting incomplete field data, recording error logs and writing them to the database; Log storage captures all historical execution activities during the compilation process, generates log files and writes them to the database log area.

4. A method for running a rich text editor supporting dynamic templates as claimed in claim 1, characterized in that: Multi-user collaborative editing also includes: Mark the document version, bind the initial version number to the document, listen to all users' editing events, save the edited document as a new document according to the timestamp and bind the incremental new version number; When a user performs an editing operation, the document is locked from other users according to the locking mechanism.

5. A method for running a rich text editor supporting dynamic templates as claimed in claim 1, characterized in that: Collaborative editing by multiple users also includes: Merge operation: after listening to the event that the user has completed editing the document, based on the user's access control, the operation from the user with high-level read / write permissions will overwrite the operation from the user with low-level read / write permissions, generate a new document and bind a new version number; Output the merge results, output the latest version of the document and merge records to multiple users.

Images