A method, device and equipment for collaborative editing of hypertext

Abstract

The present invention discloses a hypertext collaborative editing method, device and equipment, the method comprising: receiving an instance creation event message sent by a browser, recording and returning the user information of the current collaborative user, so that the browser displays the collaborative user information in real time in the target text editing page of each collaborative user; receiving a content change event message sent by a browser, recording and returning the input position information of the current collaborative user in the text and the content change information of the target text, so that the browser displays it in real time in the target text editing page of each collaborative user. The present invention can realize the simultaneous online collaborative editing of the same target text by multiple users on the browser, thereby eliminating the need to use independent collaborative collaborative editing document tools to achieve this, thereby improving the user's office experience.

Description

Technical Field

[0001] The present invention belongs to the technical field of hypertext collaborative editing, and in particular relates to a hypertext collaborative editing method, device and equipment. Background Art

[0002] In the era of rapid development of information technology, the informatization of office tools plays an important role in promoting information exchange, knowledge sharing and improving work efficiency. Among them, collaborative editing tools between multiple users are widely used in daily work. Therefore, improving the performance of collaborative editing tools is particularly important for improving work efficiency.

[0003] Collaborative editing refers to the function of supporting multiple people to jointly edit the same document on different terminals. At present, there are also some tools for collaborative editing functions, and their processing mechanisms are almost the same, that is, through communication connection between the client and the server, and support multiple users to edit the same document on the page. However, most of the existing tools adopt a preemptive editing strategy. This method has a relatively simple processing process, but it cannot achieve the consistency of user operation intentions well, that is, there will be many problems on the page that are inconsistent with the user's operation intentions, resulting in a poor user collaborative editing experience; in addition, currently, multiple people can only perform collaborative editing of documents with the help of collaborative editing document tools (such as Tencent Docs, DingTalk Docs, Google Docs, etc.), and cannot directly perform collaborative editing of multiple people on regular web pages and browsers. The update and review of document content depends on the user's active access to the collaborative editing document tool. The collaborative progress is not intuitive enough and the user experience is poor. Summary of the invention

[0004] The object of the present invention is to provide a hypertext collaborative editing method, apparatus and device for solving at least one technical problem existing in the prior art.

[0005] In order to achieve the above object, the present invention adopts the following technical solutions:

[0006] In a first aspect, the present invention provides a hypertext collaborative editing method, comprising:

[0007] Receive an instance creation event message sent by the browser end, and return the acquired current collaborative user information to the browser end according to the instance creation event message, so that the browser end displays the current collaborative user information in real time on the target text editing page of each collaborative user;

[0008] Receive a content change event message sent by the browser, and return the acquired user's current input position information and text content change information to the browser according to the content change event message, so that the browser displays the user's current input position information and text content change information in real time on the target text editing page of each collaborative user;

[0009] The browser end is embedded with a slate-react hypertext editor for collaborative editing of target text by collaborative users; the browser end is provided with a first socket end, and the first socket end performs message transmission based on the Websocket protocol.

[0010] In a second aspect, the present invention provides a hypertext collaborative editing device, comprising:

[0011] A first information acquisition module is used to receive an instance creation event message sent by a browser, and return the acquired current collaborative user information to the browser according to the instance creation event message, so that the browser displays the current collaborative user information in real time on a target text editing page of each collaborative user;

[0012] The second information acquisition module is used to receive the content change event message sent by the browser end, and return the acquired user's current input position information and text content change information to the browser end according to the content change event message, so that the browser end can display the user's current input position information and text content change information in real time on the target text editing page of each collaborative user;

[0013] The browser end is embedded with a slate-react hypertext editor for collaborative editing of target text by collaborative users; the browser end is provided with a first socket end, and the first socket end performs message transmission based on the Websocket protocol.

[0014] In a third aspect, the present invention provides a hypertext collaborative editing method, comprising:

[0015] Monitor collaborative instance creation events, and send instance creation event messages to the server when a creation event is detected, so that the server obtains current collaborative user information according to the instance creation event messages;

[0016] Receiving the current collaborative user information, and displaying the current collaborative user information in real time on a target text editing page of each collaborative user;

[0017] Monitoring content change events, and sending content change event messages to the server when a change event is monitored, so that the server obtains user current input position information and text content change information according to the content change event messages;

[0018] Receiving the user's current input position information and the text content change information, and displaying the user's current input position information and the text content change information in real time on the target text editing page of each collaborative user;

[0019] Among them, each collaborative user collaboratively edits the target text based on the slate-react hypertext editor; the server is provided with a second socket end, and the second socket end transmits messages based on the Websocket protocol.

[0020] In a possible design, before monitoring the collaborative instance creation event, the method further includes:

[0021] A collaboration request from a user is received, a New Collaboration plug-in function is called according to the collaboration request to create a collaboration instance, and a handle Join Edit plug-in function is called to add the user to the collaborative editing of the target text.

[0022] In a possible design, before monitoring the content change event, the method further includes:

[0023] Acquire the collaborative editing operation of the user, and call the handle Push CurrentSelection plug-in function according to the collaborative editing operation to send the text information input by the user to the first socket end;

[0024] The handle Send Operations plug-in function is called to locate the user input position and place the user input position in the list to be sent. At the same time, the get Edit Content plug-in function is called to obtain the user input content, so that the first socket end sends the user input content and the user input position in the list to be sent to the server.

[0025] In a possible design, the method for displaying the text content change information in the target text editing page includes:

[0026] Set the children array of the slate-react hypertext editor to value, and pass the text content change information to the children array;

[0027] Generate a rendering component according to the children array, wherein the rendering component includes an Element component and a Text component;

[0028] The Element component and the Text component are rendered to the target text editing page for real-time display.

[0029] In a possible design, when the target text is a video file, the method further includes:

[0030] Use python and celery technology to distribute the reference of ffmpeg tools to transcode video files and send the transcoded video files to the server.

[0031] In a fourth aspect, the present invention provides a hypertext collaboration device, comprising:

[0032] A first monitoring module is used to monitor collaborative instance creation events, and send instance creation event messages to the server when a creation event is monitored, so that the server obtains current collaborative user information according to the instance creation event messages;

[0033] A first display module is used to receive the current collaborative user information and display the current collaborative user information in real time on the target text editing page of each collaborative user;

[0034] A second monitoring module is used to monitor content change events, and send a content change event message to the server when a change event is monitored, so that the server obtains the user's current input position information and text content change information according to the content change event message;

[0035] A second display module is used to receive the user's current input position information and the text content change information, and display the user's current input position information and the text content change information in real time on the target text editing page of each collaborative user;

[0036] Among them, each collaborative user collaboratively edits the target text based on the slate-react hypertext editor; the server is provided with a second socket end, and the second socket end transmits messages based on the Websocket protocol.

[0037] In a fifth aspect, the present invention provides a computer device comprising a memory, a processor and a transceiver which are communicatively connected in sequence, wherein the memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program to execute a hypertext collaborative editing method as described in any possible design of the first aspect or the third aspect.

[0038] In a sixth aspect, the present invention provides a computer-readable storage medium having instructions stored thereon, which, when executed on a computer, executes a hypertext collaborative editing method as described in any possible design of the first aspect or the third aspect.

[0039] In a seventh aspect, the present invention provides a computer program product comprising instructions, which, when executed on a computer, causes the computer to execute a hypertext co-editing method as described in any possible design of the first aspect or the third aspect.

[0040] Beneficial effects:

[0041] This application embeds the slate-react hypertext editor in the browser, establishes a socket connection between the browser and the server, and transmits messages based on the Websocket protocol, so that multiple users on the browser can simultaneously collaborate online to edit the same target text, eliminating the need for independent collaborative document editing tools. At the same time, by locating the input position of collaborative users in real time and updating the target text in real time, the consistency of user operation intentions can be well achieved, thereby improving the user's office experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 Schematic diagram of the interactive process of the hypertext collaborative editing method in this embodiment. DETAILED DESCRIPTION

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

[0044] Example

[0045] In order to solve the problem that the text collaborative editing method in the prior art needs to be implemented with the help of collaborative editing document tools, and it is impossible to directly perform multi-person collaborative editing in conventional web pages, this embodiment provides a hypertext collaborative editing method, which embeds the slate-react hypertext editor in the browser end, establishes a socket connection between the browser end and the server, and transmits messages based on the Websocket protocol, so that multiple users on the browser end can simultaneously collaborate online to edit the same target text, thereby no longer needing to rely on independent collaborative collaborative editing document tools to achieve it; at the same time, by locating the input position of the collaborative user in real time and updating the target text in real time, the consistency of the user's operation intention can be well achieved, thereby improving the user's office experience. The method is specifically described below through specific embodiments.

[0046] Among them, the hypertext collaborative editing method in this embodiment is implemented through a hypertext collaborative editing system, which includes several browser terminals and at least one server. Each browser terminal is embedded with a slate-react hypertext editor for each collaborative user to collaboratively edit the target text; each browser terminal is provided with a first socket terminal, and each server is provided with a second socket terminal. The first socket terminal and the second socket terminal transmit messages based on the Websocket protocol.

[0047] It should be noted that the "first" or "second" defined below is only for distinguishing the browsers used by each user and does not constitute a substantial distinction or limitation.

[0048] like Figure 1 As shown, the interactive process of the hypertext collaborative editing method in this embodiment can be implemented by, but not limited to, including the following steps S1 to S8:

[0049] S1. The first browser receives the target text from the initial user A's text editing operation to edit the target text;

[0050] Specifically, in S1, the first browser terminal refers to the browser terminal currently used by the initial user A, and the slate-react hypertext editor is embedded in the first browser terminal. The slate-react provides an API (Application Programming Interface), and the relevant functions of the plug-in operation bar can be customized according to the API interface. For example: to customize the upload file function, a file instance is created through the create plug-in function, the file object selected by user A is obtained, and then the file object is uploaded to the server. The server can be Alibaba Cloud, etc. The file upload method can be to upload the file object through Alibaba Cloud's OSS (Object Storage Service); and the file link can also be obtained in the callback function, and the rich text plug-in method is called to pass in the file link, and rendered on the web page display end.

[0051] S2. The edited and updated content of the target text is sent to the server based on the socket connection by the first browser, and the server stores the target text in a database;

[0052] Specifically, in S2, when the first browser monitors that the initial user A edits the target text, it sends a change request to the server for the changed hypertext content, and after the server responds, records or saves the latest hypertext content in the server.

[0053] S3. The second browser monitors the collaborative instance creation event and sends the instance creation event message to the server when the creation event occurs;

[0054] Among them, it should be noted that the second browser terminal refers to the browser terminal used by other collaborative users except the initial user A. Therefore, there may be multiple second browser terminals. Of course, it can be understood that the first browser terminal and the second browser terminal here are only used to distinguish the browser terminals used by different users, and do not have a restrictive effect. In fact, other collaborative users may use the same browser terminal as the initial user A. In this case, the second browser terminal is equivalent to the first browser terminal.

[0055] Specifically, in S3, before monitoring the collaborative instance creation event, the method further includes:

[0056] The second browser receives the user's request to join collaboration, calls the NewCollaboration plug-in function to create a collaboration instance according to the request to join collaboration, and calls the handleJoinEdit plug-in function to join the user to the collaborative editing of the target text.

[0057] For example: collaborative user B initiates a request to join collaboration in the second browser end through the editor toolbar plug-in, then the second browser end receives the request to join collaboration of collaborative user B, calls the NewCollaboration plug-in function to create a collaboration instance according to the request to join collaboration, and calls the handle Join Edit plug-in function to add the user to the collaborative editing of the target text, so that collaborative user B and initial user A can edit the same target text together.

[0058] S4. The server receives the instance creation event message, and returns the acquired current collaborative user information to the browser according to the instance creation event message;

[0059] Specifically, in S4, the server returns the user information of the current collaborative user to the second browser end where the collaborative user B is located and the first browser end where the initial user A is located. Of course, it can be understood that if the collaborative users include not only user B, but also user C, user D, etc., the server will return the user information of the current collaborative user to the browser ends of all users.

[0060] S5. The browser receives the user information of the current collaborative user and displays the current collaborative user information in real time on the target text editing page of each collaborative user;

[0061] Specifically, the browser end in S5 includes a first browser end and a second browser end, and each browser end displays the received current collaborative user information in real time on its own target text editing page.

[0062] S6. The browser monitors the content change event and sends a content change event message to the server when the change event occurs;

[0063] Specifically, in S6, before monitoring the content change event, the method further includes:

[0064] Receive a collaborative editing operation from a user, and call a handle Push CurrentSelection plug-in function according to the collaborative editing operation to send the text information input by the user to the first socket end, so that the first socket end monitors the content change event;

[0065] The handle Send Operations plug-in function is called to locate the user input position and place the user input position in the list to be sent. At the same time, the get Edit Content plug-in function is called to obtain the user input content, so that the first socket end sends the user input content and the user input position in the list to be sent to the server.

[0066] S7. The server obtains the user's current input position information and text content change information according to the content change event message;

[0067] Specifically, in S7, the server returns the input position information of the current collaborative user in the text and the content change information of the target text to the second browser end where the collaborative user B is located and the first browser end where the initial user A is located. Of course, it can be understood that if the collaborative users include not only user B, but also user C, user D, etc., the server will return the input position information of the current collaborative user in the text and the content change information of the target text to the browser ends of all users.

[0068] S8. The browser displays the user's current input position information and the text content change information in real time on the target text editing page of each collaborative user;

[0069] Among them, it should be noted that when the browser receives the input position information of the current collaborative user in the text and the content change information of the target text from the server, the cursor instruction will be triggered, so that the user input position information will be displayed through the cursor in the text editing interface, where the cursor display content includes the user ID (Identity Document), so that other collaborative editing users can know in real time all user information and user location information of the current collaborative editing.

[0070] Specifically, in S8, the method for displaying the content change information of the target text in the target text editing page includes:

[0071] Set the children array of the slate-react hypertext editor to value, and pass the text content change information to the children array;

[0072] Generate a rendering component according to the children array, wherein the rendering component includes an Element component and a Text component;

[0073] The Element component and the Text component are rendered to the target text editing page for real-time display.

[0074] In a possible design, when the target text is a video file, the method further includes:

[0075] Use python and celery technology to distribute the reference of ffmpeg tools to transcode video files and send the transcoded video files to the server.

[0076] It should be noted that after the user uploads the video file, the browser will use the distributed reference ffmpeg tool based on python and celery technology to transcode the video file. Preferably, the transcoding format is M3U8 format; wherein, the M3U8 video format is a special video format for caching videos on some mobile devices such as Android and Apple mobile phone browsers, but its encoding format is UTF-8 format; the M3U8 format is characterized by a directory information or file, and the video format cached by the browsers of many Android devices or IOS devices is M3U8, so it needs to be transcoded before it can be played.

[0077] In a possible design, after the user uploads the video file, the browser can play the real-time video watermark through go and ffmpeg technology.

[0078] Based on the above disclosed content, this embodiment embeds the slate-react hypertext editor in the browser, establishes a socket connection between the browser and the server, and transmits messages based on the Websocket protocol, so that multiple users on the browser can simultaneously collaborate online to edit the same target text, thus eliminating the need to rely on independent collaborative document editing tools. At the same time, by locating the input position of the collaborative user in real time and updating the target text in real time, the consistency of the user's operation intention can be well achieved, thereby improving the user's office experience.

[0079] A second aspect of the present embodiment provides a virtual device for implementing the method described in the first aspect or any possible design of the first aspect, including:

[0080] In a second aspect, the present invention provides a hypertext collaborative editing device, comprising:

[0081] A first information acquisition module is used to receive an instance creation event message sent by a browser, and return the acquired current collaborative user information to the browser according to the instance creation event message, so that the browser displays the current collaborative user information in real time on a target text editing page of each collaborative user;

[0082] The second information acquisition module is used to receive the content change event message sent by the browser end, and return the acquired user's current input position information and text content change information to the browser end according to the content change event message, so that the browser end can display the user's current input position information and text content change information in real time on the target text editing page of each collaborative user;

[0083] The browser end is embedded with a slate-react hypertext editor for collaborative editing of target text by collaborative users; the browser end is provided with a first socket end, and the first socket end performs message transmission based on the Websocket protocol.

[0084] The working process, working details and technical effects of the aforementioned device provided in the second aspect of this embodiment can be referred to the method described in the first aspect or any possible design of the first aspect, and will not be repeated here.

[0085] A third aspect of the present embodiment provides another virtual device for implementing the method described in the first aspect or any possible design of the first aspect, including:

[0086] A first monitoring module is used to monitor collaborative instance creation events, and send instance creation event messages to the server when a creation event is monitored, so that the server obtains current collaborative user information according to the instance creation event messages;

[0087] A first display module is used to receive the current collaborative user information and display the current collaborative user information in real time on the target text editing page of each collaborative user;

[0088] A second monitoring module is used to monitor content change events, and send a content change event message to the server when a change event is monitored, so that the server obtains the user's current input position information and text content change information according to the content change event message;

[0089] A second display module is used to receive the user's current input position information and the text content change information, and display the user's current input position information and the text content change information in real time on the target text editing page of each collaborative user;

[0090] Among them, each collaborative user collaboratively edits the target text based on the slate-react hypertext editor; the server is provided with a second socket end, and the second socket end transmits messages based on the Websocket protocol.

[0091] The working process, working details and technical effects of the aforementioned device provided in the third aspect of this embodiment can be referred to the method described in the first aspect or any possible design of the first aspect, and will not be repeated here.

[0092] The fourth aspect of this embodiment provides a computer device, comprising a memory, a processor and a transceiver that are communicatively connected in sequence, wherein the memory is used to store computer programs, the transceiver is used to send and receive messages, and the processor is used to read the computer program to execute the hypertext collaborative editing method as described in any possible design of the first aspect or the third aspect.

[0093] For example, the memory may include, but is not limited to, random access memory (RAM), read-only memory (ROM), flash memory, first input first output (FIFO) and / or first input last output (FILO), etc.; the processor may be, but is not limited to, a microprocessor of the STM32F105 series; the transceiver may be, but is not limited to, a WiFi (Wireless Fidelity) wireless transceiver, a Bluetooth wireless transceiver, a GPRS (General Packet Radio Service) wireless transceiver and / or a ZigBee (ZigBee protocol, a low-power LAN protocol based on the IEEE802.15.4 standard) wireless transceiver, etc. In addition, the computer device may also include, but is not limited to, a power module, a display screen and other necessary components.

[0094] The working process, working details and technical effects of the aforementioned computer device provided in the fourth aspect of this embodiment can be referred to the method described in the first aspect or any possible design of the first aspect, and will not be repeated here.

[0095] A fifth aspect of this embodiment provides a computer-readable storage medium having instructions stored thereon. When the instructions are executed on a computer, the hypertext collaborative editing method as described in any possible design of the first aspect or the third aspect is executed.

[0096] The computer-readable storage medium refers to a carrier for storing data, which may include but is not limited to a floppy disk, a CD, a hard disk, a flash memory, a USB flash drive and / or a memory stick, etc. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices.

[0097] The working process, working details and technical effects of the aforementioned computer device provided in the fifth aspect of this embodiment can be referred to the method described in the first aspect or any possible design of the first aspect, and will not be repeated here.

[0098] A sixth aspect of the present embodiment provides a computer program product comprising instructions, which, when executed on a computer, causes the computer to execute a hypertext co-editing method as described in any possible design of the first aspect or the third aspect.

[0099] The working process, working details and technical effects of the aforementioned computer-readable storage medium provided in the sixth aspect of this embodiment can be referred to the method described in the first aspect or any possible design of the first aspect, and will not be repeated here.

[0100] Finally, it should be noted that the above description is only a preferred embodiment of the present invention and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A hypertext collaborative editing method, characterized in that: include: Receive a user's request to join collaboration, call the New Collaboration plug-in function to create a collaboration instance according to the request, and call the handle Join Edit plug-in function to add the user to the collaborative editing of the target text; Monitor collaborative instance creation events, and send instance creation event messages to the server when a creation event is detected, so that the server obtains current collaborative user information according to the instance creation event messages; Receiving the current collaborative user information, and displaying the current collaborative user information in real time on a target text editing page of each collaborative user; Acquire the collaborative editing operation of the user, and call the handle Push CurrentSelection plug-in function according to the collaborative editing operation to send the text information input by the user to the first socket end; Calling the handle Send Operations plug-in function to locate the user input position and place the user input position in the list to be sent, and at the same time, calling the get Edit Content plug-in function to obtain the user input content, so that the first socket end sends the user input content and the user input position in the list to be sent to the server; Monitoring content change events, and sending content change event messages to the server when a change event is monitored, so that the server obtains user current input position information and text content change information according to the content change event messages; Receiving the user's current input position information and the text content change information, and displaying the user's current input position information and the text content change information in real time on the target text editing page of each collaborative user; Each collaborative user collaboratively edits the target text based on the slate-react hypertext editor; the server is provided with a second socket end, and the second socket end transmits messages based on the Websocket protocol; When the target text is a video file, the method further includes: Use python and celery technology to distribute the ffmpeg tool to transcode the video files and send the transcoded video files to the server; After the user uploads the video file, the browser can play the real-time video watermark through go and ffmpeg technology.

2. The hypertext collaborative editing method according to claim 1, characterized in that: The method for displaying the text content change information in the target text editing page includes: Set the children array of the slate-react hypertext editor to value, and pass the text content change information to the children array; Generate a rendering component according to the children array, wherein the rendering component includes an Element component and a Text component; The Element component and the Text component are rendered to the target text editing page for real-time display.

3. A computer device, characterized in that: It comprises a memory, a processor and a transceiver which are communicatively connected in sequence, wherein the memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program to execute the hypertext collaborative editing method as described in any one of claims 1-2.

Images