A method for real-time collaborative online editing of OFD documents

Abstract

The application relates to the technical field of document editing, and discloses a method for real-time collaborative online editing of an OFD (Open Format Document) document. The method comprises the following steps: using a front-end storage technology on a browser side to store all local and received atomized operations, using a local OFD (Open Format Document) editor program on the browser side to modify and render according to the atomized operation instructions, and collaboratively editing the OFD (Open Format Document) online document by multiple users on multiple browser sides. The editing is realized through an OT (Operational Transformation) algorithm. First, an atomized operation data structure is established, and the atomized operation data is endowed with an operation serial number, a stamp, a document code, an operation type, an operation node path, a start position, an end position, an operation value and a user account number. The application can greatly reduce the operation pressure of a server in collaborative editing, greatly improve the speed of online editing, and thus provide better user experience.

Description

TECHNICAL FIELD

[0001] The application relates to the technical field of document editing, and particularly relates to a method for online real-time collaborative editing of an OFD document. BACKGROUND

[0002] OFD (Open Format Document) is a standard-defined format of a Chinese format document. The so-called "format document" refers to page content described by the format document, which has fixed position, size, color and other appearance information, and ensures that the display effect of the page content on all terminals is completely fixed and consistent.

[0003] An OFD online editor is based on typescript language and realizes functions such as analysis, display, editing and generation of an OFD document. A virtual OFD file refers to a tree structure created by the OFD online editor according to the file structure and file of the OFD document standard in the form of a js object and a class. IndexedDB is a browser-side database that can be created and operated by a webpage script program. It allows storage of a large amount of data, provides a search interface and can establish an index. These are not provided by localStorage. In terms of database types, IndexedDB does not belong to a relational database (does not support SQL query statements) and is closer to a NoSQL database. A database is a "warehouse for organizing, storing and managing data according to a data structure". It is a long-term storage in a computer, an organized, shareable and uniformly managed large amount of data collection. An OT algorithm is an algorithm used in collaboration technology to keep different data copies consistent. In different terminals, the operation is adjusted according to the operation sequence to keep the data consistent.

[0004] Online office is becoming more and more common, and collaborative editing of online documents is also more and more widely applied. As a standard of domestic format documents, the OFD document has not realized online collaborative editing, which has affected the promotion of the OFD document itself. With the increasingly wide application of the OFD document, the application scenarios of the OFD file are also more and more, and pure display of the OFD file cannot meet the needs of users. It is necessary to create and edit the OFD document online, and then it is necessary to realize online collaborative editing of the OFD document.

[0005] At present, Google online document, Microsoft online document, Kingsoft online document and the like can provide the collaborative editing function of online document. But these online documents do not support the online editing of OFD document and the collaborative editing of OFD document. The existing online document editing function is generally that the browser end sends the atomized operation data based on the browser end DOM operation, the server end receives the atomized operation data, and the server end converts the browser end DOM operation into the parsing and conversion of online document and the like editing operation, modifies the online document, and then the server end sends the atomized operation data based on the browser end DOM operation to the browser end, finally triggers the browser end change and rendering. The browser end is only a page rendering tool and does not perform document editing operation. This scheme needs the server end to perform a large amount of online document editing operation, and the speed is highly dependent on the performance of the server and the network condition. Once the network has a problem or the server end service has a problem, the entire editing operation cannot proceed any more.

[0006] In summary, there is no enterprise in the market to provide the online collaborative editing function of OFD document at present, and a kind of OFD document real-time collaborative online editing method is needed for this problem. SUMMARY

[0007] The purpose of the present application is to provide a kind of OFD document real-time collaborative online editing method. The collaborative editing of the present application serializes the atomic operation sequence of the user, then operates OFD virtual file according to the data of atomic operation, then modifies the virtual dom tree of the corresponding level according to OFD virtual file, and finally renders to browser end. The server end is only used as the resource service of OFD file and the receiving and sending management center of atomic operation, and does not need to perform OFD online document editing operation synchronously, and the corresponding editing operation is performed on each browser end. The server end stores the atomic operation in database, and simultaneously receives and broadcasts the atomic operation data using network transmission, so as to realize real-time online editing.

[0008] The editing operation of the browser end and the server of the present application is independent of each other, and only the atomic operation data needs to be interacted between the two. In this way, the running pressure of the server in collaborative editing can be greatly reduced, the speed of online editing can be greatly improved, and better user experience can be provided. Moreover, even if the server end has a problem, as long as the editing has been started locally, it will not be affected. Moreover, the local browser end can store the corresponding atomic operation, and as long as the network or server recovers normally, the synchronization of the document can be realized, and the existing editing operation record will not be lost.

[0009] The present application is implemented as follows:

[0010] The present application provides a kind of OFD document real-time collaborative online editing method, which is executed according to the following steps:

[0011] S1: Online editing of OFD documents, first using front-end storage technology on the browser side to store all local and received atomized operations, the browser side using a local OFD editor program to modify and render according to the atomized operation instructions; using front-end storage technology on the browser side includes IndexedDB database, localstorage or self-built js object, the editing operations of the browser side and the server are independent of each other, and only the atomized operation data needs to be interacted between the two.

[0012] S2: Collaborative editing, multiple users opening the same OFD online document on multiple browser sides;

[0013] S 2.1 : Download, parse and display OFD online documents on the browser side; realized by OFD online editor;

[0014] S 2.2 : Each browser side edits the OFD document, generates and locally stores atomized operation data, and sends it to the server side through network transmission;

[0015] S 2.3 : When editing on the browser side, use front-end storage methods including IndexedDB or localstorage to store atomized data, and at the same time create a queue to send to the server side one by one in order; if the sending is successful, the queue is cleared, if not, it is retained in the queue and continuously polled and sent;

[0016] S 2.4 : The server side receives the atomized operation data sent by the browser side through network transmission, stores it in the database in order, and broadcasts it to each browser side in order;

[0017] S 2.5 : When the server side receives an atomized operation data through network transmission, it generates a global self-incrementing variable for the same document and assigns it to the corresponding operation data; stores it in the server side database and broadcasts the operation data, the browser side that sent the operation data receives the operation data and changes the corresponding operation sequence number to the value of the corresponding self-incrementing variable and stores it in the browser side;

[0018] The browser side receives the atomized operation data broadcast by the server side through network transmission, the editor modifies the OFD virtual file according to the atomized operation data, and the editor re-renders the browser side DOM according to the OFD virtual file;

[0019] When the browser-side operation ends, the server-side modifies the saved OFD file of the server according to the atomic operation data recorded in the database, and saves it; wherein modifying the saved OFD file of the server is stored in the browser-side, including storage in IndexedDB, localstorage or js object.

[0020] S3: editing is realized by OT algorithm; first, atomic operation data structure is atomized, including assigning atomic operation data with operation serial number, stamp, document code, operation type, operation node path, start position, end position, operation value and user account; operation type includes insertion, deletion of node and insertion and editing of text.

[0021] Operation path includes the path of the operation node corresponding to the virtual OFD file, and the virtual OFD file itself is a tree structure, and through the operation node path along the branch of the tree structure, the corresponding operation node can be found.

[0022] The start position is the start position of the selected node or text; the end position is the end position of the selected node or text; wherein the operation value includes the information of the newly added document when the document is added; the information of the newly added page when the page is added; the information of the newly added control when the control is added; the inserted value when the attribute operation is added; the user account is used to identify the name of the user who operates; whether it is a local browser operation is determined by the user name.

[0023] When the browser-side receives the atomic operation data sent by the server-side, according to the above-mentioned collaborative editing method, the OFD online editor is called, the object of the virtual OFD file of the operation is confirmed through the operation node, the selected virtual OFD file object is edited according to the operation type and operation value and start and end position, and then the bound virtual DOM tree node is determined, the corresponding rendering method is called, and rendered to the browser-side.

[0024] Further, the operation serial number includes a unique self-incrementing serial number of the same document generated by the server-side; when the browser-side sends, the value is empty; when the network transmission return value is received, the value is assigned as the operation serial number generated by the server-side.

[0025] Further, wherein the stamp is a unique UUID generated based on the timestamp, used to identify the operation itself, and the document code is a unique code for determining the online OFD file stored in the server-side, generated by the server-side file management system.

[0026] Further, the online editing of OFD document adopts typescript language, which is packaged into Javascript language and deployed in server-side node.js and browser-side at the same time.

[0027] Compared with the prior art, the present application has the following advantages:

[0028] 1. The server running pressure in collaborative editing can be greatly reduced, the online editing speed is greatly improved, and better user experience is provided. Moreover, even if the server side has a problem, as long as the editing has been started locally, it will not be affected. Moreover, the local browser side can store the corresponding atomic operation, and as long as the network or server recovers normally, the synchronization of the document can be realized without losing the existing editing operation record.

[0029] 2. Through the OFD online editor, the real-time collaborative editing and the management and OT algorithm of atomic operation data are used, the editing operation of all people is synchronously rendered on the browser side, and the edited OFD document is finally saved on the server side; so that the function of real-time collaborative online editing of the OFD document is realized. BRIEF DESCRIPTION OF DRAWINGS

[0030] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following will briefly introduce the drawings needed to be used in the embodiments. It should be understood that the following drawings only show some embodiments of the present application, and therefore should not be regarded as a limitation to the scope. For those skilled in the art, other related drawings can also be obtained without creative labor.

[0031] Fig. 1 is a method flowchart of the present application;

[0032] Fig. 2 is a flowchart of real-time collaborative editing of the present application. DETAILED DESCRIPTION

[0033] In order to make the purpose, technical solutions and advantages of the embodiments of the present application more clear, the following will combine the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, but not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present application. Therefore, the following detailed description of the embodiments of the present application provided in the drawings is not intended to limit the scope of the claimed present application, but only represents selected embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present application.

[0034] Please refer to Figs. 1-2 A method for real-time collaborative online editing of an OFD document, which is specifically executed according to the following steps:

[0035] The specific steps are as follows:

[0036] S1: Online editing of the OFD document, first, using front-end storage technology on the browser side to store all local and received atomized operations, the browser side uses a local OFD editor program to modify and render according to the atomized operation instructions; using front-end storage technology on the browser side includes IndexedDB database, localstorage or self-built js object, the editing operations of the browser side and the server are independent of each other, and only the atomized operation data needs to be interacted between the two. Other browser sides execute the atomized operation data in sequence according to the current operation serial number. This can ensure the uniqueness and correctness of the OT operation sequence.

[0037] S2: Collaborative editing, multiple users opening the same OFD online document on multiple browser sides;

[0038] S 2.1 : Download, parse and display the OFD online document on the browser side; realized by the OFD online editor;

[0039] S 2.2 : Each browser side edits the OFD document, generates and locally stores atomized operation data, and sends it to the server side through network transmission;

[0040] S 2.3 : When editing on the browser side, use front-end storage methods including IndexedDB or localstorage to store atomized data, and at the same time create a queue to send to the server side in sequence; if the sending is successful, the queue is cleared, if not, it is retained in the queue and continuously polled and sent;

[0041] S 2.4 : The server side receives the atomized operation data sent by the browser side through network transmission, stores it in sequence to the database, and broadcasts it to each browser side in sequence;

[0042] S 2.5 : When the server side transmits on the network, it generates a global self-incrementing variable for each received atomized operation data, and assigns it to the corresponding operation data; stores it in the server side database, and broadcasts the operation data, the browser side that sends the operation data receives the operation data, changes the corresponding operation serial number to the value of the corresponding self-incrementing variable, and stores it in the browser side;

[0043] The browser end receives the atomized operation data broadcasted by the server end through network transmission, the editor modifies the OFD virtual file according to the atomized operation data, and the editor re-renders the browser end DOM according to the OFD virtual file;

[0044] When the browser end operation ends, the server end modifies the saved OFD file of the server according to the atomized operation data recorded in the database, and saves the modified OFD file.

[0045] S3: editing is realized through the OT algorithm; first, the atomized operation data structure is atomized, including assigning the atomized operation data with operation serial number, stamp, document code, operation type, operation node path, start position, end position, operation value and user account; the operation type includes insertion and deletion of nodes and insertion and editing of text.

[0046] The operation path includes the path of the operation node corresponding to the virtual OFD file, and the virtual OFD file itself is a tree structure, and the corresponding operation node can be found by following the branch of the tree structure along the operation node path.

[0047] The start position is the start position of the selected node or text; the end position is the end position of the selected node or text; the operation value includes the information of the newly added document when a new document is added, the information of the newly added page when a new page is added, the information of the newly added control when a new control is added, and the inserted value when an attribute operation is performed; the user account is used to identify the name of the user who performs the operation; whether the operation is performed by the local browser is determined by the user name.

[0048] When the browser end receives the atomized operation data sent by the server end, the OFD online editor is called according to the above-mentioned collaborative editing method, the object of the virtual OFD file is confirmed through the operation node, the selected virtual OFD file object is edited according to the operation type and operation value as well as the start and end positions, then the node of the bound virtual DOM tree is determined, the corresponding rendering method is called, and the browser end is rendered.

[0049] In this embodiment, the following takes a text operation as an example to illustrate how the atomized operation received by the browser end finally realizes real-time synchronous display of the browser end:

[0050] 1). The browser end receives an atomized operation data of a text operation.

[0051] 2). The editor will first determine whether the received data is the operation data sent by the local according to the stamp (unique UUID).

[0052] 3) If the data is sent locally, modify the sequence number of the received data, the local operation data sequence number. No other operation is required. Because the local operation has been edited by the local editor.

[0053] Note: When the local operation sends the atomized data, the sequence number is empty, but when the server receives it, it will generate an operation sequence number and send it to the browser. When the browser receives it, it will assign the operation sequence number of the data to the generated sequence number of the server. In this way, the browser only needs to verify the sequence number of the atomized operation data set.

[0054] 4) If the data is not sent locally, it means that it is the operation of other browsers received by you. Then judge whether the operation sequence number is the self-increment sequence number of the local cached operation sequence number.

[0055] Note: The editor of each browser will cache the last operation sequence number.

[0056] 5) If it is not a self-increment sequence number, it needs to request the server to get the corresponding operation data of the self-increment sequence number, compare it with the atomized operation data stored in the local database, integrate it according to the diff algorithm, and then perform the transform operation. In this way, it ensures that the data of each browser is synchronized in real time during collaborative editing.

[0057] 6) If it is a self-increment sequence number, find the corresponding node on the virtual OFD file according to the object path, and get all the information of the node. For example, the text information: 'abc'.

[0058] 7) Then call the corresponding operation method according to the operation type, and then operate the node of the virtual OFD file according to the start position and end position and operation content. For example, insert d after a, call insert(d, 1); that is, insert d after the first character. The text of this node will be modified to 'adbc'.

[0059] 8) After editing, trigger the rendering method of the corresponding position through the node of the virtual DOM tree bound to the node of the virtual OFD file, so as to modify the display of the browser.

[0060] In this embodiment, the operation sequence number includes a self-increment sequence number unique to the same document generated by the server; when the browser sends it, the value is empty; when the network transmission return value is received, it is assigned to the operation sequence number generated by the server.

[0061] In this embodiment, the stamp is a unique UUID generated based on the timestamp, used to identify the operation itself, and the document code is a unique code that determines the online OFD file stored on the server, generated by the server file management system.

[0062] In the embodiment, the online editing of the OFD document is in typescript language, is packaged into Javascript language, and is deployed on a server side node.js and a browser side.

[0063] The preferred embodiments of the application have been described above with the preferred embodiments, but the application is not limited to the above, and various modifications and changes can be made by those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the application shall be included in the protection scope of the application.

Claims

1. A method for real-time collaborative online editing of an OFD document, characterized in that: The following steps are specifically implemented: S1: Online editing of the OFD document, first using front-end storage technology on the browser side to store all local and received atomization operations, and using a local OFD editor program on the browser side to modify and render according to the atomization operation instructions; S2: Collaborative editing, multiple users opening the same OFD online document on multiple browser sides; S2.1: Downloading, parsing, and displaying the OFD online document on the browser side, implemented by the OFD online editor; S2.2: Editing the OFD document on each browser side, generating and locally storing atomization operation data, and sending to the server side through network transmission; S2.3: Using front-end storage methods including IndexedDB or localstorage on the local browser side to store atomization data while creating a queue to send to the server side in order, and clearing the queue if the sending is successful or retaining it in the queue if the sending is unsuccessful, and continuously polling for sending; S2.4: The server side receives the atomization operation data sent by the browser side through network transmission, stores it in the database in order, and broadcasts it to each browser side in order; S2.5: The server side generates a global auto-increment variable for each received atomization operation data when transmitting over the network, assigns it to the corresponding operation data, stores it in the server side database, and broadcasts the operation data, and the browser side that sent the operation data receives the operation data and changes the corresponding operation sequence number to the value of the corresponding auto-increment variable and stores it in the browser side; The browser side receives the atomization operation data broadcast by the server side through network transmission, and the editor modifies the OFD virtual file according to the atomization operation data, and the editor re-renders the browser side DOM according to the OFD virtual file; When the browser side operation is complete, the server side modifies the saved OFD file on the server according to the atomization operation data recorded in the database and saves it; S3: Editing is implemented through the OT algorithm; first, the atomization operation data structure includes assigning the atomization operation data to include operation sequence number, stamp, document code, operation type, operation node path, start position, end position, operation value, and user account; When the browser side receives the atomization operation data sent by the server side, it calls the OFD online editor according to the above collaborative editing method, confirms the object of the virtual OFD file through the operation node, edits the selected virtual OFD file object according to the operation type and operation value as well as the start and end positions, then determines the bound virtual DOM tree node, calls the corresponding rendering method, and renders to the browser side; In step S3: The operation path includes the path of the operation node corresponding to the virtual OFD file, and the virtual OFD file itself is a tree structure, so by following the branches of the tree structure through the operation node path, the corresponding operation node can be found.

2. The method for real-time collaborative online editing of OFD documents according to claim 1, characterized in that: In step S1, the front-end storage technology used at the browser end includes IndexedDB database, localstorage or self-built js object, the editing operations of the browser end and the server are independent of each other, and only the atomic operation data needs to be interacted between the two.

3. The method for real-time collaborative online editing of OFD documents according to claim 1, characterized in that: In step S2.5, the storage to the browser end includes storage to IndexedDB, localstorage or js object.

4. The method for real-time collaborative online editing of OFD documents according to claim 1, characterized in that, The operation sequence number includes a self-incrementing sequence number unique to the same document generated by the server end; when sent by the browser end, the value is empty; when the network transmission return value is received, the value is assigned to the operation sequence number generated by the server end.

5. The method for real-time collaborative online editing of OFD documents according to claim 1, characterized in that, Wherein the stamp is a unique UUID generated based on the timestamp, used to identify the operation itself, and the document code is a unique code for determining the online OFD file stored at the server end, generated by the server end file management system.

6. The method for real-time collaborative online editing of OFD documents according to claim 1, characterized in that, In step S3, the operation type includes insertion, deletion of nodes and insertion and editing of text.

7. The method of claim 1, wherein the OFD document real-time collaborative online editing method further comprises: In step S3, the start position is the start position of the selected node or text; the end position is the end position of the selected node or text; wherein the operation value includes the information of the newly added document when the document is newly added; the information of the newly added page when the page is newly added; the newly added control information when the control is newly added; the attribute operation is the newly inserted value; the user account is used to identify the name of the user of the operation; and whether it is a local browser operation is judged through the user name.

8. The method for real-time collaborative online editing of OFD documents according to claim 1, characterized in that, The online editing of the OFD document is performed in typescript language, packaged into Javascript language, and deployed on the server end node.js and the browser end at the same time.

Images