Detailed Description
The following description of the embodiments of the present invention will be made clearly and fully with reference to the accompanying drawings, in which it is evident that the embodiments described are some, but not all embodiments of the invention. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
It should be understood that the terms "comprises" and "comprising," when used in this specification and the appended claims, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof.
It is also to be understood that the terminology used in the description of the invention herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. As used in this specification and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise.
It should be further understood that the term "and/or" as used in the present specification and the appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes such combinations.
Referring to fig. 1, a flow chart of a text real-time editing method according to an embodiment of the invention includes steps S110 to S140.
Step S110, when the event trigger of starting text input is monitored, the cursor position of the current text input is positioned, and the current input paragraph is determined;
step S120, inserting a label in the cursor position of the current text input, and setting the cursor in the label;
step S130, receiving input text through the tag, and keeping the cursor in the tag during text input;
and step 140, when the remote editing operation of the current input paragraph is monitored, replacing elements before and after the label according to the content of the remote editing operation.
In this embodiment, the editing terminal monitors whether an event triggering the start of text input is currently triggered through compositionstart command, if yes, obtains the current cursor position through document. Getselection () method, locates the cursor position of the current text input and determines the current input paragraph, in order to prevent cursor movement, inserts a tag at the cursor position of the current text input, sets the cursor in the tag, then receives the input text through the tag, keeps the cursor in the tag during text input, monitors whether there is a remote editing operation on the current input paragraph in real time, and when the remote editing operation on the current input paragraph is monitored, replaces elements before and after the tag according to the content of the remote editing operation, so as to realize text update on the current input paragraph. Where the tags may be span tags, which are in-line tags of the hypertext markup language (HTML), are used to combine in-line elements in the document. span tags do not appear in a fixed format. When a pattern is applied to it, it produces a visual change. By using compositionstart and compositionend events to monitor the events of the text input start and the text input end, whether the input method input is currently performed or not can be effectively judged.
In an embodiment, the text real-time editing method provided by the embodiment of the invention further includes:
when the event trigger of ending the text input is monitored, extracting the text input in the label, inserting the input text into the current input paragraph and deleting the label.
In this embodiment, when the event trigger of ending the text input is detected, the user is indicated to end the text input, and when the user ends the text input, the text input in the span tag is extracted, inserted into the current input paragraph, and the tag is deleted. In practical applications, compositionstart events are triggered when a user starts to input Chinese characters using the pinyin input method. The compositionend event will be triggered when the composition of a text passage is completed or cancelled. That is, the text input is started, the compositionstart events are triggered once, the compositionstart events are not started in the Chinese input process, and finally the text input is completed, and the compositionend events are triggered.
In an embodiment, the text real-time editing method provided by the embodiment of the invention further includes:
When the event trigger of starting text input is monitored, updating the text input state of the current input paragraph to be true;
When the event trigger of ending the text input is monitored, the text input state of the current input paragraph is updated to be false.
In this embodiment, in order to facilitate the user to distinguish the text input states, the text input state of the editor is set, when the event trigger of the beginning of text input is monitored, the text input state of the current input paragraph is updated to true (true), which indicates that the text input state of the current input paragraph is being input by the user, and when the event trigger of the ending of text input is monitored, the text input state of the current input paragraph is updated to false (false), which indicates that the text input state of the current input paragraph is being input by the user.
For example, when the user inputs text into the current input paragraph, the text input state of the current input paragraph is updated to true (true) by the event trigger that the text input starts, and when the user finishes inputting text into the current input paragraph, the text input state of the current input paragraph is updated to false (false) by the event trigger that the text input ends.
As shown in fig. 2, in an embodiment, step S140 includes:
Step S210, when a remote editing operation pushed by a server is received, acquiring a text input state of a paragraph corresponding to the remote editing operation;
Step S220, if the text input state is true, confirming that the paragraph corresponding to the remote editing operation is the current input paragraph, and replacing elements before and after the label according to the content of the remote editing operation;
Step S230, if the text input status is false, updating the corresponding paragraph directly according to the content of the remote editing operation.
In this embodiment, when it is monitored that a remote editing operation exists in a current input paragraph, in order to avoid affecting text input and conflicting, it is necessary to confirm a text input state of the current input paragraph, if the text input state is true, confirm that a paragraph corresponding to the remote editing operation is the current input paragraph, replace elements before and after a label according to contents of the remote editing operation, so as to prevent the remote editing operation and the current input state from conflicting and causing text modification errors, and if the text input state is false, update the corresponding paragraph directly according to contents of the remote editing operation.
For example, when a remote editing operation pushed by the server is received, confirming the text input state of a paragraph corresponding to the remote editing operation, if the currently corresponding paragraph is paragraph 5, and if the text input state of paragraph 5 is true, then the text input state of paragraph 5 indicates that paragraph 5 is being edited, then the elements before and after the current span label are replaced according to the content of the remote editing operation, and if the text input state of paragraph 5 is false, then the text input of current paragraph 5 is completed or the user does not currently input text to paragraph 5, then the content of the remote editing operation can be directly updated to paragraph 5.
As shown in fig. 3, in an embodiment, step S220 includes:
step S310, obtaining remote paragraph information of a current input paragraph according to the remote editing operation, and obtaining local paragraph information of the current input paragraph;
and step 320, comparing the remote paragraph information with the local paragraph information, and replacing elements before and after the label according to the comparison result.
In this embodiment, when it is monitored that a remote editing operation exists in a current input paragraph and the text input state of the current input paragraph is true, it indicates that the current input paragraph is being edited locally, and then the remote editing operation and the text in the span tag need to be compared, so that modification information (i.e., remote paragraph information) of the current input paragraph and local paragraph information of the current input paragraph are obtained remotely according to the remote editing operation, the remote paragraph information and the local paragraph information are compared, and elements before and after the tag are replaced according to the comparison result.
In one embodiment, in the editor, the remote paragraph information is remote html of the current input paragraph generated based on the remote editing operation, and the local paragraph information is local html of the current input paragraph generated locally.
Step S320 includes performing diff analysis on virtual Dom corresponding to remote html and local html through virtual-Dom components, screening out elements needing to be replaced according to diff analysis results, and replacing elements before and after labels in a current input paragraph.
The diff analysis is a comparison algorithm, the diff analysis can find the difference between new and old virtual doms of the current input paragraph, screen out the element to be replaced, and update the element to be replaced to the real doms corresponding to the current input paragraph according to the compared result after comparing the virtual doms of the current input paragraph.
In an embodiment, the setting the cursor in the tag includes:
Filling a preset character in the cursor, enabling the cursor to be positioned in the label, and enabling the label to be non-empty.
In this embodiment, taking the span tag as an example, in order to set the cursor in the span tag, the span tag is filled with the '\u200b' character, so that the cursor is located in the tag, wherein the '\u200b' character is a special character, and the use of the '\u200b' character can not only ensure non-empty in the span tag, but also not affect the visual effect.
According to the method, the cursor position is positioned, the inserted label is utilized to lock the cursor position, the input text is received through the label, the cursor position is fixed in the text input process, the cursor cannot change due to the fact that the position is changed when the remote editing operation content is updated, when the remote editing operation is received, elements before and after the label are replaced according to the remote operation content, the latest modified content of a remote user can be updated rapidly, and normal input of the local text is not affected when the remote editing operation content is updated.
The embodiment of the invention also provides a text real-time editing device which is used for executing any embodiment of the text real-time editing method. Specifically, referring to fig. 4, fig. 4 is a schematic block diagram of a text real-time editing apparatus according to an embodiment of the present invention. The text real-time editing apparatus 100 may be configured in a server.
As shown in fig. 4, the text real-time editing apparatus 100 includes a positioning module 110, an inserting module 120, a receiving module 130, and a replacing module 140.
A positioning module 110, configured to, when an event trigger from the start of text input is detected, position a cursor of a current text input, and determine a current input paragraph;
the inserting module 120 is configured to insert a tag in a cursor position of the current text input, and set the cursor in the tag;
A receiving module 130, configured to receive an input text through the tag, and maintain the cursor within the tag during a text input process;
And the replacing module 140 is used for replacing elements before and after the label according to the content of the remote editing operation when the remote editing operation of the current input paragraph is monitored.
In this embodiment, the editing terminal monitors whether to trigger the event of starting text input currently through compositionstart command, if so, obtains the current cursor position through document. Getselection () method, locates the cursor position of current text input and determines the current input paragraph, in order to prevent cursor movement, inserts a span tag at the cursor position of current text input, and sets the cursor in the span tag, then receives the input text through the tag, keeps the cursor in the tag during text input, and when the remote editing operation of the current input paragraph is monitored, real-time detection is performed, the elements before and after the tag are replaced according to the content of the remote editing operation. Wherein the span tags are in-line tags of the hypertext markup language (HTML) that are used to combine in-line elements in the document. Span tags do not appear in a fixed format. When a pattern is applied to it, it produces a visual change. And in the text input process, monitoring whether a remote editing operation exists in real time. When the remote editing operation of the current input paragraph is monitored, replacing elements before and after the label according to the content of the remote editing operation, and updating the text of the current input paragraph.
In one embodiment, the text real-time editing apparatus 100 further includes:
And the extraction module is used for extracting the text input in the tag when the event trigger of ending the text input is monitored, inserting the input text into the current input paragraph and deleting the tag.
In this embodiment, when the event trigger of ending the text insertion is detected, the user is indicated to end the text input, and when the user ends the text input, the text input in the span tag is extracted, inserted into the current input paragraph, and the tag is deleted. In practical applications, the compositionstart event is triggered when the user starts to input Chinese characters by using the pinyin input method, and the compositionend event is triggered when the input of a text paragraph is completed or canceled. That is, the text input is started, the compositionstart events are triggered once, the compositionstart events are not started in the Chinese input process, and the compositionend events are triggered when the text input is completed.
For example, in the editor, when the user starts text entry, it is monitored compositionstart that an event is triggered, and when the user ends text entry, it is monitored compositionend that an event is triggered.
In one embodiment, the text real-time editing apparatus 100 includes:
the first updating module is used for updating the text input state of the current input paragraph to be true when the event trigger of starting text input is monitored;
And the second updating module is used for updating the text input state of the current input paragraph to be false when the event triggering of ending the text input is monitored.
In this embodiment, in order to facilitate the user to distinguish the text input states, the text input state of the editor is set, when the event trigger of the beginning of text input is monitored, the text input state of the current input paragraph is updated to true (true), which indicates that the text input state of the current input paragraph is being input by the user, and when the event trigger of the ending of text input is monitored, the text input state of the current input paragraph is updated to false (false), which indicates that the text input state of the current input paragraph is being input by the user.
For example, when the user inputs text into the current input paragraph, the text input state of the current input paragraph is updated to true (true) by the event trigger that the text input starts, and when the user finishes inputting text into the current input paragraph, the text input state of the current input paragraph is updated to false (false) by the event trigger that the text input ends.
In one embodiment, the replacement module 140 includes:
The device comprises an acquisition unit, a server and a storage unit, wherein the acquisition unit is used for acquiring the text input state of a paragraph corresponding to a remote editing operation when the remote editing operation pushed by the server is received;
A replacing unit, configured to confirm that a paragraph corresponding to the remote editing operation is a current input paragraph if the text input state is true, and replace elements before and after the tag according to the content of the remote editing operation;
and the updating unit is used for updating the corresponding paragraph directly according to the content of the remote editing operation if the text input state is false.
In this embodiment, when it is monitored that a remote editing operation exists in a current input paragraph, in order to avoid affecting text input and conflicting, it is necessary to confirm a text input state of the current input paragraph, if the text input state is true (true), confirm that a paragraph corresponding to the remote editing operation is the current input paragraph, replace elements before and after a label according to contents of the remote editing operation, so as to prevent the remote editing operation and the current input state from conflicting and causing a text modification error, and if the text input state is false, update the corresponding paragraph directly according to contents of the remote editing operation.
For example, when a remote editing operation pushed by the server is received, confirming the text input state of a paragraph corresponding to the remote editing operation, if the currently corresponding paragraph is paragraph 5, and if the text input state of paragraph 5 is true, then the text input state of paragraph 5 indicates that paragraph 5 is being edited, then the elements before and after the current span label are replaced according to the content of the remote editing operation, and if the text input state of paragraph 5 is false, then the text input of current paragraph 5 is completed or the user does not currently input text to paragraph 5, then the content of the remote editing operation can be directly updated to paragraph 5.
In an embodiment, the replacement unit comprises:
the acquisition subunit is used for acquiring remote paragraph information of the current input paragraph according to the remote editing operation and acquiring local paragraph information of the current input paragraph;
And the replacing subunit is used for comparing the remote paragraph information with the local paragraph information and replacing elements before and after the label according to the comparison result.
In this embodiment, when it is monitored that a remote editing operation exists in a current input paragraph and the text input state of the current input paragraph is true, it indicates that the current input paragraph is being edited locally, and then the remote editing operation and the text in the span tag need to be compared, so that modification information (i.e., remote paragraph information) of the current input paragraph and local paragraph information of the current input paragraph are obtained remotely according to the remote editing operation, the remote paragraph information and the local paragraph information are compared, and elements before and after the tag are replaced according to the comparison result.
In one embodiment, the replacement subunit comprises:
and the analysis subunit is used for performing diff analysis on the remote html and the local html through the virtual-dom component, screening out elements needing to be replaced according to diff analysis results, and replacing the elements before and after the tag in the current input paragraph.
In this embodiment, in the editor, the remote paragraph information is remote html of a current input paragraph generated based on a remote editing operation, and the local paragraph information is local html of the current input paragraph generated locally. The diff analysis is a comparison algorithm, the diff analysis can find the difference between new and old virtual doms of the current input paragraph, screen out the element to be replaced, and update the element to be replaced to the real doms corresponding to the current input paragraph according to the compared result after comparing the virtual doms of the current input paragraph.
In one embodiment, the insertion module 120 includes:
And the filling unit is used for filling preset characters in the cursor, enabling the cursor to be positioned in the label and enabling the label to be non-empty.
In this embodiment, in order to set the cursor in the span tag, the span tag is filled with the '\u200b' character, so that the cursor is located in the tag, wherein the '\u200b' character is a special character, and the use of the '\u200b' character can ensure that the span tag is not empty, and can not affect the visual effect.
The embodiment of the invention also provides computer equipment, which comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, wherein the processor realizes the text real-time editing method when executing the computer program.
In the embodiment, the processor is used for executing a text real-time editing method, and the method comprises the steps of positioning a cursor position of a current text input and determining a current input paragraph when an event trigger of starting text input is monitored, inserting a tag into the cursor position of the current text input and setting a cursor in the tag, receiving the input text through the tag, enabling the cursor to be kept in the tag in the text input process, and replacing elements before and after the tag according to the content of the remote editing operation when the remote editing operation of the current input paragraph is monitored.
In another embodiment of the invention, a computer-readable storage medium is provided. The computer readable storage medium may be a nonvolatile computer readable storage medium or a volatile computer readable storage medium. The computer readable storage medium stores a computer program which, when executed by a processor, causes the processor to perform the text real-time editing method as described above.
In the embodiment, the computer program is used for executing a text real-time editing method, and the method comprises the steps of positioning a cursor position of a current text input and determining a current input paragraph when an event trigger of starting text input is monitored, inserting a tag into the cursor position of the current text input and setting a cursor in the tag, receiving the input text through the tag, enabling the cursor to be kept in the tag in the text input process, and replacing elements before and after the tag according to the content of the remote editing operation when the remote editing operation of the current input paragraph is monitored.
It will be clearly understood by those skilled in the art that, for convenience and brevity of description, specific working procedures of the apparatus, device and unit described above may refer to corresponding procedures in the foregoing method embodiments, which are not repeated herein. Those of ordinary skill in the art will appreciate that the elements and algorithm steps described in connection with the embodiments disclosed herein may be embodied in electronic hardware, in computer software, or in a combination of the two, and that the elements and steps of the examples have been generally described in terms of function in the foregoing description to clearly illustrate the interchangeability of hardware and software. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.
In the several embodiments provided by the present invention, it should be understood that the disclosed apparatus, device and method may be implemented in other manners. For example, the apparatus embodiments described above are merely illustrative, and for example, the division of the units is merely a logical function division, there may be another division manner in actual implementation, or units having the same function may be integrated into one unit, for example, multiple units or components may be combined or may be integrated into another system, or some features may be omitted, or not performed. In addition, the coupling or direct coupling or communication connection shown or discussed with each other may be an indirect coupling or communication connection via some interfaces, devices, or elements, or may be an electrical, mechanical, or other form of connection.
The units described as separate units may or may not be physically separate, and units shown as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the embodiment of the present invention.
In addition, each functional unit in the embodiments of the present invention may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit. The integrated units may be implemented in hardware or in software functional units.
The integrated units may be stored in a storage medium if implemented in the form of software functional units and sold or used as stand-alone products. Based on such understanding, the technical solution of the present invention is essentially or a part contributing to the prior art, or all or part of the technical solution may be embodied in the form of a software product stored in a storage medium, comprising several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method according to the embodiments of the present invention. The storage medium includes various media capable of storing program codes, such as a usb (universal serial bus), a removable hard disk, a Read-Only Memory (ROM), a magnetic disk, or an optical disk.
While the invention has been described with reference to certain preferred embodiments, it will be understood by those skilled in the art that various changes and substitutions of equivalents may be made and equivalents will be apparent to those skilled in the art without departing from the scope of the invention. Therefore, the protection scope of the invention is subject to the protection scope of the claims.