A method and system for inserting and displaying inline checkboxes based on CKEditor5
By registering a custom InlineElement and defining a converter in CKEditor5, the problems of inline layout and state loss of checkboxes were solved, enabling checkboxes to be embedded in the same row as the text while maintaining consistent state, thus improving the reusability of doctor reports.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- HANGZHOU JIECHUANGRUI MEDICAL TECHNOLOGY CO LTD
- Filing Date
- 2026-03-04
- Publication Date
- 2026-06-30
AI Technical Summary
CKEditor 5 cannot mix checkboxes inline, causing checkboxes to occupy a separate line, which cannot meet the requirements for inline mixing. The checked state is lost when undoing or copying and pasting, and it cannot be seamlessly integrated with the backend system.
Register a custom inline element type InlineElement in the Schema context of CKEditor5, define the Downcast and Upcast converters, write the check state through model transactions, generate custom data attributes, implement the insertion and echoing of checkboxes, and include them in the undo command stack.
It enables checkboxes to be embedded inline with the text, maintains the checked state during undo and redo, and retains the state when copied and pasted externally, all without requiring backend interface integration, thus improving the efficiency of doctor report reuse.
Smart Images
Figure CN122309000A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of Web rich text editing technology, and in particular to a method and system for inserting and displaying inline checkboxes based on CKEditor5. Background Technology
[0002] CKEditor 5 employs a Model-View-Controller + Command Pattern + Schema Context system. All elements must be mapped to Model nodes via bidirectional converters (Downcast / Upcast). The official documentation only provides basic Inline elements, lacking checkbox InlineElements. Community solutions typically render checkboxes as Block-level Widgets or placeholder images, causing "□" to occupy a single line, failing to meet the requirement of inline text mixing for expressions like "Patients can walk independently □ 10m □ 50m". CKEditor 5's Writer API prohibits direct DOM manipulation; all changes must be written through Model transactions. Otherwise, the undo command stack cannot detect them, resulting in the "checking and losing undo" phenomenon. CKEditor 5's setData() method re-parses the HTML, defaulting to... <input> Filtering to plain text causes "HTML with data-checked" to fail to deserialize, resulting in state loss during echoing. Summary of the Invention
[0003] The purpose of this invention is to provide a method and system for inserting and displaying inline checkboxes based on CKEditor5, so as to solve one or more of the above-mentioned technical problems.
[0004] To achieve this objective, the present invention adopts the following technical solution: A method for inserting and displaying inline checkboxes based on CKEditor5 includes: S1: Register a custom inline element type InlineElement in the Schema context of CKEditor5, define it as a checkbox element, and set attribute fields for it. The attribute fields include at least the checkbox identifier checkboxId and the checked status identifier checked. S2: Define a downcast converter to render the checkbox nodes in the Model as checkbox control elements in the HTML. <input type="checkbox"> And embed the checkbox uniqueness attribute data-checkbox-id and the custom data attribute data-checked for the checked status into the element; S3: Define the Upcast converter, set Upcast as a priority, and identify input elements containing the custom data attributes when parsing external HTML. <input> And convert it back to the checkbox node in the Model layer, while restoring its checked state; S4: Register a custom insert command InsertCheckboxCommand. When the command is executed, it inserts a checkbox node at the cursor position through the model write transaction writer.insert() and incorporates the operation into the CKEditor5 undo command stack. S5: When exporting HTML, use the Downcas converter to generate an input element containing the custom data attribute `data-checked`. <input> ; When echoing HTML, the checked state is automatically restored via the Upcast converter.
[0005] In some implementations, in step S2, the checkbox node is rendered as...<inputtype="checkbox"data-checkbox-id="id"data-checked="false"class="ck-checkbox"> .
[0006] In some implementations, in step S3, the priority of the upcast converter is set to 10.
[0007] In some implementations, in step S3, when parsing the external HTML, the external HTML's...<inputclass="ck-checkbox"> Convert back to the Model node and read data-checked and assign it to checked.
[0008] In some implementations, in step S4, the InsertCheckboxCommand executes the editor.execute('insertCheckbox', {checkboxId, checked}) command.
[0009] In some implementations, in step S5, when exporting HTML, the Downcast converter is called via dataController.stringify() to generate an input element with the data-checked attribute. <input> .
[0010] A system for inserting and displaying inline checkboxes based on CKEditor5, comprising: The model registration module is used to register custom inline checkbox elements and their attributes in the Schema context of CKEditor 5; The down-conversion module is used to convert checkbox nodes in the model into checkbox control elements in HTML and embed custom data attributes; The upconversion module is used to parse custom input elements in external HTML and restore them to checkbox nodes and checked states in the model; The command registration module is used to register custom insert commands, which support inserting nodes into the model's transaction and adding them to the undo stack.
[0011] The beneficial effects of this invention are: 1. Checkboxes are truly embedded inline, on the same line as the text, resulting in a natural layout; 2. Selected actions are written to the Model via Writer transactions and included in the undo command stack, ensuring that the state is not lost during undo / redo. 3. HTML export / echo loop, relying only on the data-checked attribute, no backend interface required; 4. External copy and paste retains 100% of its state, improving doctors' efficiency in reusing reports across different reports; 5. The code exists as a CKEditor 5 plugin, and upgrades only require npm install, decoupling it from business logic. Attached Figure Description
[0012] Figure 1 This is a step diagram of a method for inserting and displaying inline checkboxes based on CKEditor5 according to the present invention; Figure 2 This is a flowchart illustrating a method for inserting and displaying inline checkboxes based on CKEditor5 according to the present invention. Figure 3 This is a structural diagram of a system for inserting and displaying inline checkboxes based on CKEditor5 according to the present invention. Detailed Implementation
[0013] The present invention will now be described in further detail with reference to the accompanying drawings.
[0014] refer to Figures 1 to 2 A method for inserting and displaying inline checkboxes based on CKEditor5, including: S1: Register a custom inline element type InlineElement in the Schema context of CKEditor5, define it as a checkbox element, and set attribute fields for it. The attribute fields include at least the checkbox identifier checkboxId and the checked status identifier checked. Therefore, a checkboxInlineElement that is inline and cannot be split but is clickable can be defined in the schema context to embed checkboxes inline, placing them on the same line as the text for a natural layout.
[0015] S2: Define a downcast converter to render checkbox nodes in the Model layer as checkbox control elements in HTML. <input type="checkbox"> And embed the checkbox uniqueness attribute data-checkbox-id and the custom data attribute data-checked for the checked status into the element; For example, rendering a checkbox node as <input type="checkbox" data-checkbox-id="id" data-checked="false" class="ck-checkbox"> .
[0016] S3: Define the Upcast converter, set Upcast as a priority, and identify input elements containing the custom data attributes when parsing external HTML. <input> And convert it back to the checkbox node in the Model layer, while restoring its checked state; Among them, the Upcast converter is set to a priority of 10, which is higher than the default parser; Specifically, when parsing external HTML, the external HTML's... <input class="ck-checkbox"> Convert back to the Model node and read data-checked and assign it to checked.
[0017] S4: Register a custom insert command InsertCheckboxCommand. When the command is executed, it inserts a checkbox node at the cursor position through the model write transaction writer.insert() and incorporates the operation into the CKEditor5 undo command stack. For example, the InsertCheckboxCommand executes the editor.execute('insertCheckbox', {checkboxId, checked}) command.
[0018] Therefore, the selected status is synchronously checked within the Writer's transaction framework and included in the undo command stack to avoid loss of undo.
[0019] S5: When exporting HTML, use the Downcas converter to generate an input element containing the custom data attribute `data-checked`. <input> ; For example, calling the Downcast converter via dataController.stringify() generates an input element with the data-checked attribute. <input> ; When displaying HTML, the checked state is automatically restored through the Upcast converter, thus achieving a closed-loop maintenance of the checkbox state throughout the entire process of editing, saving, and loading.
[0020] Therefore, when copying / pasting external HTML, input elements containing the data-checked attribute are automatically included. <input> This method converts to the custom inline element type `InlineElement` to prevent state invalidation; furthermore, the HTML export / echo loop relies solely on the `data-checked` attribute, requiring no backend interface; external copy-paste retains 100% state, improving doctors' efficiency in reusing reports across different documents. The code for this method exists as a CKEditor 5 plugin, requiring only `npm install` for upgrades, decoupling it from business logic and saving development costs.
[0021] refer to Figure 3 A system for inserting and displaying inline checkboxes based on CKEditor5, used to perform the above method; The system includes: Model registration module 1 is used to register custom inline checkbox elements and their attributes in the Schema context of CKEditor 5; Down-conversion module 2 is used to convert checkbox nodes in the model into checkbox control elements in HTML. <input type="checkbox"> And embed custom data attributes; Up-conversion module 3 is used to parse custom input elements in external HTML. <input> And restore it to the checkbox node and checked state in the model; Command registration module 4 is used to register custom insert commands, which support inserting nodes through model-written transactions and including them in the undo stack.
[0022] It may also include: a state synchronization module 5, which listens for interaction events of checkboxes, updates the checked state through model transactions, and ensures that undo / redo operations synchronously reflect state changes.
[0023] A computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements a method for inserting and displaying inline checkboxes based on CKEditor5.
[0024] Application Example 1: When the doctor clicks the "□" button in the toolbar of the rehabilitation report editing interface, the front end executes editor.execute('insertCheckbox'), and an inline checkbox immediately appears at the current cursor position; after the doctor continues to enter "10 m", the checkbox and the text are on the same line, and no line break is inserted.
[0025] Application Example 2: When the doctor checks a checkbox, the browser triggers a change event. The event handler calls editor.model.change(writer =>writer.setAttribute('checked', true, node)), and the Writer writes the transaction to write the new state to the Model, automatically generating an undo command. Subsequently, the doctor continuously undoes / redos, and the checkbox status advances / retraces synchronously with the command stack without flickering or displacement.
[0026] Application Example 3: When the doctor clicks "Save", the system calls editor.getData() and retrieves the string: "The patient can walk independently" <input type="checkbox" class="ck-checkbox" data-checkbox-id="c1" data-checked="true" checked> 10 m” The string was completely stored in the report_html field of the database.
[0027] Application Example 4: The next time the report is opened, the system writes the above string through editor.setData(html); when CKEditor 5 parses it, it triggers the Upcast converter, converts the input element back to checkbox InlineElement, and reads data-checked and assigns it to checked; after the page is rendered, the checkbox is checked, exactly the same as the last save.
[0028] Application Example 5: When a doctor copies text containing checkboxes from another report into the current document, CKEditor 5 automatically executes the Upcast converter at the moment of pasting, converting the external input into the checkbox InlineElement of this invention, and the original data-checked state is synchronously imported, eliminating the need for manual re-checking.
[0029] Beneficial effects: 1. Register a custom InlineElement prototype in the CKEditor 5 Schema context to ensure the legal existence of "inline clickable checkboxes" in the Model layer.
[0030] 2. Write the checked state through Writer transactions and incorporate it into the official undo command stack to solve the persistent problem of "loss of state upon undo".
[0031] 3. Utilize the Downcast / Upcast bidirectional converter to complete the "Model → DOM → Model" closed loop, achieving zero-plugin compatibility for HTML export / echo.
[0032] 4. The exported HTML has a built-in data-checked attribute, which is automatically recognized when the output is displayed, forming a closed loop of "storing HTML - reading HTML", with zero coupling with external systems.
[0033] 5. The entire solution is packaged as a CKEditor 5 plugin. Business applications only need to run `npm install` to use it, and upgrades are non-intrusive.
[0034] The above description only discloses some embodiments of the present invention. For those skilled in the art, various modifications and improvements can be made without departing from the inventive concept of the present invention, and these all fall within the scope of protection of the invention.
Claims
1. A method for inserting and displaying inline checkboxes based on CKEditor5, comprising: S1: Register a custom inline element type in the Schema context of CKEditor5, define it as a checkbox element, and set its attributes, which include at least a checkbox identifier and a check status indicator; S2: Define a downconverter to render checkbox nodes in the model as checkbox control elements in HTML, and embed checkbox uniqueness attributes and custom data attributes in the element. S3: Define an up converter, set the up converter as a priority, when parsing external HTML, identify input elements containing the custom data attributes, convert them back to checkbox nodes in the model, and restore them to the checked state; S4: Register a custom insert command. When the command is executed, it inserts a checkbox node at the cursor position through the model write transaction and is included in the CKEditor5 undo command stack. S5: When exporting HTML, generate input elements containing custom data attributes through a down-converter; When displaying HTML, the checked state is automatically restored via the up converter.
2. The method for inserting and displaying inline checkboxes based on CKEditor5 according to claim 1, characterized in that, In step S2, the checkbox node is rendered as <input type="checkbox" data-checkbox-id="id" data-checked="false" class="ck-checkbox"> .
3. The method for inserting and displaying inline checkboxes based on CKEditor5 according to claim 1, characterized in that, In step S3, the priority of the up converter is set to 10.
4. The method for inserting and displaying inline checkboxes based on CKEditor5 according to claim 1, characterized in that, In step S3, when parsing the external HTML, the external HTML's... <input class="ck-checkbox"> Convert back to a model node and read data-checked and assign it to checked.
5. The method for inserting and displaying inline checkboxes based on CKEditor5 according to claim 1, characterized in that, In step S4, the InsertCheckboxCommand executes the editor.execute('insertCheckbox', {checkboxId, checked}) command.
6. The method for inserting and displaying inline checkboxes based on CKEditor5 according to claim 1, characterized in that, In step S5, when exporting HTML, the down-converter is called via dataController.stringify() to generate an input element with the data-checked attribute.
7. A system for inserting and displaying inline checkboxes based on CKEditor5, characterized in that, include: The model registration module is used to register custom inline checkbox elements and their attributes in the Schema context of CKEditor 5; The down-conversion module is used to convert checkbox nodes in the model into checkbox control elements in HTML and embed custom data attributes; The upconversion module is used to parse custom input elements in external HTML and restore them to checkbox nodes and checked states in the model; The command registration module is used to register custom insert commands, which support inserting nodes into the model's transaction and adding them to the undo stack.
8. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the method as described in any one of claims 1 to 6.