A method, device, electronic equipment and storage medium for inserting, status synchronization and echoing of a rich-text inline checkbox

Abstract

The application discloses a method and device for inserting, state synchronization and echoing of a rich-text inline checkbox, electronic equipment and a storage medium, and relates to the technical field of medical informatization and Web front end. The method comprises the following steps: extending an inline void node as a checkbox node in a Slate data model; registering a rendering module to render the node into an interactive checkbox element carrying a data-checked attribute; listening to a change event to synchronously update a checked attribute of the node and a data-checked attribute of a DOM; generating a checkbox label with the data-checked attribute through an elemsToHtml rule when exporting HTML; and parsing the data-checked attribute in the HTML through a parseElemsHtml rule when echoing, reconstructing a Slate node and restoring a check state. The application realizes seamless inline mixed arrangement of the checkbox and the text, completes a state closed loop through an HTML standard custom attribute, and realizes accurate persistence and echoing of the state without backend database modification, so that the code coupling degree is low, and the application is easy to integrate and maintain.

Description

Technical Field

[0001] This invention relates to the fields of medical informatics and web front-end technology, and particularly to a method, apparatus, electronic device, and storage medium for inserting, synchronizing, and displaying the status of checkboxes within rich text lines. Background Technology In the field of rehabilitation medicine, when doctors write assessment reports, they need to embed multiple checkboxes within descriptive text to accurately describe the patient's functional status, such as: "The patient can walk independently on flat ground □ 10 meters □ 50 meters □ 100 meters." This format requires the checkboxes to be on the same line as the text for natural layout and intuitive reading.

[0002] Currently, there are several main solutions to achieve the above functions: 1. Image Alternative: Insert the checkboxes as images into rich text. Although this solution can achieve inline layout, the images are not interactive, and doctors cannot directly check them while editing, resulting in a poor user experience. 2. Block-level element solution: Use the built-in block-level element-based features of the rich text editor (such as...) or When inserting checkboxes into a control, line breaks occur before and after the block-level element, causing the checkboxes and text to not stay on the same line, which disrupts the continuity of the text and the aesthetics of the report layout. 3. Plain text solution: This method uses only square brackets "【】" or "□" to replace checkboxes. This method cannot record and display the user's check status, and the information is not fully expressed.

[0003] Some existing mainstream rich text editors, such as wangEditor-next, while powerful in function, do not natively support checkbox nodes that can be embedded in the text, are interactive, and whose state can be synchronized with the document data model (such as the Slate model) in real time. In particular, they lack a mechanism that can write the state into the final stored HTML in real time when the user checks the box and perfectly restore it when displayed. This usually requires complex backend modifications to store additional state data, increasing the complexity of the system and development costs. Summary of the Invention

[0004] The purpose of this invention is to provide a method, apparatus, electronic device, and storage medium for inserting, synchronizing, and displaying checkboxes within rich text lines. This invention enables checkboxes to be integrated with text lines, interactive, persistent in state, and accurately displayed without relying on backend modifications, thus solving at least one of the existing problems.

[0005] To achieve the above objectives, the present invention provides the following technical solution: According to a first aspect of the present invention, a method for inserting, synchronizing, and echoing checkboxes within a rich text line is provided, applied to a rich text editor based on the Slate data model, the method comprising: Node definition steps: In the Slate data model of the rich text editor, extend an inline void node. The inline void node is used to represent a checkbox and contains at least one checked property to record the checked state. The inline void node is configured to be on the same line as the text before and after it during typesetting and the cursor cannot enter the node. Rendering registration steps: Register a custom rendering module for inline void nodes on the rich text editor. The custom rendering module is used to render the inline void nodes in the Slate model as interactive checkbox elements on the page, and initialize the checked attribute of the interactive checkbox element and the HTML5 standard data-checked custom data attribute according to the checked attribute value in the inline void node. State synchronization steps: Listen for the change event of the interactive checkbox element, respond to the change event, get the current checked state, and perform the following updates simultaneously: Update the checked property of the corresponding void node in the Slate model to the currently checked state; Update the data-checked property on the interactive checkbox element so that its value matches the checked property value of the inline void node; Content export steps: In response to the save command, the rich text editor's content export interface is called to generate an HTML string containing interactive checkbox elements, where the interactive checkbox elements carry the data-checked attribute; Content display steps: In response to the display command, the stored HTML string is set back into the editor through the rich text editor's content loading interface. According to the pre-registered parseElemsHtml parsing rules, the interactive checkbox elements in the HTML string and their data-checked attributes are identified. Based on the value of the data-checked attribute, the checked attribute of the corresponding inline void node in the Slate model is set, thereby reconstructing the Slate data model.

[0006] In some implementations, the data structure of an inline void node in the Slate data model is as follows: { type: 'checkbox', checked: false, children: [{ text: ''}] } Furthermore, by overriding the isInline and isVoid methods of the rich text editor, both the isInline and isVoid methods return true for inline void nodes, ensuring that inline void nodes are on the same line as the preceding and following text during typesetting and that the cursor cannot enter the node.

[0007] In some implementations, the custom data attribute is the HTML5 standard data-checked attribute, whose value is a numeric representation of the boolean value corresponding to the checked attribute. That is, when checked is true, the data-checked value is "1", and when checked is false, the data-checked value is "0".

[0008] In some implementations, during the state synchronization step, updating the checked property of the corresponding inline void node in the Slate model is achieved through the SlateTransforms.setNodes interface.

[0009] In some implementations, the content export step further includes: Register the elemsToHtml conversion rule in advance in the rich text editor. The conversion rule is used to convert inline void nodes into HTML strings in the following format: <input type="checkbox" data-checked="1 / 0"> .

[0010] In some implementations, the parseElemsHtml parsing rules in the content echoing step include at least one selector and its corresponding node generation function, used to select elements from the HTML string... <input> The data-checked attribute value of an element generates an inline void node with the corresponding checked attribute value.

[0011] In some implementations, the parseElemsHtml parsing rules include: The first parsing rule uses the selector input[data-checked="0"] to generate an inline void node with the checked attribute set to false. The second parsing rule uses input[data-checked="1"] as the selector to generate an inline void node with the checked attribute set to true. The third parsing rule, with the selector input[type=checkbox], serves as a default fallback rule. It is used to generate an inline void node with the checked attribute set to false when the first or second parsing rule cannot be matched.

[0012] In some implementations, the method for inserting, synchronizing, and echoing checkboxes within rich text lines also includes a read-only control step: Get the status information of the report where the rich text editor is located. If the report status is archived, add the disabled attribute to all rendered interactive checkbox elements to make them read-only, and hide the toolbar button used to insert new checkboxes.

[0013] According to a second aspect of the present invention, a device for inserting, synchronizing, and echoing the status of checkboxes within a rich text line is also provided, characterized in that it comprises: The node definition module is used to extend an inline void node in a rich text editor based on the Slate data model. The inline void node is used to represent a checkbox and contains at least one checked property to record the checked state. The inline void node is configured to be on the same line as the text before and after it during typesetting and the cursor cannot enter the node. The rendering registration module is used to register a custom rendering module for inline void nodes on the rich text editor. The custom rendering module is used to render the inline void nodes in the Slate model into interactive checkbox elements on the page, and initialize the checked attribute of the interactive checkbox element and the HTML5 standard data-checked custom data attribute according to the checked attribute value in the inline void node. The state synchronization module listens for the change event of interactive checkbox elements, responds to the change event, obtains the current checked state, and performs the following updates simultaneously: Update the checked property of the corresponding void node in the Slate model to the currently checked state; Update the data-checked property on the interactive checkbox element so that its value matches the checked property value of the inline void node; The content export module is used to respond to the save command by calling the rich text editor's content export interface to generate an HTML string containing interactive checkbox elements, where the interactive checkbox elements carry the data-checked attribute. The content echo module is used to respond to the echo command, set the stored HTML string back into the editor through the rich text editor's content loading interface, identify interactive checkbox elements and their data-checked attributes in the HTML string according to the pre-registered parseElemsHtml parsing rules, and set the checked attribute of the corresponding inline void node in the Slate model based on the value of the data-checked attribute, thereby reconstructing the Slate data model.

[0014] According to a third aspect of the present invention, an electronic device is also provided, characterized in that it includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the method for inserting, synchronizing and echoing the status of checkboxes in rich text lines as described above.

[0015] According to a fourth aspect of the present invention, a computer-readable storage medium is also provided, on which a computer program is stored, which, when executed by a processor, implements the method for inserting, synchronizing, and echoing checkboxes within rich text lines as described above.

[0016] The beneficial effects of this invention are: 1. Low coupling and easy to implement: The closed-loop transfer of state between the front end and the back end is achieved through HTML custom attributes (data-checked), without the need to modify the back end database structure or add additional API interfaces. The implementation cost is low, the core logic code is small, and it is easy to maintain.

[0017] 2. Natural Layout: Utilizing the inline void node feature of the Slate model, it ensures that checkboxes and text are mixed inline, without producing unexpected line breaks, perfectly meeting the professional layout requirements of rehabilitation assessment reports.

[0018] 3. Accurate state restoration: The data-checked attribute is used to fix the state during export and the model standardization mechanism is used to force synchronization during display, which ensures 100% accurate restoration of the checkbox state, and what you see is what you get.

[0019] 4. High compatibility and maintainability: HTML generation is the standard. <input type="checkbox"> The element is compatible with all browsers and remains recognizable even when data is copied to external systems. Furthermore, this method encapsulates the interaction details with specific editors (such as wangEditor-next) and frameworks (such as Vue), making it easily extensible as a plugin for reuse across multiple projects and allowing for smooth updates to the editor's core version.

[0020] 5. Supports read-only mode: Archived reports can be viewed in read-only mode through simple attribute control, preventing data from being modified accidentally.

[0021] In summary, this invention provides a method, apparatus, electronic device, and storage medium for inserting, synchronizing, and displaying inline checkboxes in rich text, relating to the fields of medical informatics and web front-end technology. The method includes: extending inline void nodes as checkbox nodes in the Slate data model; registering a rendering module to render the nodes as interactive checkbox elements carrying the `data-checked` attribute; listening to the `change` event to synchronously update the `checked` attribute of the node and the `data-checked` attribute of the DOM; generating checkbox tags with `data-checked` using the `elemsToHtml` rule when exporting HTML; and parsing the `data-checked` attribute in the HTML using the `parseElemsHtml` rule during display, reconstructing the Slate node, and restoring the checked state. This invention achieves seamless inline mixing of checkboxes and text, completes the state loop through HTML standard custom attributes, achieves accurate persistence and display of state without backend database modifications, has low code coupling, and is easy to integrate and maintain. Attached Figure Description

[0022] Figure 1 This is a flowchart illustrating a method for inserting, synchronizing, and displaying checkboxes within a rich text line, according to one embodiment of the present invention.

[0023] Figure 2 for Figure 1 The flowchart shown is the process of wangEditor-next parsing HTML.

[0024] Figure 3 This is a system framework diagram of a rich text in-line checkbox insertion, status synchronization, and echoing device according to one embodiment of the present invention.

[0025] Figure 4 This is a schematic diagram of an electronic device according to one embodiment of the present invention. Detailed Implementation

[0026] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the invention. All other embodiments obtained by those skilled in the art based on the embodiments of this invention without inventive effort are within the scope of protection of this invention.

[0027] This invention provides a method for inserting, synchronizing, and displaying the status of checkboxes within a rich text line. (See reference...) Figure 1-2 The diagram shown is a flowchart illustrating an embodiment of the method for inserting, synchronizing, and displaying checkboxes within a rich text line according to the present invention.

[0028] This method can be executed by an electronic device, which can be implemented in software and / or hardware, and can be applied to a rich text editor based on the Slate data model, specifically including: Node definition steps: In the Slate data model of the rich text editor, extend an inline void node. The inline void node is used to represent a checkbox and contains at least one checked property to record the checked state. The inline void node is configured to be on the same line as the text before and after it during typesetting and the cursor cannot enter the node. Rendering registration steps: Register a custom rendering module for inline void nodes on the rich text editor. The custom rendering module is used to render the inline void nodes in the Slate model as interactive checkbox elements on the page, and initialize the checked attribute of the interactive checkbox element and the HTML5 standard data-checked custom data attribute according to the checked attribute value in the inline void node. State synchronization steps: Listen for the change event of the interactive checkbox element, respond to the change event, get the current checked state, and perform the following updates simultaneously: Update the checked property of the corresponding void node in the Slate model to the currently checked state; Update the data-checked property on the interactive checkbox element so that its value matches the checked property value of the inline void node; Content export steps: In response to the save command, the rich text editor's content export interface is called to generate an HTML string containing interactive checkbox elements, where the interactive checkbox elements carry the data-checked attribute; Content display steps: In response to the display command, the stored HTML string is set back into the editor through the rich text editor's content loading interface. According to the pre-registered parseElemsHtml parsing rules, the interactive checkbox elements in the HTML string and their data-checked attributes are identified. Based on the value of the data-checked attribute, the checked attribute of the corresponding inline void node in the Slate model is set, thereby reconstructing the Slate data model.

[0029] As a preferred approach, the data structure for inline void nodes in the Slate data model is as follows: { type: 'checkbox', checked: false, children: [{ text: ''}] } Furthermore, by overriding the isInline and isVoid methods of the rich text editor, both the isInline and isVoid methods return true for inline void nodes, ensuring that inline void nodes are on the same line as the preceding and following text during typesetting and that the cursor cannot enter the node.

[0030] Preferably, the custom data attribute is the HTML5 standard data-checked attribute, whose value is the numeric representation of the boolean value corresponding to the checked attribute. That is, when checked is true, the data-checked value is "1", and when checked is false, the data-checked value is "0".

[0031] Preferably, in the state synchronization step, updating the checked property of the corresponding inline void node in the Slate model is implemented through the SlateTransforms.setNodes interface.

[0032] As a preferred embodiment, the content export step further includes: Register the elemsToHtml conversion rule in advance in the rich text editor. The conversion rule is used to convert inline void nodes into HTML strings in the following format: <input type="checkbox" data-checked="1 / 0"> .

[0033] Preferably, the parseElemsHtml parsing rules in the content display step include at least one selector and its corresponding node generation function, used to parse the HTML string according to the content... <input> The data-checked attribute value of an element generates an inline void node with the corresponding checked attribute value.

[0034] As a preferred approach, the parseElemsHtml parsing rules include: The first parsing rule uses the selector input[data-checked="0"] to generate an inline void node with the checked attribute set to false. The second parsing rule uses input[data-checked="1"] as the selector to generate an inline void node with the checked attribute set to true. The third parsing rule, with the selector input[type=checkbox], serves as a default fallback rule. It is used to generate an inline void node with the checked attribute set to false when the first or second parsing rule cannot be matched.

[0035] As a preferred method, the insertion, status synchronization, and echoing of checkboxes within rich text lines also include a read-only control step: Get the status information of the report where the rich text editor is located. If the report status is archived, add the disabled attribute to all rendered interactive checkbox elements to make them read-only, and hide the toolbar button used to insert new checkboxes.

[0036] Reference Figure 3 The diagram shown is a functional module schematic of the rich text line checkbox insertion, status synchronization and echo device 100 of the present invention.

[0037] The rich text in-line checkbox insertion, status synchronization, and echoing device 100 of the present invention can be installed in an electronic device. Depending on the functions implemented, the rich text in-line checkbox insertion, status synchronization, and echoing device 100 may include a node definition module 110, a rendering registration module 120, a status synchronization module 130, a content export module 140, and a content echoing module 150. These modules can also be referred to as units, which are a series of computer program segments that can be executed by the processor of an electronic device and can perform a fixed function, and are stored in the memory of the electronic device.

[0038] In this embodiment, the functions of each module / unit are as follows: The node definition module 110 is used to extend an inline void node in a rich text editor based on the Slate data model. The inline void node is used to represent a checkbox and contains at least one checked property to record the checked state. The inline void node is configured to be on the same line as the preceding and following text during typesetting and the cursor cannot enter the node. The rendering registration module 120 is used to register a custom rendering module for inline void nodes on the rich text editor. The custom rendering module is used to render the inline void nodes in the Slate model as interactive checkbox elements on the page, and initialize the checked attribute of the interactive checkbox element and the HTML5 standard data-checked custom data attribute according to the checked attribute value in the inline void node. The state synchronization module 130 is used to listen for the change event of interactive checkbox elements. In response to the change event, it obtains the current checked state and performs the following updates simultaneously: Update the checked property of the corresponding void node in the Slate model to the currently checked state; Update the data-checked property on the interactive checkbox element so that its value matches the checked property value of the inline void node; The content export module 140 is used to respond to the save command by calling the content export interface of the rich text editor to generate an HTML string containing interactive checkbox elements, wherein the interactive checkbox elements carry the data-checked attribute. The content echo module 150 is used to respond to the echo command, set the stored HTML string back into the editor through the content loading interface of the rich text editor, identify the interactive checkbox elements and their data-checked attributes in the HTML string according to the pre-registered parseElemsHtml parsing rules, and set the checked attribute of the corresponding inline void node in the Slate model based on the value of the data-checked attribute, thereby reconstructing the Slate data model.

[0039] Reference Figure 4 The diagram shown is a schematic representation of a preferred embodiment of the electronic device 1 of the present invention.

[0040] The electronic device 1 includes, but is not limited to, a memory 11, a processor 12, a display 13, and a network interface 14. The electronic device 1 connects to a network via the network interface 14 to acquire raw data. The network can be an intranet, the Internet, Global System for Mobile Communications (GSM), Wideband Code Division Multiple Access (WCDMA), 4G, 5G, Bluetooth, or Wi-Fi. Wireless or wired networks such as Fi and voice communication networks.

[0041] The memory 11 includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc.

[0042] Preferably, the memory 11 can be an internal storage unit of the electronic device 1, such as a hard disk or RAM of the electronic device 1. In other embodiments, the memory 11 can also be an external storage device of the electronic device 1, such as a plug-in hard disk, smart media card (SMC), secure digital card (SD) card, flash card, etc., equipped with the electronic device 1. Of course, the memory 11 can also include both internal storage units and external storage devices of the electronic device 1.

[0043] In this embodiment, the memory 11 is typically used to store the operating system and various application software installed on the electronic device 1, such as the program code for inserting checkboxes in rich text lines and the status synchronization and echo program 10. In addition, the memory 11 can also be used to temporarily store various types of data that have been output or will be output.

[0044] The processor 12 is preferably a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip. The processor 12 is typically used to control the overall operation of the electronic device 1, such as performing data interaction or communication-related control and processing. In this embodiment, the processor 12 is used to run program code stored in the memory 11 or process data, such as running program code for inserting checkboxes within rich text lines, and for the status synchronization and echoing program 10.

[0045] The display 13 can be referred to as a display screen or display unit. Preferably, the display 13 can be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, or an organic light-emitting diode (OLED) touchscreen, etc. The display 13 is used to display information processed in the electronic device 1 and to display a visual working interface, such as displaying the results of data statistics.

[0046] Network interface 14 may optionally include a standard wired interface, a wireless interface (such as Wi-Fi), etc. The network interface 14 (FI interface) is typically used to establish communication connections between electronic device 1 and other electronic devices.

[0047] Figure 3 Only an electronic device 1 with components 11-14 and a rich text inline checkbox insertion, status synchronization and echoing procedure 10 is shown. However, it should be understood that it is not required to implement all the components shown, and more or fewer components may be implemented instead.

[0048] Optionally, the electronic device 1 may further include a user interface, which may include a display, an input unit such as a keyboard, and optionally, a standard wired interface or a wireless interface. Preferably, the display may be an LED display, a liquid crystal display, a touch-screen liquid crystal display, or an organic light-emitting diode (OLED) display. Emitting Diode (OLED) touch devices, etc. The display, which can also be appropriately referred to as a screen or display unit, is used to display information processed in the electronic device 1 and to display a visual user interface.

[0049] The electronic device 1 may also include radio frequency (RF) circuits, sensors, and audio circuits, etc., which will not be described in detail here.

[0050] In the above embodiment, when the processor 12 executes the rich text line checkbox insertion, status synchronization, and echoing program 10 stored in the memory 11, the following steps can be achieved: Node definition steps: In the Slate data model of the rich text editor, extend an inline void node. The inline void node is used to represent a checkbox and contains at least one checked property to record the checked state. The inline void node is configured to be on the same line as the text before and after it during typesetting and the cursor cannot enter the node. Rendering registration steps: Register a custom rendering module for inline void nodes on the rich text editor. The custom rendering module is used to render the inline void nodes in the Slate model as interactive checkbox elements on the page, and initialize the checked attribute of the interactive checkbox element and the HTML5 standard data-checked custom data attribute according to the checked attribute value in the inline void node. State synchronization steps: Listen for the change event of the interactive checkbox element, respond to the change event, get the current checked state, and perform the following updates simultaneously: Update the checked property of the corresponding void node in the Slate model to the currently checked state; Update the data-checked property on the interactive checkbox element so that its value matches the checked property value of the inline void node; Content export steps: In response to the save command, the rich text editor's content export interface is called to generate an HTML string containing interactive checkbox elements, where the interactive checkbox elements carry the data-checked attribute; Content display steps: In response to the display command, the stored HTML string is set back into the editor through the rich text editor's content loading interface. According to the pre-registered parseElemsHtml parsing rules, the interactive checkbox elements in the HTML string and their data-checked attributes are identified. Based on the value of the data-checked attribute, the checked attribute of the corresponding inline void node in the Slate model is set, thereby reconstructing the Slate data model.

[0051] The storage device can be the memory 11 of the electronic device 1, or it can be other storage devices that are communicatively connected to the electronic device 1.

[0052] For a detailed explanation of the above steps, please refer to the above. Figure 3 A functional block diagram of an embodiment of a rich text inline checkbox insertion, status synchronization, and echoing device 100, and... Figure 1-2 A flowchart illustrating an embodiment of a method for inserting, synchronizing, and echoing checkboxes within a rich text line.

[0053] Furthermore, embodiments of the present invention also propose a computer-readable storage medium, which can be non-volatile or volatile. This computer-readable storage medium can be a hard disk, multimedia card, SD card, flash memory card, SMC, read-only memory (ROM), erasable programmable read-only memory (EPROM), or portable compact disc read-only memory (CD). The computer-readable storage medium includes any one or more of the following: ROM, USB memory, etc. The storage data area stores data created based on the use of blockchain nodes, and the storage program area stores a rich text line checkbox insertion, status synchronization, and echoing program 10. When executed by the processor, the rich text line checkbox insertion, status synchronization, and echoing program 10 performs the following operations: Node definition steps: In the Slate data model of the rich text editor, extend an inline void node. The inline void node is used to represent a checkbox and contains at least one checked property to record the checked state. The inline void node is configured to be on the same line as the text before and after it during typesetting and the cursor cannot enter the node. Rendering registration steps: Register a custom rendering module for inline void nodes on the rich text editor. The custom rendering module is used to render the inline void nodes in the Slate model as interactive checkbox elements on the page, and initialize the checked attribute of the interactive checkbox element and the HTML5 standard data-checked custom data attribute according to the checked attribute value in the inline void node. State synchronization steps: Listen for the change event of the interactive checkbox element, respond to the change event, get the current checked state, and perform the following updates simultaneously: Update the checked property of the corresponding void node in the Slate model to the currently checked state; Update the data-checked property on the interactive checkbox element so that its value matches the checked property value of the inline void node; Content export steps: In response to the save command, the rich text editor's content export interface is called to generate an HTML string containing interactive checkbox elements, where the interactive checkbox elements carry the data-checked attribute; Content display steps: In response to the display command, the stored HTML string is set back into the editor through the rich text editor's content loading interface. According to the pre-registered parseElemsHtml parsing rules, the interactive checkbox elements in the HTML string and their data-checked attributes are identified. Based on the value of the data-checked attribute, the checked attribute of the corresponding inline void node in the Slate model is set, thereby reconstructing the Slate data model.

[0054] The specific implementation of the computer-readable storage medium of the present invention is largely the same as the specific implementation of the above-described method for inserting, synchronizing and echoing checkboxes in rich text lines, and will not be repeated here.

[0055] To better explain the technical solution of the present invention, the present invention also provides the following specific embodiments: The methods described in the following embodiments can be implemented based on the popular web rich text editor wangEditor-next (which uses the Slate data model at its core) and the Vue.js front-end framework. Those skilled in the art will understand that other rich text editors and front-end frameworks based on the Slate model or with similar extension mechanisms are also applicable.

[0056] Example 1: Insertion and Status Maintenance of In-line Checkboxes in Medical Rehabilitation Assessment Reports Reference Figure 1-2 This embodiment details the complete implementation process of this method in the context of medical rehabilitation assessment reports, specifically including the following steps: A. Initialization and Permission Check: When a doctor opens an assessment report on a Vue page, the front-end component first checks if the report is "archived". If it is "archived", it enters read-only mode: the "Insert Checkbox" button on the editor toolbar is hidden, and the disabled property is set for all existing checkboxes. If it is not archived, the editor and the insert button are displayed normally.

[0057] B. Insert a checkbox node: To enable the insertion of inline checkboxes, a series of extended registrations must first be performed during the boot process of wangEditor-next: a. Define the node model: In the Slate data model, define a new inline void node of type checkbox, with the following data structure: { type: 'checkbox', checked: false, / / Boolean value, records the checked status. children: [{ text: ''}] / / Conforms to the Slate specification; void nodes must contain empty text child nodes. } b. Register the module and override the core method: Register a module named inline-checkbox-module using Boot.registerModule(). In the editorPlugin function of this module, override the editor's isInline and isVoid methods to make nodes of type checkbox recognized as inline elements and void elements, thus ensuring that they are mixed with the text inline and that the cursor cannot enter the inside.

[0058] editor.isInline = elem =>elem.type === 'checkbox' ? true : isInline(elem); editor.isVoid = elem =>elem.type === 'checkbox' ? true : isVoid(elem); c. Register the rendering function: The `renderCheckbox` function, which is used to render checkboxes, is registered via `Boot.registerRenderElem()`. This function uses `snabbdom.h()` to construct a virtual DOM. The core logic is as follows: function renderCheckbox(elem, children, editor) { const checked = !!elem.checked; const path = DomEditor.findPath(editor, elem); / / Get the path of the node in Slate const cb = h('input', { type: 'checkbox', checked, 'data-checked': +checked, / / Writes the state to a custom property on: { change: function (ev) { / / Steps S5 and S6: State synchronization logic is implemented here ev.target.dataset.checked = +ev.target.checked; / / Update DOM property SlateTransforms.setNodes(editor, { checked: ev.target.checked}, {at: path, mode: 'highest'}); / / Update Slate nodes } } }, []); / / Wrap the input with a span and add the necessary tag attributes. return h('span', { 'data-we-is-inline': true, 'data-slate-inline': true, 'data-we-type': 'checkbox', 'data-we-is-void': true}, [cb]); } This step ensures that the checkboxes are rendered correctly on the page and binds the change event for subsequent state synchronization.

[0059] d. Define menu: Create a checkMenu class to implement the insertion function. In the exec method, construct a checkbox node with an initial state of false and insert it at the current cursor position using editor.insertNode(node). Then call editor.move(1) to move the cursor to the node so that you can continue to enter text. Finally, register the menu to the editor using Boot.registerMenu().

[0060] class checkMenu { / / ... other methods exec(editor, value) { const node = { type: 'checkbox', checked: false, children: [{ text:''}]}; editor.insertNode(node); editor.move(1); / / Move cursor forward } } When the doctor clicks the menu item, an unchecked checkbox is inserted into the text, on the same line as the text before and after it.

[0061] C. State synchronization: When the doctor clicks the checkbox, the `change` event is triggered, executing the `on.change` callback defined in the rendering function mentioned above. This callback performs two operations simultaneously: Update the DOM's data-checked property (ev.target.dataset.checked = +ev.target.checked); Update the checked property of the corresponding node in the Slate model using SlateTransforms.setNodes to ensure that the data model and view remain consistent.

[0062] D. Saving and Exporting: After the doctor clicks "Save," the editor calls `editor.getHtml()` to generate HTML. Internally, wangEditor-next iterates through all nodes, and for each node, it searches for the `elemsToHtml` configuration registered via `Boot.registerModule`. This example configures the following conversion rules: elemsToHtml: [{ type: 'checkbox', elemToHtml: (el, r) =>{ return ` <input type="checkbox" data-checked="${+el.checked}"> ` } }] Therefore, checkbox nodes are converted to standard ones that carry the data-checked attribute. <input> Tags. The generated HTML snippet is as follows: The patient can walk independently on flat ground. <input type="checkbox" data-checked="1"> 10m <input type="checkbox" data-checked="0"> 50 m. The HTML string was then stored in the database.

[0063] E. Echo and State Restore: When displaying the output, the HTML string is set back to the editor using `editor.setHtml(html)`. When wangEditor-next parses the HTML, it will follow the `parseElemsHtml` rules registered in `Boot.registerModule`. <input> Elements are converted into corresponding Slate nodes. This example configures three parsing rules: parseElemsHtml: [ { selector: 'input[data-checked="0"]', parseElemHtml: (e, c) =>({type: 'checkbox', checked: false, children: [{ text: ''}]})}, { selector: 'input[data-checked="1"]', parseElemHtml: (e, c) =>({type: 'checkbox', checked: true, children: [{ text: ''}]})}, { selector: 'input[type=checkbox]', parseElemHtml: (e, c) =>({ type:'checkbox', checked: false, children: [{ text: ''}]})} / / Default to cover up ] After parsing, nodes with the correct `checked` attribute are generated in the Slate model. The editor then re-renders the view based on these nodes, ensuring the checkbox states on the page are exactly the same as before saving. This solution eliminates the need for an additional `normalizeNode` forced synchronization step because the parsing rules directly map the `data-checked` value to the node's `checked` attribute, achieving accurate restoration.

[0064] F. Display: Ultimately, the page the doctor saw was exactly the same as the one that had been saved last time.

[0065] Example 2: Automatic layout of multiple checkboxes in the same paragraph In this approach, because we define the checkbox node as `isInline: true` and `isVoid: true`, its layout behavior is similar to an image or an inline block. Regardless of how many checkboxes are inserted consecutively within the same text paragraph, such as "□ No assistance □ Single crutch □ Double crutch", all checkboxes seamlessly connect with the preceding and following text, existing within the same block-level element (e.g., ...). Within the tags, no extra line breaks are generated, ensuring the report's professionalism and readability.

[0066] Example 3: Custom attributes are compatible with standard HTML This solution uses the standard HTML5 custom data attribute `data-checked`. This means that even if rich text content containing checkboxes is copied to emails, Word documents, or other non-local environments, the checkboxes, as a standard HTML element, will still be displayed correctly. If third-party systems need to parse the checked status in the report, they only need to read this `data-checked` attribute, without relying on any proprietary protocols, demonstrating good openness and compatibility.

[0067] Example 4: Non-invasive upgrade The core logic of this solution is implemented through the standard extension interfaces (custom nodes, renderers, and normalize functions) provided by wangEditor-next, without modifying its core source code. Therefore, when wangEditor-next or the underlying Slate library is upgraded, as long as the extension interfaces remain stable, the functional modules of this solution only require minimal adaptation or even no modification to run normally on the new version, achieving a smooth upgrade.

[0068] It should be noted that the sequence numbers of the above embodiments of the present invention are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, apparatus, article, or method that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, apparatus, article, or method. Without further limitations, an element defined by the phrase "comprising one…" does not exclude the presence of other identical elements in the process, apparatus, article, or method that includes that element.

[0069] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) as described above, and includes several instructions to cause a terminal device (which may be a mobile phone, computer, electronic device, or network device, etc.) to execute the methods described in the various embodiments of the present invention.

[0070] The above are merely preferred embodiments of the present invention and do not limit the scope of the patent. Any equivalent structural or procedural transformations made based on the description and drawings of the present invention, or direct or indirect applications in other related technical fields, are similarly included within the scope of patent protection of the present invention.

Claims

1. A method for inserting, synchronizing, and displaying the status of checkboxes within a rich text line, characterized in that, The method, applied to a rich text editor based on the Slate data model, includes: Node definition steps: In the Slate data model of the rich text editor, an inline void node is extended. The inline void node is used to represent a checkbox and contains at least one checked attribute for recording the checked state. The inline void node is configured to be on the same line as the preceding and following text during typesetting and the cursor cannot enter the node. Rendering registration steps: Register a custom rendering module for the inline void node on the rich text editor. The custom rendering module is used to render the inline void node in the Slate model as an interactive checkbox element on the page, and initialize the checked attribute and the HTML5 standard data-checked custom data attribute of the interactive checkbox element according to the checked attribute value in the inline void node. State synchronization steps: Listen for the change event of the interactive checkbox element, respond to the change event, obtain the current checked state, and simultaneously perform the following updates: Update the checked attribute of the corresponding void node in the Slate model to the current checked state; Update the data-checked attribute on the interactive checkbox element so that its value is consistent with the checked attribute value of the inline void node; Content export step: In response to the save command, the content export interface of the rich text editor is called to generate an HTML string containing the interactive checkbox element, wherein the interactive checkbox element carries the data-checked attribute; Content display steps: In response to the display command, the stored HTML string is set back into the editor through the content loading interface of the rich text editor. According to the pre-registered parseElemsHtml parsing rules, the interactive checkbox elements and their data-checked attributes in the HTML string are identified. Based on the value of the data-checked attribute, the checked attribute of the corresponding inline void node in the Slate model is set, thereby reconstructing the Slate data model.

2. The method for inserting, synchronizing, and echoing the status of checkboxes within a rich text line according to claim 1, characterized in that, The data structure of the inline void node in the Slate data model is as follows: { type: 'checkbox', checked: false, children: [{ text: ''}] } Furthermore, by overriding the isInline and isVoid methods of the rich text editor, both the isInline and isVoid methods return true for the inline void node, so that the inline void node is on the same line as the preceding and following text during typesetting and the cursor cannot enter the node.

3. The method for inserting, synchronizing, and echoing the status of checkboxes within a rich text line according to claim 1, characterized in that, The custom data attribute is the HTML5 standard data-checked attribute, and its value is the numeric representation of the boolean value corresponding to the checked attribute. That is, when checked is true, the data-checked value is "1", and when checked is false, the data-checked value is "0".

4. The method for inserting, synchronizing, and echoing the status of checkboxes within a rich text line according to claim 1, characterized in that, In the state synchronization step, updating the checked property of the corresponding inline void node in the Slate model is implemented through the SlateTransforms.setNodes interface.

5. The method for inserting, synchronizing, and displaying the status of checkboxes within a rich text line according to claim 1, characterized in that, The content export step further includes: A conversion rule called elemsToHtml is pre-registered in the rich text editor. This conversion rule is used to convert the inline void node into an HTML string in the following format: <input type="checkbox" data-checked="1 / 0"> 。 6. The method for inserting, synchronizing, and echoing the status of checkboxes within a rich text line according to claim 1, characterized in that, The parseElemsHtml parsing rules mentioned in the content display step include at least one selector and its corresponding node generation function, used to parse the HTML string according to the content. <input> The data-checked attribute value of an element generates an inline void node with the corresponding checked attribute value.

7. The method for inserting, synchronizing, and echoing the status of checkboxes within a rich text line according to claim 6, characterized in that, The parseElemsHtml parsing rules include: The first parsing rule uses the selector input[data-checked="0"] to generate an inline void node with the checked attribute set to false. The second parsing rule uses input[data-checked="1"] as the selector to generate an inline void node with the checked attribute set to true. The third parsing rule, with the selector input[type=checkbox], serves as a default fallback rule. It is used to generate an inline void node with the checked attribute set to false when the first or second parsing rule cannot be matched.

8. The method for inserting, synchronizing, and echoing the status of checkboxes within a rich text line according to any one of claims 1-7, characterized in that, It also includes read-only control steps: Get the status information of the report where the rich text editor is located. If the report status is archived, add the disabled attribute to all rendered interactive checkbox elements to make them read-only, and hide the toolbar button used to insert new checkboxes.

9. A device for inserting, synchronizing, and displaying the status of checkboxes within a rich text line, characterized in that, include: The node definition module is used to extend an inline void node in a rich text editor based on the Slate data model. The inline void node is used to represent a checkbox and contains at least one checked attribute for recording the checked state. The inline void node is configured to be on the same line as the preceding and following text during typesetting and the cursor cannot enter the node. A rendering registration module is used to register a custom rendering module for the inline void node on the rich text editor. The custom rendering module is used to render the inline void node in the Slate model as an interactive checkbox element on the page, and initialize the checked attribute and the HTML5 standard data-checked custom data attribute of the interactive checkbox element according to the checked attribute value in the inline void node. The state synchronization module is used to listen for the change event of the interactive checkbox element, and in response to the change event, obtain the current checked state and perform the following updates simultaneously: Update the checked attribute of the corresponding void node in the Slate model to the current checked state; Update the data-checked attribute on the interactive checkbox element so that its value is consistent with the checked attribute value of the inline void node; The content export module is used to call the content export interface of the rich text editor in response to the save command, and generate an HTML string containing the interactive checkbox element, wherein the interactive checkbox element carries the data-checked attribute. The content display module is used to respond to the display command by setting the stored HTML string back into the editor through the content loading interface of the rich text editor. According to the pre-registered parseElemsHtml parsing rules, it identifies the interactive checkbox elements and their data-checked attributes in the HTML string, and sets the checked attribute of the corresponding inline void node in the Slate model based on the value of the data-checked attribute, thereby reconstructing the Slate data model.

10. An electronic device, characterized in that, The system includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the computer program, implements a method for inserting, synchronizing, and echoing the status of a checkbox within a rich text line as described in any one of claims 1-8.

Images