A method, system, application and storage medium for in-line checkbox state synchronization and bidirectional echo based on Quill editor

Abstract

The application discloses a kind of in-line checkbox state synchronization and bidirectional echo method, system, application and storage unit based on Quill editor, the method includes: in Quill, register custom in-line checkbox format (CheckboxBlot);When user checks off / cancels, update editor internal model by generating retain.delete.insert atomic operation Delta sequence, solve the "flashback" problem caused by DOM operation;Utilize clipboard conversion mechanism, serialize state as data-checked attribute when exporting HTML, automatically restore to checkbox with state by matcher when echoing or pasting, form state retention closed loop.The application realizes the natural in-line mixed arrangement of checkbox and text, operation without flicker, and state lossless in storage echo process, suitable for medical rehabilitation assessment, electronic medical record, online questionnaire and other scenes that need "text + option" mixed arrangement.

Description

Technical Field

[0001] This invention relates to the field of communication technology, and in particular to a method, system, application, and storage medium for synchronizing and bidirectionally displaying the status of inline checkboxes based on the Quill editor. Background Technology Quill is a widely used modern rich text editor whose core feature is its use of the Delta data model (a linear sequence of JSON operations) to describe document content and all its changes. Under this architecture, all document elements (such as text formatting, images, etc.) must be defined and registered through a node type called "Blot".

[0002] Currently, implementing checkbox functionality in the Quill editor faces the following technical bottlenecks: 1. Lack of native inline support: Quill does not provide a built-in checkbox node type. Existing community solutions typically implement checkboxes as block-level or embedded objects, which means that checkboxes must occupy a separate line and cannot be naturally mixed with text on the same line, such as implementing common form styles like "Patients can walk independently □ 10 meters □ 50 meters".

[0003] 2. Conflict between Document Object Model (DOM) operations and Delta data model: Quill's internal mechanism continuously adjusts the DOM based on the Delta sequence to ensure consistency. If you directly listen to the click event of a checkbox and modify its checked property via JavaScript, this DOM-level modification will be overridden by Quill's internal Delta model in the next synchronization cycle. This causes the checkbox's checked state to "flash" immediately after the user's action, resulting in a poor user experience and the state not being actually saved.

[0004] 3. Loss of State Serialization and Deserialization: Quill's clipboard module is responsible for converting between document content and HTML format. However, this module cannot handle this correctly by default. <input type=""checkbox”"> The `checked` attribute of an element. State information may be lost when exporting HTML; when echoing from HTML or pasting external content, the `checked` attribute cannot be parsed correctly, causing all checkboxes to appear unchecked, compromising data integrity and consistency.

[0005] Therefore, existing technologies cannot implement a checkbox solution in the Quill editor that can be mixed with inline text, stably maintain the checked state, and save and display without loss of quality. Summary of the Invention

[0006] The purpose of this invention is to provide a method and system for synchronizing and bidirectionally displaying the status of inline checkboxes based on the Quill editor, which can solve existing problems.

[0007] The technical problems solved by this invention include at least the following: 1. How to define and implement an interactive, indivisible inline checkbox node in Quill's Delta linear model.

[0008] 2. How to ensure that when a user interacts with a checkbox, the change in its state can be synchronized to Quill's Delta model in an atomic manner, thereby avoiding "crashes" caused by conflicts between the DOM and the model.

[0009] 3. How to ensure that the checked state of checkboxes is fully preserved when the document is exported as HTML, and can be accurately restored when it is subsequently displayed from HTML.

[0010] 4. How to automatically recognize and convert HTML content containing status checkboxes when copied and pasted from external sources into checkboxes as defined in this invention, thus maintaining status consistency.

[0011] The technical solution of the present invention is as follows: According to a first aspect of the present invention, a method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor is provided, comprising at least the following steps: S1. Register a custom inline checkbox format in the Quill editor and define its data structure to include checkbox identifier and checked state; S2. Insert an inline checkbox in the document and trigger a state change event when the user checks or dechecks it. S3. In response to a state change event, generate a Delta operation sequence in an atomic manner to update the checkbox status in the row, and submit the Delta operation sequence to the Quill editor's internal Delta model for application, so as to synchronously update the visual state of the Quill editor's internal data model and the Document Object Model (DOM). S4. When exporting document content as HTML format, serialize the inline checkboxes and their current checked state into an HTML input element with a state representation attribute. S5. When displaying or pasting HTML content into the Quill editor, identify HTML input elements with state representation attributes, and reconstruct inline checkboxes with corresponding checked states in the Quill editor based on their state representation attributes.

[0012] In some implementations, a custom inline checkbox format is implemented as a CheckboxBlot by inheriting Quill's Inline base class and registered in Quill with the format name 'checkbox'.

[0013] In some implementations, the format of the Delta operation sequence generated by the atomic operation method is as follows: Where position is the index position of the inline checkbox in the document Delta sequence, id is the checkbox identifier, and newState is the changed checked state.

[0014] In some implementations, the state representation attribute in step S4 is a custom data attribute data-checked, whose value reflects a boolean check status. And / or, in step S5, a matcher function is configured for the input[type="checkbox"] element by calling the Quill.clipboard.addMatcher() method to perform recognition and reconstruction operations.

[0015] In some implementations, the state representation attribute is preferably a custom HTML attribute prefixed with "data-".

[0016] In some implementations, the data-checked attribute is used to store the boolean state of the checkbox.

[0017] In some implementations, in step S3, the handling function for the state change event locates the starting point of the atomic operation by calculating the current index position of the inline checkbox in the document.

[0018] In some implementations, the HTML string exported in step S4 is directly stored in the database; in step S5, the complete status of the document is displayed by passing the HTML string stored in the database to the clipboard conversion interface of the Quill editor.

[0019] According to a second aspect of the present invention, an inline checkbox processing system based on the Quill editor is also provided, for implementing the inline checkbox state synchronization and bidirectional echo method based on the Quill editor as described above, the system comprising at least: The format registration module is used to define and register custom inline checkbox formats in the Quill editor; The state synchronization engine is used to listen for user interactions with inline checkboxes and construct and submit Delta operation sequences in an atomic manner. The clipboard converter adapter is used to handle the serialization and deserialization of inline checkbox status information when converting between document content and HTML format.

[0020] In some implementations, the clipboard conversion adapter specifically includes: The export transformation unit is used to serialize the stateful CheckboxBlot into a format containing data-checked attributes. <input type=""checkbox”"> element; Import matching units, used to match data containing data-checked attributes using a predefined node matcher. <input type=""checkbox”"> The elements are parsed and converted into CheckboxBlots with corresponding states.

[0021] According to a third aspect of the present invention, an application of an inline checkbox state synchronization and bidirectional echo method based on the Quill editor is also provided. The method described above is encapsulated in the form of a Quill plugin. The Quill editor obtains the functions of inserting, synchronizing, and echoing inline checkboxes by introducing the plugin and calling the registration interface.

[0022] According to a fourth aspect of the present invention, a computer-readable storage medium is also provided, on which a computer program is stored, wherein when the computer program is executed by a processor, the method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor as described above is implemented.

[0023] The beneficial effects of this invention are: 1. Achieve true inline mixed layout: By defining checkboxes as inline type blobs, they can seamlessly coexist on the same line with ordinary text and other inline formatting, resulting in natural layout that fully meets the formatting requirements of professional forms.

[0024] 2. Stable and reliable state synchronization: The innovative use of retain+delete+insert atomic operations to update the checkbox state fully incorporates interactive operations into Delta data flow management, fundamentally eliminating the "crash" problem caused by the asynchrony between DOM operations and the Delta model, resulting in a smooth and flicker-free operating experience.

[0025] 3. Data flow forms a lossless closed loop: By customizing clipboard conversion rules, lossless bidirectional conversion between the internal representation of stateful checkboxes in Quill and the standard HTML representation is achieved. Only the final HTML needs to be stored to achieve perfect persistence and display of the state. No additional interface or data field design is required, and the system architecture is simple and efficient.

[0026] 4. Excellent external compatibility and ease of use: Through the configured node matcher, the system can intelligently identify and convert checkboxes that conform to HTML standards copied and pasted from other documents or systems, and automatically restore their state, greatly improving the efficiency and accuracy of content reuse.

[0027] 5. High integrability and maintainability: The entire technical solution is encapsulated as a standard Quill plugin. Business systems only need to import and register the plugin with one line of code to obtain all functions, which is completely decoupled from business logic and facilitates upgrades and maintenance. Attached Figure Description

[0028] Figure 1 This is a flowchart illustrating a method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor, according to one embodiment of the present invention.

[0029] Figure 2 Based on Figure 1 The flowchart shown is a specific embodiment of the process framework diagram.

[0030] Figure 3 This is a system framework diagram of an inline checkbox processing system based on the Quill editor, according to one embodiment of the present invention. Detailed Implementation

[0031] The following specific examples illustrate the implementation of the present invention. Those skilled in the art can easily understand other advantages and effects of the present invention from the content disclosed in this specification. The present invention can also be implemented or applied through other different specific embodiments, and various details in this specification can also be modified or changed based on different viewpoints and applications without departing from the spirit of the present invention. It should be noted that, unless otherwise specified, the following embodiments and features described therein can be combined with each other.

[0032] It should be noted that the illustrations provided in the following embodiments are only schematic representations of the basic concept of the present invention. Therefore, the drawings only show the components related to the present invention and are not drawn according to the actual number, shape and size of the components in the actual implementation. In the actual implementation, the form, quantity and proportion of each component can be arbitrarily changed, and the layout of the components may also be more complex.

[0033] This invention belongs to the field of rich text editing technology for web front-ends, specifically relating to a method, system, application, and storage medium for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor. It is particularly suitable for scenarios requiring mixed text and interactive options within the same line, such as medical rehabilitation assessments, electronic medical records, and online questionnaires. The method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor includes: registering a custom inline checkbox format (CheckboxBlot) in Quill; updating the editor's internal model by generating a Delta sequence of retain.delete.insert atomic operations when the user checks / cancels a checkbox, thus resolving the "crash" issue caused by DOM operations; and using a clipboard conversion mechanism to serialize the state into a data-checked attribute when exporting HTML, automatically restoring it to a state-enabled checkbox during display or pasting, forming a closed loop of state retention. This invention achieves natural inline mixing of checkboxes and text, flicker-free operation, and lossless state storage during the display process, making it suitable for scenarios requiring mixed text and options, such as medical rehabilitation assessments, electronic medical records, and online questionnaires.

[0034] like Figure 1-2 As shown, this invention discloses a method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor, which includes at least the following steps: S1. Register a custom inline checkbox format in the Quill editor and define its data structure to include checkbox identifier and checked state; S2. Insert an inline checkbox in the document and trigger a state change event when the user checks or dechecks it. S3. In response to a state change event, generate a Delta operation sequence in an atomic manner to update the checkbox status in the row, and submit the Delta operation sequence to the Quill editor's internal Delta model for application, so as to synchronously update the visual state of the Quill editor's internal data model and the Document Object Model (DOM). S4. When exporting document content as HTML format, serialize the inline checkboxes and their current checked state into an HTML input element with a state representation attribute. S5. When displaying or pasting HTML content into the Quill editor, identify HTML input elements with state representation attributes, and reconstruct inline checkboxes with corresponding checked states in the Quill editor based on their state representation attributes.

[0035] As a preferred approach, a custom inline checkbox format is implemented as a CheckboxBlot by inheriting Quill's Inline base class and registered in Quill with the format name 'checkbox'.

[0036] Preferably, the format of the Delta operation sequence generated by the atomic operation method is as follows: Where position is the index position of the inline checkbox in the document Delta sequence, id is the checkbox identifier, and newState is the changed checked state.

[0037] Preferably, the status representation attribute in step S4 is a custom data attribute data-checked, whose value reflects a boolean check status. And / or, in step S5, a matcher function is configured for the input[type="checkbox"] element by calling the Quill.clipboard.addMatcher() method to perform recognition and reconstruction operations.

[0038] As a further preferred embodiment, the state representation attribute is preferably a custom HTML attribute prefixed with data-. In a preferred embodiment of the present invention, the data-checked attribute is used to store the boolean state of the checkbox.

[0039] Preferably, in step S3, the handling function for the state change event locates the starting point of the atomic operation by calculating the current index position of the inline checkbox in the document.

[0040] Preferably, the HTML string exported in step S4 is directly stored in the database; in step S5, the complete status of the document is displayed by passing the HTML string stored in the database to the clipboard conversion interface of the Quill editor.

[0041] like Figure 3 As shown, this invention discloses an inline checkbox processing system based on the Quill editor, used to implement the inline checkbox state synchronization and bidirectional echo method based on the Quill editor as described above. The system includes at least: The format registration module is used to define and register custom inline checkbox formats in the Quill editor; The state synchronization engine is used to listen for user interactions with inline checkboxes and construct and submit Delta operation sequences in an atomic manner. The clipboard converter adapter is used to handle the serialization and deserialization of inline checkbox status information when converting between document content and HTML format.

[0042] As a preferred embodiment, the clipboard conversion adapter specifically includes: The export transformation unit is used to serialize the stateful CheckboxBlot into a format containing data-checked attributes. <input type=""checkbox”"> element; Import matching units, used to match data containing data-checked attributes using a predefined node matcher. <input type=""checkbox”"> The elements are parsed and converted into CheckboxBlots with corresponding states.

[0043] This invention also discloses an application of an inline checkbox state synchronization and bidirectional echo method based on the Quill editor. The method described above is encapsulated in the form of a Quill plugin. The Quill editor obtains the functions of inserting, synchronizing, and echoing inline checkboxes by introducing the plugin and calling the registration interface.

[0044] The present invention also discloses a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor as described above.

[0045] To better explain the technical solution of the present invention, the present invention also provides the following specific embodiments: Example 1: Inserting inline checkboxes refer to Figure 1 and Figure 2 In the rehabilitation report editing interface, the doctor clicks the newly added "Insert Checkbox" icon on the toolbar. The front-end code then executes: quill.format('checkbox', {id: 'mobility_10m', checked: false}).

[0046] The Quill editor receives this instruction and, through the registered CheckboxBlot, dynamically generates and inserts an unchecked checkbox at the current cursor position. The doctor continues typing "10 meters," and the checkbox and the text "10 meters" are visible on the same line with no line breaks in between, achieving a perfect inline text mixing effect.

[0047] Example 2: Atomic Synchronization and Update of Checkbox States Continue to refer to Figure 1 and Figure 2The doctor clicks the previously inserted checkbox with the mouse, triggering its `change` event. The event handler then begins its work: First, it iterates through Quill's current Delta model, locates the node corresponding to the checkbox, and calculates its index in the sequence. Then, it constructs an atomic Delta operation: for example, if the original state was unchecked and the new state is checked, the operation is as follows:

[0048] Finally, `quill.updateContents(delta)` is called to submit the operation. After the Quill kernel applies this operation, the editor's internal data model is updated, and the corresponding data in the DOM is updated. <input> The element's `data-checked` attribute is set to "true", and it appears visually checked. The entire process is instantaneous, the cursor position is stable, and there is no screen flickering or scrolling.

[0049] Example 3: Document Saving and State Persistence After the doctor finishes editing, they click the "Save" button. The system doesn't need to process complex Delta data; instead, it directly retrieves the HTML content of the editor's root container: `const htmlContent = quill.root.innerHTML`. The resulting string will look something like:

[0050] This string, which fully contains the document structure and the precise status of all checkboxes, is directly stored in the report_html field of the database for persistent storage.

[0051] Example 4: Document Echo and Precise Status Restoration When the doctor reopens the recovery report, the system reads the aforementioned HTML string from the database and sets it as the initial content for the Quill editor. During Quill initialization, its clipboard module's `convert` method is called to convert the HTML into an internal Delta representation. At this point, the pre-registered matcher begins its work: it identifies two... <input type=""checkbox”"> The element reads its data-checked attribute value ("true" and "false") and creates two CheckboxBlot instances accordingly, with their checked attribute values ​​initialized to true and false respectively. After the page is rendered, the first checkbox is displayed as checked, and the second as unchecked, perfectly consistent with the state at the time of the last save, achieving lossless display of the state.

[0052] Example 5: Preserving the state of copy and paste across documents The doctor copied text containing a checked checkbox from another document. When the doctor pastes it into the currently edited document, Quill's paste process is automatically triggered. The matcher registered in this invention also takes effect during this process. It captures the text within the pasted content. <input type=""checkbox”" checked> The element (a standard HTML attribute) is automatically converted into a CheckboxBlot, and the checked attribute value is mapped to the data-checked attribute and internal state of the Blot. Therefore, checkboxes pasted into a new document automatically retain their "checked" state, eliminating the need for doctors to perform any secondary operations and greatly improving work efficiency and data accuracy.

[0053] The advantages of the inline checkbox state synchronization and bidirectional echo method and system based on the Quill editor of the present invention compared with the prior art are as follows: 1. Using retain+delete+insert atomic operations as the sole method for state changes, the check action is incorporated into the Delta data stream, which has the advantages of zero operation flicker and no cursor jump. User interaction and editor kernel data stream are perfectly synchronized, fundamentally eliminating visual rollback and data inconsistency issues.

[0054] 2. Define checkboxes as custom blobs at the inline level to allow text and checkboxes to be displayed in the same line, meeting the natural layout requirements of professional forms such as "Patients can walk independently □ 10 meters □ 50 meters", improving document aesthetics and space utilization.

[0055] 3. Through the clipboard.addMatcher bidirectional conversion mechanism, the automatic mapping between HTML with the data-checked attribute and the internal Blot is realized, forming a lossless closed loop of "edit → save → display". Only the final HTML needs to be saved to perfectly restore all interactive states. No additional interfaces or data fields are required, and the system architecture is extremely simple.

[0056] 4. The matcher can intelligently convert external HTML checkboxes, and the entire solution is packaged as a standard Quill plugin. Cross-document copy and paste retains 100% of the state, improving content reuse efficiency. It can be integrated with a single line of code on the business side, decoupled from business logic, easy to upgrade and maintain, and reduces technical debt.

[0057] In summary, this invention systematically solves three interrelated technical challenges—"inline display," "stable interaction," and "state persistence"—through an innovative solution deeply integrated with the Quill editor's core architecture (Delta model, Blot system, and Clipboard module). Its greatest value lies in achieving professional-grade interactive document editing functions that were previously impossible, using a purely front-end, low-cost approach while maintaining all of Quill's native features. This provides a reliable technical foundation for the digitization of complex forms in fields such as healthcare and questionnaires.

[0058] The above embodiments are merely illustrative of the principles and effects of the present invention and are not intended to limit the invention. Any person skilled in the art can modify or alter the above embodiments without departing from the spirit and scope of the present invention. Therefore, all equivalent modifications or alterations made by those skilled in the art without departing from the spirit and technical concept disclosed in the present invention should still be covered by the claims of the present invention.

Claims

1. A method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor, characterized in that, At least the following steps are included: S1. Register a custom inline checkbox format in the Quill editor and define its data structure to include checkbox identifier and checked state; S2. Insert the inline checkbox into the document, and trigger a state change event when the user performs a check or decheck operation on it; S3. In response to the state change event, generate a Delta operation sequence to update the checkbox status in the row in an atomic operation manner, and submit the Delta operation sequence to the internal Delta model of the Quill editor for application, so as to synchronously update the visual state of the internal data model and the document object model (DOM) of the Quill editor. S4. When exporting the document content as HTML format, serialize the inline checkboxes and their current checked state into an HTML input element with a state representation attribute. S5. When displaying or pasting HTML content into the Quill editor, identify the HTML input element with state representation attributes, and reconstruct the inline checkbox with the corresponding checked state in the Quill editor based on its state representation attributes.

2. The method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor according to claim 1, characterized in that, The custom inline checkbox format is implemented as a CheckboxBlot by inheriting Quill's Inline base class, and is registered in Quill with the format name 'checkbox'.

3. The method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor according to claim 2, characterized in that, The format of the Delta operation sequence generated by the atomic operation method is as follows: Where position is the index position of the checkbox in the document Delta sequence, id is the checkbox identifier, and newState is the changed checked state.

4. The method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor according to any one of claims 1-3, characterized in that, The state representation attribute mentioned in step S4 is a custom data attribute data-checked, whose value reflects the boolean check status. And / or, in step S5, a matcher function is configured for the input[type="checkbox"] element by calling the Quill.clipboard.addMatcher() method to perform the recognition and reconstruction operation.

5. The method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor according to any one of claims 1-3, characterized in that, In step S3, the handling function for the state change event locates the starting point of the atomic operation by calculating the current index position of the inline checkbox in the document.

6. The method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor according to any one of claims 1-3, characterized in that, The HTML string exported in step S4 is directly stored in the database; in step S5, the complete status of the document is displayed by passing the HTML string stored in the database to the clipboard conversion interface of the Quill editor.

7. A Quill editor-based inline checkbox processing system, used to implement the Quill editor-based inline checkbox state synchronization and bidirectional echo method as described in any one of claims 1-6, characterized in that, The system includes at least: The format registration module is used to define and register the custom inline checkbox format in the Quill editor; A state synchronization engine is used to listen for user interactions with inline checkboxes and to construct and submit a Delta operation sequence for the atomic operation method. The clipboard converter adapter is used to handle the serialization and deserialization of the checkbox status information in the inline when converting between document content and HTML format.

8. The inline checkbox processing system based on the Quill editor according to claim 7, characterized in that, The clipboard conversion adapter specifically includes: The export transformation unit is used to serialize the stateful CheckboxBlot into a format containing data-checked attributes. <input type=""checkbox”"> element; Import matching units, used to match data containing data-checked attributes using a predefined node matcher.<inputtype="checkbox”> The elements are parsed and converted into CheckboxBlots with corresponding states.

9. An application of a method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor, characterized in that, The method for synchronizing the status of inline checkboxes and displaying bidirectional echoes based on the Quill editor is encapsulated in the form of a Quill plugin. The Quill editor obtains the functions of inserting, synchronizing the status of, and displaying bidirectional echoes of the inline checkboxes by introducing the plugin and calling the registration interface.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the method for synchronizing and bidirectionally displaying the state of inline checkboxes based on the Quill editor as described in any one of claims 1-6.

Images