CN113723064A - Stream type document online editing method - Google Patents
Stream type document online editing method Download PDFInfo
- Publication number
- CN113723064A CN113723064A CN202111279355.5A CN202111279355A CN113723064A CN 113723064 A CN113723064 A CN 113723064A CN 202111279355 A CN202111279355 A CN 202111279355A CN 113723064 A CN113723064 A CN 113723064A
- Authority
- CN
- China
- Prior art keywords
- editing
- operation data
- atomization
- data
- dom tree
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/50—Network services
- H04L67/56—Provisioning of proxy services
- H04L67/565—Conversion or adaptation of application format or content
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computational Linguistics (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- General Health & Medical Sciences (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Signal Processing (AREA)
- Computer Networks & Wireless Communication (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention relates to the technical field of data processing, in particular to a streaming document online editing method; the method comprises two modes of online editing and collaborative editing, wherein the streaming document is opened through a browser end in the online editing mode, and particularly the format conversion is directly carried out on the streaming document through JavaScript; then, by monitoring cursor changes and events, operating the virtual dom tree, changing the data layer and rendering a real dom tree; the collaborative editing specifically comprises the steps that the same document is opened at a plurality of different browser ends and the websocket service is connected at the same time; monitoring the atomization operation of all users by the editor to generate corresponding atomization operation data; received by the websocket and broadcast to all online editing browser ends. The invention effectively reduces the communication consumption between the front end and the back end and avoids the influence of network environment.
Description
Technical Field
The invention relates to the technical field of data processing, in particular to a streaming document online editing method.
Background
Streaming documents: the method is characterized in that specific layout mode processing is carried out on characters, numbers, tables and graphic images contained in a document, the stored contents are original editing elements, a user can check the layout style after editing through reading software, and the layout can be displayed in a self-adaptive layout size mode among different scaling ratios, such as Word and WPS. An online editor: a tool for on-line editing and modifying the contents of characters, pictures and the like through a browser. The online editor referred to generally is an HTML editor. At present, the streaming document online editors are mainly google documents and Jinshan online documents. Other online editors, such as Tencent documents, flybooks, and the like, are more than a rich text editor, with limited support for streaming documents.
The existing online streaming document opening mode uses a server end to convert the file format, and then the front end calls a back end api interface to obtain converted data; such editing must be supported not only by web services, but also by the network environment and server capabilities. Ot (operation transformation) algorithm, operation transformation algorithm, an algorithm used in a collaborative technique to maintain consistency of different data copies. And adjusting the operation according to different operation sequences at different terminals so as to keep the data consistency. The collaborative editing function is an implementation method of an OT algorithm, and essentially serializes atomic operations of a user, then operates a virtual dom tree, and finally renders the virtual dom tree to a browser end. Therefore, the conventional methods all have a disadvantage of being influenced by network connection with a high probability.
Disclosure of Invention
In view of the above, an object of the present invention is to provide a method for online editing of a streaming document, including two modes, namely online editing and collaborative editing, where the online editing is specifically performed according to the following steps:
S1opening a streaming document through a browser end, and specifically, directly converting the format of the streaming document through JavaScript; the intermediate link of sending the data to the back-end server and acquiring the converted data in the format from the server is omitted. Therefore, the communication consumption between the front end and the rear end can be effectively reduced, the influence of a network environment is avoided, the speed and the safety of opening the application are improved, the effective separation of the online editing and the rear end is ensured, and the decoupling is realized.
S2Operating a virtual dom tree, changing a data layer and rendering a real dom tree by monitoring cursor change and events; thereby achieving the purpose of changing the document content.
The collaborative editing is specifically executed according to the following steps:
1) opening the same document at a plurality of different browser ends and simultaneously connecting the websocket service;
2) the editor monitors the atomization operation of all users, and specifically utilizes an OT algorithm to acquire corresponding atomization operation data generated by the atomization operation of the users through monitoring events; firstly, setting an operation end A as an authorized user, performing editing operation, monitoring the atomization operation of all users, and generating atomization operation data; other browsers receive the atomization operation data transmitted by the websocket;
3) a websocket receives and broadcasts to all online edited browser ends;
4) when the server receives the atomic operation data, storing the atomic operation data into a corresponding database;
5) all online editing and browsing ends synchronously receive atomic operation data through a websocket interface;
6) operating the virtual dom tree according to the atomic operation data, locally and automatically performing serialized storage processing on the atomic operation data in an array mode, and then comparing the atomic operation data with data of a server side; so as to ensure the consistency of the contents of the documents at multiple browser ends.
7) Rendering the virtual dom tree into a real dom tree.
Further, in step S1The method specifically comprises the following steps:
S1.1calling a class library JSZip compressed and decompressed by the front end, and converting a streaming document into a JSZip object;
S1.2according to the standard definition of a streaming document, a core class library is constructed, and a data layer in a json format is converted into a virtual dom tree which is beneficial to being rendered by a browser.
Further: in step 2), the atomization operation data comprises a self-increment operation serial number, an operation type, an object path, a starting position, an ending position and operation contents; the editor automatically caches the last operation serial number;
2.1): the editor judges whether the received operation serial number is a self-increment serial number of the operation serial number cached locally or not; if yes, calling a corresponding operation method according to the corresponding node of the object path on the virtual dom tree and the operation type, and then opening the corresponding operation method according to the operation typeOperating the nodes of the virtual dom tree by the starting position, the ending position and the operation content;
2.2): the server side receives the atomization operation data from the websocket and stores the atomization operation data into a database, and the browser side receives the atomization operation data from the websocket and stores the atomization operation data locally to serialize the atomization operation data in an array mode;
2.3): and when the operation serial number is not increased, calling the api interface, receiving the atomization operation data of the server, comparing the atomization operation data with a local atomization operation array, integrating according to a diff algorithm, and then performing transform operation.
The method for editing the streaming document on line has the beneficial effects that:
1. the communication consumption between the front end and the back end is effectively reduced, the influence of a network environment is avoided, the speed and the safety of opening the application are improved, the effective separation of the online editing and the back end is ensured, and the decoupling is realized.
Drawings
FIG. 1 is a flow chart of a method of the present invention;
FIG. 2 is a flow diagram of an import streaming document conversion process of the present invention;
FIG. 3 is a flow diagram of collaborative editing according to the present invention.
Detailed Description
The present invention will be described in detail with reference to the drawings and specific embodiments, and it is to be understood that the described embodiments are only a few embodiments of the present invention, rather than the entire embodiments, and that all other embodiments obtained by those skilled in the art based on the embodiments in the present application without inventive work fall within the scope of the present application.
In this embodiment, as shown in fig. 1 to 3, the present invention includes two modes, namely, an online editing mode and a collaborative editing mode, where the online editing mode is specifically executed according to the following steps:
in this embodiment, the editor calls the file engine to generate the data layer, which ensures that the data can be used and changed by the editor.
After the data layer is generated, the editor converts the data layer into a virtual dom tree convenient for rendering; after the virtual dom tree is generated, the virtual dom tree is rendered to a page through a rendering engine to become a real dom tree. The virtual dom tree will monitor the formal dom tree and change synchronously while changing the data layer. At the time of export, the editor converts the data layer into a streaming document, which may not be in the same format as the originally imported streaming document.
In this embodiment, when the streaming document is imported, and the browser opens the local streaming document to obtain data of the document. Calling a class library JSZip compressed and decompressed at the front end, converting the streaming document into a JSZip object, converting the xml format character string into a dom tree by using DOMParser, analyzing the dom tree, and converting into a data layer in a json format. And then, according to the standard definition of the streaming document, constructing a core class library, converting the data layer in the json format into a virtual dom tree which is beneficial to rendering by a browser, and finally rendering the virtual dom tree into a real dom tree.
In this embodiment, as shown in fig. 3, during collaborative editing:
multiple users open the same streamed document on different browsers. At this time, whether the user is authorized to edit can be judged according to the user authorization. And establishing the websocket connection. The user A is an authorized user and carries out editing operation. And monitoring the atomization operation of the user and generating atomization operation data. And the websocket sends the atomization operation data generated by the A user. And other browsers receive the atomization operation data transmitted by the websocket.
In this embodiment, the editor operates the virtual dom tree according to the atomization operation data. The specific process is as follows: the atomization operation data comprises an operation self-increment sequence number, an operation type, an object path, a starting position, an ending position, operation contents and the like. The editor itself buffers the last operation sequence number. The editor first determines whether the received operation sequence number is a self-incrementing sequence number of the operation sequence number of the local cache. If so, calling a corresponding operation method according to the operation type and the corresponding node of the object path on the virtual dom tree, and then operating the node of the virtual dom tree according to the starting position, the ending position and the operation content. The server side receives the atomization operation data in the websocket and stores the atomization operation data in the database, and meanwhile, the browser side receives the atomization operation data in the websocket and stores the atomization operation data in the local and serializes the atomization operation data in an array mode. And when the operation serial number is not increased, calling the api interface, receiving the atomization operation data of the server, comparing the atomization operation data with a local atomization operation array, integrating according to a diff algorithm, and then performing transform operation. Therefore, data synchronization of all browser ends during collaborative editing is guaranteed. And finally, after the virtual dom tree is changed, triggering a rendering method to change the real dom tree.
Although the present invention has been described in detail with reference to the preferred embodiments, it will be understood by those skilled in the art that various changes may be made and equivalents may be substituted without departing from the spirit and scope of the invention as defined in the appended claims. The techniques, shapes, and configurations not described in detail in the present invention are all known techniques.
Claims (5)
1. A stream document online editing method is characterized in that: the method comprises two modes of online editing and collaborative editing, wherein the online editing is specifically executed according to the following steps:
S1opening a streaming document through a browser end, and specifically, directly converting the format of the streaming document through JavaScript;
S2operating a virtual dom tree, changing a data layer and rendering a real dom tree by monitoring cursor change and events;
the collaborative editing is specifically executed according to the following steps:
1) opening the same document at a plurality of different browser ends and simultaneously connecting the websocket service;
2) the editor monitors the atomization operation of all users and generates corresponding atomization operation data;
3) a websocket receives and broadcasts to all online edited browser ends;
4) when the server receives the atomic operation data, storing the atomic operation data into a corresponding database;
5) all online editing and browsing ends synchronously receive atomic operation data through a websocket interface;
6) operating the virtual dom tree according to the atomic operation data, locally and automatically performing serialized storage processing on the atomic operation data in an array mode, and then comparing the atomic operation data with data of a server side;
7) rendering the virtual dom tree into a real dom tree.
2. The method for on-line editing of a streaming document according to claim 1, wherein: in step S1The method specifically comprises the following steps:
S1.1calling a class library JSZip compressed and decompressed by the front end, and converting a streaming document into a JSZip object;
S1.2according to the standard definition of a streaming document, a core class library is constructed, and a data layer in a json format is converted into a virtual dom tree which is beneficial to being rendered by a browser.
3. The method for on-line editing of a streaming document according to claim 1, wherein: in the steps 2) to 7), firstly, setting the operation end A as an authorized user, performing editing operation, monitoring the atomization operation of all users, and generating atomization operation data; and other browsers receive the atomization operation data transmitted by the websocket.
4. The method for on-line editing of a streaming document according to claim 1, wherein: in step 2), the atomization operation data comprises a self-increment operation serial number, an operation type, an object path, a starting position, an ending position and operation contents; the editor automatically caches the last operation serial number;
2.1): the editor judges whether the received operation serial number is a self-increment serial number of the operation serial number cached locally or not; if yes, calling a corresponding operation method according to the corresponding node of the object path on the virtual dom tree and the operation type, and then carrying out operation on the virtual dom tree according to the starting position, the ending position and the operation contentThe node of (2) operates;
2.2): the server side receives the atomization operation data from the websocket and stores the atomization operation data into a database, and the browser side receives the atomization operation data from the websocket and stores the atomization operation data locally to serialize the atomization operation data in an array mode;
2.3): and when the operation serial number is not increased, calling the api interface, receiving the atomization operation data of the server, comparing the atomization operation data with a local atomization operation array, integrating according to a diff algorithm, and then performing transform operation.
5. The method for on-line editing of a streaming document according to claim 1, wherein: and in the cooperative editing, the OT algorithm is utilized in the step 2), and the atomization operation of the user is obtained by monitoring the event.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111279355.5A CN113723064B (en) | 2021-11-01 | 2021-11-01 | Stream type document online editing method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111279355.5A CN113723064B (en) | 2021-11-01 | 2021-11-01 | Stream type document online editing method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113723064A true CN113723064A (en) | 2021-11-30 |
| CN113723064B CN113723064B (en) | 2022-02-08 |
Family
ID=78686221
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111279355.5A Active CN113723064B (en) | 2021-11-01 | 2021-11-01 | Stream type document online editing method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113723064B (en) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130138733A1 (en) * | 2011-11-25 | 2013-05-30 | Matthias Heinrich | Universal collaboration adapter for web editors |
| CN105376502A (en) * | 2015-11-23 | 2016-03-02 | 华中师范大学 | All media on-line editing tool |
| US20180012256A1 (en) * | 2016-07-06 | 2018-01-11 | Hiro Media Ltd. | Real-time monitoring of ads inserted in real-time into a web page |
| US20180152450A1 (en) * | 2016-11-30 | 2018-05-31 | Salesforce.Com, Inc. | Secure component-based web applications |
| CN109408783A (en) * | 2018-09-06 | 2019-03-01 | 广州城市信息研究所有限公司 | Electronic document online editing method and system |
| CN112528203A (en) * | 2020-12-18 | 2021-03-19 | 平安国际智慧城市科技股份有限公司 | Webpage-based online document making method and system |
| CN113010170A (en) * | 2021-03-31 | 2021-06-22 | 中国建设银行股份有限公司 | Page rendering method, device, medium and electronic equipment based on Vue3 component |
-
2021
- 2021-11-01 CN CN202111279355.5A patent/CN113723064B/en active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130138733A1 (en) * | 2011-11-25 | 2013-05-30 | Matthias Heinrich | Universal collaboration adapter for web editors |
| CN105376502A (en) * | 2015-11-23 | 2016-03-02 | 华中师范大学 | All media on-line editing tool |
| US20180012256A1 (en) * | 2016-07-06 | 2018-01-11 | Hiro Media Ltd. | Real-time monitoring of ads inserted in real-time into a web page |
| US20180152450A1 (en) * | 2016-11-30 | 2018-05-31 | Salesforce.Com, Inc. | Secure component-based web applications |
| CN109408783A (en) * | 2018-09-06 | 2019-03-01 | 广州城市信息研究所有限公司 | Electronic document online editing method and system |
| CN112528203A (en) * | 2020-12-18 | 2021-03-19 | 平安国际智慧城市科技股份有限公司 | Webpage-based online document making method and system |
| CN113010170A (en) * | 2021-03-31 | 2021-06-22 | 中国建设银行股份有限公司 | Page rendering method, device, medium and electronic equipment based on Vue3 component |
Non-Patent Citations (1)
| Title |
|---|
| 张丰麒 等: "ReactJS的新特性在Web开发中的应用", 《移动信息》 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113723064B (en) | 2022-02-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11582284B2 (en) | Optimization of publication of an application to a web browser | |
| US10142431B2 (en) | Real-time information feed | |
| JP4865983B2 (en) | Network server | |
| TW388824B (en) | Http caching proxy to filter and control display of data in a web browser | |
| US6865599B2 (en) | Browser-to-browser, dom-based, peer-to-peer communication with delta synchronization | |
| US20030004984A1 (en) | Methods for transcoding webpage and creating personal profile | |
| US20040049737A1 (en) | System and method for displaying information content with selective horizontal scrolling | |
| US20040133635A1 (en) | Transformation of web description documents | |
| CN110609965B (en) | Page display method, device and storage medium | |
| CN111953709B (en) | Multimedia content transmission method, multimedia content display method and device and electronic equipment | |
| JP2002108870A (en) | System and method for processing information | |
| CN111949256A (en) | Webpage real-time preview editing method, device, equipment and storage medium | |
| CN112269576A (en) | Component display method and device, server and storage medium | |
| CN106951270A (en) | A kind of code process method, system and server | |
| CN111405303B (en) | Method for quickly establishing live broadcast based on webpage | |
| JP2001195391A (en) | Format conversion and page division relay server | |
| JP3533811B2 (en) | Data conversion device, network system including data conversion device, and data transmission method | |
| CN113723064B (en) | Stream type document online editing method | |
| KR100850021B1 (en) | System and Method for Changing Web Document Style | |
| KR20010029147A (en) | Internet service method for mobile phone | |
| JP2008123234A (en) | Translation server device, translation system, translation method, and translation program | |
| CN113448649B (en) | Redis-based home page data loading server and method | |
| CN112257394B (en) | Layout document collaborative annotation display method and processing terminal | |
| US20030154252A1 (en) | Data processing method, program, and information processor | |
| CN113743060B (en) | Customizable report generation method, device, computer equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |