A method and device for inserting and verifying an electronic signature in-line based on wangEditor-next, an electronic device, and a storage medium

Abstract

The application discloses a kind of based on wangEditor-next's line electronic signature insertion and tamper-proof verification method, device, electronic equipment and storage medium, the method includes: in Slate data model, signature is defined in line void node type signature and is extended;In response to signature insertion instruction, signature node is inserted and rendered into interactive canvas;In response to signature completion operation, at least part of signature data and tamper-proof verification data is obtained and written into node attribute;In response to document export instruction, signature node is serialized into HTML tag with attribute output;In response to document echo instruction, HTML tag is deserialized into signature node, and based on the comparison of stored verification data and real-time calculation current document verification data, update verification state attribute;Canvas display style is controlled according to verification state attribute.The application realizes that signature and main text are mixed in line, tamper-proof binding, export echo automatic verification, meet electronic signature law requirements, and be applicable to medical documents and other legal scenarios.

Description

Technical Field

[0001] This invention relates to the field of Web rich text editing and electronic signature technology, and particularly to a method, apparatus, electronic device, and storage medium for inline electronic signature insertion and tamper-proof verification based on wangEditor-next. Background Technology With the deepening development of medical informatization, the legal validity of electronic documents (such as informed consent forms and electronic medical records) is receiving increasing attention. The Electronic Signature Law of the People's Republic of China stipulates that a reliable electronic signature must meet the requirements of being exclusive to the signatory, under the signatory's control, and that any alteration after signing can be detected.

[0002] Currently, wangEditor-next, as a rich text editor based on the Slate data model, only natively supports common elements such as paragraphs, headings, images, and links, and does not provide direct support for "inline interactive signature nodes".

[0003] Most existing medical document systems adopt a separate model of "rich text body + independent signature area at the bottom". That is, after the body text is edited, a separate signature area is set at the end or bottom of the document. This model has the following drawbacks: First, the signature and the body text lack logical connection. The signature can be replaced by a screenshot or moved, which makes its legal validity questionable. Second, some systems use image insertion to paste the signature as a static image into the body text. However, the image has no signing time and no digital certificate binding, so it is impossible to verify the identity of the signer and the signing time, making it easy to forge.

[0004] While the void node in the Slate framework can embed non-text content (such as images), the official implementation scheme of "interactive void node + state persistence + anti-tampering verification" has not been disclosed, making it difficult for developers to build a signature function that complies with legal requirements.

[0005] Therefore, how to implement electronic signatures that are integrated with the main text and have anti-tampering capabilities in rich text editors without changing users' editing habits has become an urgent technical problem to be solved. Summary of the Invention

[0006] The purpose of this invention is to provide a method, apparatus, electronic device, and storage medium for inline electronic signature insertion and anti-tampering verification based on wangEditor-next, which can at least solve one of the following technical problems: 1. How to define an inline void signature node in the Slate data model of wangEditor-next so that the signature can be on the same line as the body text like ordinary text, with natural layout and position that cannot be moved by the user at will; 2. How to generate a trusted timestamp and signer identity digest immediately upon signing, in addition to Slate's normalizeNode mechanism, and cryptographically bind this information to the document content and write it into the node attribute to prevent tampering? 3. How to ensure that the HTML string exported by wangEditor-next contains complete information such as signature image, timestamp, and digital digest, and that the HTML can be parsed and displayed by the editor as is, so as to ensure the lossless transmission of signature information; 4. How to automatically verify signature integrity using Slate's normalizeNode mechanism during the echo phase, and how to highlight the corresponding signature node to alert the user if the document content has been tampered with. 5. How to enable double-clicking the signature node to bring up the signature verification overlay, intuitively displaying the signer, signing time, and certificate chain information, thereby improving user experience and legal credibility.

[0007] To achieve the above objectives, the present invention provides a method, apparatus, electronic device, and storage medium for inline electronic signature insertion and anti-tampering verification based on wangEditor-next.

[0008] According to a first aspect of the present invention, a method for inserting and tamper-proofing inline electronic signatures based on wangEditor-next is provided, comprising the following steps: S1. In the Slate data model of wangEditor-next, extend the definition of the inline void node type signature. The signature node contains attributes used to store signature-related information. S2. In response to the signature insertion command, insert a signature node at the current cursor position and render it as an interactive canvas element using a custom rendering function. S3. In response to the signature completion operation, obtain at least a portion of the signature data and the anti-tampering verification data, and write the obtained data as an attribute into the signature node; S4. In response to the document export command, serialize the signature node into HTML tags with attributes and output them; S5. In response to the document echo command, deserialize the HTML tags into signature nodes, compare the verification data stored in the signature nodes with the current document verification data calculated in real time, and update the verification status attribute of the signature nodes according to the comparison result. S6. Control the display style of canvas elements based on the verification status attribute.

[0009] In some implementations, the signature node includes one or more of the following attributes: The signImage field is used to store the encoded string of the signature image; The timestamp field is used to store the signing timestamp; The signerId field is used to store the signer's identifier; The certThumbprint field is used to store the digital certificate fingerprint of the signer; The `contentHash` field is used to store a summary of the document's content. The warning field is used to store the verification status indicator.

[0010] In some implementations, the tamper-proof verification data includes at least a document content digest, and obtaining the document content digest includes the following steps: Traverse the current Slate document tree and generate normalized data objects; The normalized data object is serialized into a string, and a hash algorithm is used to calculate a digest, which serves as the document content digest.

[0011] In some implementations, the signature data includes at least a signature image, and obtaining the signature image includes the following steps: In response to interactive operations on canvas elements, the signature collection interface is invoked; The signature capture interface captures the user's input trajectory and generates signature image data.

[0012] In some implementations, serializing the signature node into an HTML tag carrying attributes specifically includes: mapping the attributes of the signature node to custom data attributes of the HTML tag; and deserializing the HTML tag into a signature node specifically includes: reading the custom data attributes of the HTML tag and reconstructing them into the corresponding attributes of the signature node.

[0013] In some implementations, the verification status attribute of the signature node is updated based on a comparison between the verification data stored in the signature node and the current document verification data calculated in real time. This includes the following steps: By overriding the editor's normalizeNode method, the signature node is scanned every time the editor state changes; For each signature node, extract its stored verification data and compare it with the current document verification data calculated in real time; If they are inconsistent, set a status attribute for the signature node to indicate that the verification failed. If they match, then set a status attribute for the signature node to indicate successful verification.

[0014] In some implementations, the display style of canvas elements is controlled based on the verification status attribute, specifically including: If the verification status attribute indicates that verification failed, then add an alert style to the canvas element; If the verification status attribute indicates successful verification, then add a confirmation style to the canvas element.

[0015] In some implementations, the inline electronic signature insertion and anti-tampering verification method based on wangEditor-next also includes: In response to a double-click operation on a canvas element, the attribute information of the corresponding signature node is read and a signature verification information overlay is displayed.

[0016] In some implementations, the inline electronic signature insertion and anti-tampering verification method based on wangEditor-next also includes: In response to cross-document paste operations, deserialize the HTML tags in the pasted content into signature nodes; The verification status of the signature node is determined by verification comparison. If the verification fails, it is displayed in a warning style.

[0017] According to a second aspect of the present invention, an inline electronic signature insertion and anti-tampering verification device based on wangEditor-next is also provided, capable of running the inline electronic signature insertion and anti-tampering verification method based on wangEditor-next as described above, the device comprising at least: The model extension module is used to extend the definition of the inline void node type signature in the Slate data model of wangEditor-next. The signature node contains attributes for storing signature-related information. The insertion rendering module is used to respond to the signature insertion command, insert a signature node at the current cursor position, and render it as an interactive canvas element through a custom rendering function; The signature processing module is used to respond to the signature completion operation, obtain at least a portion of the signature data and the anti-tampering verification data, and write the obtained data as an attribute into the signature node; The export module is used to respond to document export commands by serializing the signature node into HTML tags with attributes and outputting them. The echo verification module is used to respond to the document echo command, deserialize HTML tags into signature nodes, compare the verification data stored in the signature nodes with the current document verification data calculated in real time, and update the verification status attribute of the signature nodes according to the comparison result. The display control module is used to control the display style of canvas elements based on the verification status attributes.

[0018] According to a third aspect of the present invention, an electronic device is also provided, including one or more processors and a memory, the memory storing one or more programs that, when executed by the processor, implement the above-described inline electronic signature insertion and anti-tampering verification method based on wangEditor-next.

[0019] 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 above-described inline electronic signature insertion and anti-tampering verification method based on wangEditor-next.

[0020] The beneficial effects of this invention are: 1. The signature is truly embedded in the text, on the same line as the text, with a natural layout and cannot be moved by the user at will, meeting the "signer control" requirement of the Electronic Signature Law; 2. A timestamp and a digital digest based on the entire document content are generated immediately upon completion of the signature. The signature is bound to the document content through cryptographic means to achieve the "tamper-proof" requirement. 3. Exporting HTML includes complete signature information (image, timestamp, certificate fingerprint, content digest), enabling closed-loop evidence storage without relying on backend interfaces, facilitating independent storage and transmission of documents; 4. When displaying the output, the integrity is automatically verified using Slate's native normalizeNode mechanism. Once the document is modified, the signature is immediately highlighted in red, which meets the requirement of the electronic signature law that "any change can be detected". 5. The double-click verification method is intuitive and easy to use, which increases the trust of doctors and patients in electronic documents; 6. The entire solution is implemented as a wangEditor-next plugin (with Signature), which does not intrude on the editor's core and is easy to upgrade and maintain; 7. When copying signatures across documents, the normalizeNode automatically detects hash mismatches and issues warnings, effectively preventing signatures from being maliciously reused.

[0021] In summary, this invention discloses a method, apparatus, device, and storage medium for inline electronic signature insertion and anti-tampering verification based on wangEditor-next. The method includes: extending the definition of an inline void node type `signature` in the Slate data model; inserting a `signature` node and rendering it as an interactive canvas in response to a signature insertion command; acquiring at least a portion of the signature data and anti-tampering verification data and writing it into node attributes in response to a signature completion operation; serializing the `signature` node into HTML tags carrying attributes in response to a document export command; deserializing the HTML tags into `signature` nodes in response to a document echo command, and updating the verification status attributes based on a comparison between the stored verification data and the real-time calculated current document verification data; and controlling the canvas display style according to the verification status attributes. This invention achieves inline mixed-line signature and text display, anti-tampering binding, and automatic verification during export echo, meeting the requirements of the Electronic Signature Law and is applicable to legal scenarios such as medical documents. Attached Figure Description

[0022] Figure 1 This is a schematic diagram of the overall process of the method of the present invention.

[0023] Figure 2 This is a detailed flowchart of the signature node insertion and signature completion process in this invention.

[0024] Figure 3 This is a flowchart of the integrity verification process during the echo phase in this invention.

[0025] Figure 4 This is a system framework diagram of an inline electronic signature insertion and anti-tampering verification device based on wangEditor-next, according to one embodiment of the present invention.

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

[0027] 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.

[0028] This invention belongs to the field of Web rich text editing and electronic signature technology, specifically relating to a method, apparatus, device, and storage medium for inserting interactive handwritten signature nodes into the wangEditor-next editor, and for maintaining tamper-proof information such as signature images and timestamps during document export and playback. This invention is particularly applicable to legal document scenarios requiring mixed text and signature layouts, such as medical informed consent forms, electronic medical records, and rehabilitation assessment reports.

[0029] This invention provides a method for inserting and tamper-proofing inline electronic signatures based on wangEditor-next. (See reference...) Figure 1-3 The diagram shown is a flowchart illustrating an embodiment of the inline electronic signature insertion and anti-tampering verification method based on wangEditor-next of the present invention.

[0030] This method can be executed by an electronic device, which can be implemented by software and / or hardware. The method is applied to a browser and includes the following steps: S1. In the Slate data model of wangEditor-next, extend the definition of the inline void node type signature. The signature node contains attributes used to store signature-related information. Preferably, the signature-related information may include, but is not limited to, signature image, signing timestamp, signer identifier, digital certificate fingerprint, document content digest, verification status identifier, etc. In specific implementation, one or more of these can be selected to be stored according to actual needs.

[0031] S2. In response to the signature insertion command, insert a signature node at the current cursor position and render it as an interactive canvas element using a custom rendering function. For example, when the user clicks the "Sign" button on the toolbar, the editor calls the insertSignature method to insert an initial signature node at the cursor position. At this time, the node may only contain placeholder information. The rendering function draws the node as a canvas placeholder that displays the "Click to Sign" prompt.

[0032] S3. In response to the signature completion operation, obtain at least a portion of the signature data and anti-tampering verification data, and write the obtained data as attributes to the signature node. Specifically, the signature data includes at least a signature image, which can be generated by capturing the user's handwriting using the handwriting tablet component. The anti-tampering verification data may include a timestamp, signer identifier, digital certificate fingerprint, document content digest, etc. In this step, you can choose to write all or part of the data according to business needs, such as writing only the signature image and timestamp, or writing both the certificate fingerprint and content digest. The write operation is implemented through the Slate's Transforms.setNodes method, triggering an editor state update.

[0033] S4. In response to the document export command, serialize the signature node into HTML tags carrying attributes and output them; specifically, through a custom HTML serialization function, map each attribute of the signature node to a custom data attribute of the HTML tag (such as data-sign-image, data-timestamp, etc.), generating a format like... <canvas class=""slate-signature”" data-xxx=""…”">The `<html>` tag. This HTML string can be stored in a database or transferred to other systems.

[0034] S5. In response to the document echo command, deserialize HTML tags into signature nodes, and compare the verification data stored in the signature nodes with the real-time calculated current document verification data. Update the verification status attribute of the signature nodes according to the comparison result. During deserialization, read the custom data attributes of the tags through a custom HTML parsing function and reconstruct them into the corresponding attributes of the signature nodes. The verification comparison step is usually triggered when the editor is initialized or the document content changes. It is implemented by overriding the normalizeNode method: traverse all signature nodes, extract their stored verification data (such as the document content summary contentHash), compare it with the real-time calculated current document verification data. If they are inconsistent, set the verification failure status attribute (such as warning: true); otherwise, set the verification success status attribute (such as warning: false).

[0035] S6. Control the display style of the canvas element based on the verification status attribute. For example, if verification fails, add a red dashed border to the canvas and a "Document has been modified" message; if verification succeeds, add a green solid border and a "Signature valid" message.

[0036] Preferably, the signature node includes one or more of the following attributes: The signImage field is used to store the encoded string of the signature image (such as a Base64 formatted PNG image). The timestamp field is used to store the signing timestamp (such as an ISO 8601 format string). The signerId field is used to store the signer's identifier (such as a doctor's employee number or a patient's ID number). The certThumbprint field is used to store the digital certificate fingerprint of the signer (such as a SHA-1 or SHA-256 hash value). The contentHash field is used to store a digest of the document content (such as a SHA-256 hash value). The warning field is used to store the verification status identifier (Boolean value).

[0037] The above attributes can be flexibly combined according to specific application scenarios. For example, in scenarios requiring only basic tamper protection, only contentHash and timestamp can be stored; in scenarios requiring strong authentication, certThumbprint can be added.

[0038] Preferably, the tamper-proof verification data includes at least a document content summary, and obtaining the document content summary includes the following steps: Traverse the current Slate document tree and generate normalized data objects; The normalized data object is serialized into a string, and a hash algorithm is used to calculate a digest, which serves as the document content digest. The generation of the normalized data object must exclude fields that might cause unstable hash values ​​(such as the contentHash itself, signId, warnings, etc. in the signature node) to ensure that the same document content yields the same digest each time.

[0039] Preferably, the signature data includes at least a signature image, and obtaining the signature image includes the following steps: In response to interactive operations on canvas elements (such as clicking), invoke the signature collection interface (such as a pop-up handwriting pad); The signature capture interface captures the user's input trajectory (mouse or touch events) and generates signature image data (such as converting it to Base64 PNG).

[0040] Preferably, the signature node is serialized into HTML tags carrying attributes. This includes mapping the attributes of the signature node to custom data attributes of the HTML tags, and deserializing the HTML tags into signature nodes. This includes reading the custom data attributes of the HTML tags and reconstructing them into corresponding attributes for the signature nodes. Custom data attributes can be named using the prefix "data-" followed by the field name, such as "data-sign-image" or "data-timestamp," ensuring a clear mapping between attribute names and node fields.

[0041] Preferably, the verification status attribute of the signature node is updated based on the comparison between the verification data stored in the signature node and the current document verification data calculated in real time, and the comparison result is used to update the verification status attribute of the signature node. This includes the following steps: By overriding the editor's normalizeNode method, the signature node is scanned every time the editor state changes (such as initialization, user input, pasting, etc.). For each signature node, extract its stored verification data (e.g., contentHash) and compare it with the current document verification data calculated in real time; If they are inconsistent, set a status attribute (such as warning:true) to the signature node to indicate that the verification failed. If they match, a status attribute indicating successful verification (such as warning: false) is set for the signature node. This mechanism ensures that any document modifications are detected immediately and reflected in the signature status.

[0042] Preferably, the display style of the canvas elements is controlled based on the verification status attribute, specifically including: If the validation status attribute indicates that validation has failed, add a warning style to the canvas element (such as a red dashed border and a tooltip "Document has been modified"). If the verification status attribute indicates successful verification, a confirmation style (such as a solid green border and a tooltip "Signature Valid") is added to the canvas element. The specific implementation of the style can be dynamically switched using CSS class names.

[0043] As a preferred method, the inline electronic signature insertion and anti-tampering verification method based on wangEditor-next also includes: In response to a double-click on a canvas element, the system reads the attribute information of the corresponding signature node and displays a signature verification information overlay. The overlay can display information such as the signer, signing time, and certificate fingerprint, and provides interactive buttons such as "View Certificate Chain" and "Download Original Signature Image" to enhance user experience and legal credibility.

[0044] As a preferred embodiment, the inline electronic signature insertion and anti-tampering verification method based on wangEditor-next further includes: in response to cross-document paste operations, deserializing the HTML tags in the pasted content into signature nodes; determining the verification status of the signature node through verification comparison, and displaying a warning style if verification fails. This mechanism can effectively prevent the signature image from being maliciously copied and reused in other documents.

[0045] Reference Figure 4 The diagram shown is a functional module schematic of the inline electronic signature insertion and anti-tampering verification device based on wangEditor-next of the present invention.

[0046] The inline electronic signature insertion and anti-tampering verification device based on wangEditor-next of this invention can be installed in electronic devices. Depending on the functions implemented, the inline electronic signature insertion and anti-tampering verification device based on wangEditor-next may include a model extension module, an insertion rendering module, a signature processing module, an export module, an echo verification module, and a display control module. 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 perform a fixed function, stored in the memory of the electronic device.

[0047] In this embodiment, the functions of each module / unit are as follows: The model extension module is used to extend the definition of the inline void node type signature in the Slate data model of wangEditor-next. The signature node contains attributes for storing signature-related information. The insertion rendering module is used to respond to the signature insertion command, insert a signature node at the current cursor position, and render it as an interactive canvas element through a custom rendering function; The signature processing module is used to respond to the signature completion operation, obtain at least a part of the signature data and the anti-tampering verification data, and write the obtained data as an attribute into the signature node; The export module is used to respond to document export commands by serializing the signature node into HTML tags with attributes and then outputting them. The echo verification module is used to respond to the document echo command, deserialize HTML tags into signature nodes, compare the verification data stored in the signature node with the current document verification data calculated in real time, and update the verification status attribute of the signature node according to the comparison result. The display control module is used to control the display style of canvas elements based on the verification status attributes.

[0048] Each module of the device corresponds one-to-one with the steps of the above method. For specific implementation details, please refer to the description in the method section.

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

[0050] 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, a Global System for Mobile Communications (GSM), Wideband Code Division Multiple Access (WCDMA), a 4G network, a 5G network, Bluetooth, Wi-Fi, a voice communication network, or other wireless or wired networks.

[0051] 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.

[0052] 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.

[0053] 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 of the inline electronic signature insertion and anti-tampering verification program 10 based on wangEditor-next. In addition, the memory 11 can also be used to temporarily store various types of data that have been output or will be output.

[0054] The processor 12 can preferably be 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, for example, running the program code of the inline electronic signature insertion and anti-tampering verification program 10 based on wangEditor-next.

[0055] 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.

[0056] The network interface 14 may optionally include a standard wired interface or a wireless interface (such as a Wi-Fi interface), which is typically used to establish a communication connection between electronic device 1 and other electronic devices.

[0057] Figure 5 Only an electronic device 1 with components 11-14 and an inline electronic signature insertion and tamper-proof verification procedure 10 based on wangEditor-next is shown. However, it should be understood that it is not required to implement all of the components shown, and more or fewer components may be implemented instead.

[0058] 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-sensitive liquid crystal display, or an organic light-emitting diode (OLED) touchscreen. The display may also be appropriately referred to as a screen or display unit, used to display information processed in the electronic device 1 and to display a visual user interface.

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

[0060] In the above embodiments, when the processor 12 executes the inline electronic signature insertion and anti-tampering verification program 10 based on wangEditor-next stored in the memory 11, it can perform the following steps: S1. In the Slate data model of wangEditor-next, extend the definition of the inline void node type signature. The signature node contains attributes used to store signature-related information. S2. In response to the signature insertion command, insert a signature node at the current cursor position and render it as an interactive canvas element using a custom rendering function. S3. In response to the signature completion operation, obtain at least a portion of the signature data and the anti-tampering verification data, and write the obtained data as an attribute into the signature node; S4. In response to the document export command, serialize the signature node into HTML tags with attributes and output them; S5. In response to the document echo command, deserialize the HTML tags into signature nodes, compare the verification data stored in the signature nodes with the current document verification data calculated in real time, and update the verification status attribute of the signature nodes according to the comparison result. S6. Control the display style of canvas elements based on the verification status attribute.

[0061] 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.

[0062] For a detailed explanation of the above steps, please refer to the above. Figure 2 Functional block diagram of the embodiment of the inline electronic signature insertion and anti-tampering verification device based on wangEditor-next and Figure 1 A flowchart illustrating an embodiment of the inline electronic signature insertion and anti-tampering verification method based on wangEditor-next.

[0063] Furthermore, this invention also proposes a computer-readable storage medium, which can be non-volatile or volatile. This computer-readable storage medium can be any one or any combination of several of the following: hard disk, multimedia card, SD card, flash memory card, SMC, read-only memory (ROM), erasable programmable read-only memory (EPROM), portable compact disk read-only memory (CD-ROM), USB memory, etc. The computer-readable storage medium includes a data storage area and a program storage area. The data storage area stores data created based on the use of blockchain nodes, and the program storage area stores an inline electronic signature insertion and anti-tampering verification program 10 based on wangEditor-next. When the wangEditor-next inline electronic signature insertion and anti-tampering verification program 10 is executed by the processor, it performs the following operations: In the Slate data model of wangEditor-next, the inline void node type signature is extended and defined. The signature node contains attributes used to store signature-related information. In response to the signature insertion command, insert a signature node at the current cursor position and render it as an interactive canvas element using a custom rendering function; In response to the signature completion operation, at least a portion of the signature data and the anti-tampering verification data is obtained, and the obtained data is written as an attribute to the signature node; In response to the document export command, serialize the signature node into HTML tags with attributes and output them; In response to the document echo command, the HTML tags are deserialized into signature nodes, and the verification data stored in the signature nodes is compared with the current document verification data calculated in real time. The verification status attribute of the signature nodes is updated according to the comparison result. Control the display style of canvas elements based on the validation status attribute.

[0064] The specific implementation of the computer-readable storage medium of the present invention is largely the same as the specific implementation of the inline electronic signature insertion and anti-tampering verification method based on wangEditor-next described above, and will not be repeated here.

[0065] To better explain the technical solution of the present invention, the present invention also provides the following specific embodiments: Example 1: Definition and Insertion of Signature Nodes In this embodiment, the developers first created the withSignature plugin, which extends the editor core through higher-order functions. The plugin's core code is as follows (using JavaScript as an example): import { Transforms} from 'slate'; import { ReactEditor} from 'slate-react'; export const withSignature = (editor) =>{ const { isVoid, normalizeNode} = editor; / / Mark the signature node as void editor.isVoid = (element) =>{ return element.type === 'signature' ? true : isVoid(element); }; / / Extend normalizeNode for real-time verification (detailed in subsequent examples). editor.normalizeNode = (entry) =>{ / / See Example 5 for verification logic return normalizeNode(entry); }; return editor; }; Register a custom rendering function, SignatureElement, which receives node properties and returns a canvas element: import React, { useState, useRef, useEffect} from 'react'; const SignatureElement = ({ attributes, element, children}) =>{ const [imageData, setImageData] = useState(element.signImage ||null); const canvasRef = useRef(null); / / Synchronize changes to element.signImage useEffect(() =>{ setImageData(element.signImage || null); }, [element.signImage]); useEffect(() =>{ const canvas = canvasRef.current; if (canvas&&imageData) { const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = () =>ctx.drawImage(img, 0, 0, 120, 40); img.src = imageData; } }, [imageData]); const handleClick = () =>{ / / Implement click logic }; const handleDoubleClick = () =>{ / / Implement double-click logic }; return ( <div {...attributes} contenteditable="{false}"> <canvas ref={canvasRef} width="120" height="40" data-sign-id={element.signId} data-timestamp={element.timestamp} data-content-hash={element.contentHash} data-signer-id={element.signerId} data-cert-thumbprint={element.certThumbprint} data-sign-image={element.signImage} className={'slate-signature' + (element.warning ? ' warning' : '')} onClick={handleClick} onDoubleClick={handleDoubleClick} / > {children} ); }; When a doctor clicks the "Insert Signature" button in the toolbar of the informed consent form editing interface, editor.insertSignature() is called. This method inserts an initial signature node at the cursor position, with all its properties being empty or default values, and renders it as a placeholder canvas to display "Click to Signature".

[0066] Example 2: Signature Process and Attribute Writing The doctor clicks on the placeholder canvas, triggering the `handleClick` function, which pops up the handwriting pad component. The handwriting pad is implemented using Canvas and listens for mouse / touch events to draw the trajectory. After the doctor completes their signature and clicks "Confirm," the component generates a Base64 signature image using `toDataURL('image / png')`.

[0067] At the same time, the system obtains different anti-tampering verification data according to the configuration: - If the configuration requires a timestamp, then generate a new Date().toISOString() as the timestamp; - If the configuration requires a signer identifier, obtain the signerId from the current login session; - If the configuration requires a certificate fingerprint, call the backend interface / api / user / cert to obtain the certThumbprint; - If the configuration requires a document content summary, then call computeDocumentHash(editor) to calculate the contentHash.

[0068] The detailed process of calculating contentHash is as follows: (1) Iterate through editor.children, recursively construct objects for hashing, exclude contentHash, signId, and warning fields in all signature nodes (to avoid circular dependencies), but retain other fields (such as timestamp, signerId, etc., because these fields are also part of the document content and should be detectable if they are tampered with).

[0069] (2) Use JSON.stringify for normalized serialization.

[0070] (3) Calculate the hash using SubtleCrypto.digest('SHA-256', encoder.encode(jsonString)) to obtain a hexadecimal string.

[0071] Finally, all the collected data is written to the signature node at once using Transforms.setNodes. For example: Transforms.setNodes(editor, { signImage: base64Image, timestamp: isoString, signerId: currentUser.id, certThumbprint: thumbprint, contentHash: docHash }, { at: path}); If certain data is not configured (e.g., certificate fingerprints are not stored), the corresponding field remains undefined, and the node does not contain that attribute. This flexibility allows the invention to adapt to the needs of different security levels.

[0072] Example 3: Document Saving and HTML Export The doctor clicks "Save," and the system calls `editor.getHtml()`. Because a custom `htmlRenderers` is registered in the plugin, the serialization logic is as follows: editor.htmlRenderers.push({ type: 'signature', render: (elem) =>{ const { signImage, timestamp, contentHash, signerId, certThumbprint,signId} = elem; return ` <canvas class="slate-signature" data-sign-id="${signId || ''}" data-timestamp="${timestamp || ''}" data-content-hash="${contentHash || ''}" data-signer-id="${signerId || ''}" data-cert-thumbprint="${certThumbprint || ''}" data-sign-image="${signImage || ''}">< / canvas> `; } }); In the generated HTML string, each signature corresponds to a canvas tag with complete data-* attributes, and all anti-tampering information is embedded in it, without relying on external storage.

[0073] Example 4: Document Echo and Deserialization When the document is reopened, `editor.setHtml(htmlString)` is called. The canvas tag is then re-parsed into a signature node using custom `htmlParsers`. editor.htmlParsers.push({ selector: 'canvas.slate-signature', parse: (el) =>({ type: 'signature', signId: el.dataset.signId, timestamp: el.dataset.timestamp, contentHash: el.dataset.contentHash, signerId: el.dataset.signerId, certThumbprint: el.dataset.certThumbprint, signImage: el.dataset.signImage, children: [{ text: ''}] }) }); After deserialization, the signature node restores all attributes, and the rendering function draws the canvas based on these attributes.

[0074] Example 5: Real-time Validation and Style Update Override the `normalizeNode` method in the `withSignature` plugin and add validation logic: editor.normalizeNode = (entry) =>{ const [node, path] = entry; if (node.type === 'signature'&&node.contentHash) { / / Calculate the document summary, excluding the influence of the current node itself. const currentHash = computeDocumentHash(editor, { excludePath: path}); if (currentHash !== node.contentHash) { / / Hash mismatch, set warning to true if (!node.warning) { Transforms.setNodes(editor, { warning: true}, { at: path}); } } else { / / If the hash matches, remove the warning (set to false) if (node.warning) { Transforms.setNodes(editor, { warning: false}, { at: path}); } } } return normalizeNode(entry); }; When the node's warning property changes, the rendering function recalculates the className, adding or removing the "warning" class. The CSS definition is as follows: .slate-signature.warning { border: 2px dashed red; } .slate-signature:not(.warning) { border: 2px solid green; } Additionally, a title attribute can be added to the canvas to display a tooltip, or a floating layer can be used to show detailed comparison results.

[0075] Example 6: Double-click verification overlay Bind the onDoubleClick event to the canvas in the SignatureElement component: const handleDoubleClick = (e) =>{ / / Ensure the element exists if (!element) return; const { signerId, timestamp, certThumbprint, signImage} = element; / / Validate the timestamp and format it to local time const date = new Date(timestamp); const timeStr = isNaN(date.getTime()) ? 'Invalid Date' :date.toLocaleString(); / / Call the global pop-up component to display information showSignatureModal({ signer: signerId, time: timeStr, thumbprint: certThumbprint, image: signImage }); }; The pop-up window can further provide a "View Certificate Chain" button to call the CA interface to obtain certificate details; the "Download Original Signature Image" button will trigger the download of the Base64 image.

[0076] Example 7: Cross-document copying scenario When a user copies content containing a signature from another document and pastes it into the current document, wangEditor-next's paste processing automatically calls a custom parser to convert the canvas into a signature node. Then, the normalizeNode checks if the node's contentHash matches the hash of the current document. Since the document content differs, the detection results will inevitably be inconsistent, and the warning is set to true. The canvas immediately displays a red warning border and prompts "Cross-document signature reference, please re-sign." This mechanism effectively prevents the signature image from being illegally reused.

[0077] The advantages of this invention over the prior art are: 1. The signature is truly embedded in the text, on the same line as the text, with a natural layout and cannot be moved by the user at will, meeting the "signer control" requirement of the Electronic Signature Law; 2. When the signature is completed, various anti-tampering verification data (such as timestamp, certificate fingerprint, content digest) can be written as needed. The signature is bound to the document content through cryptographic means to achieve the "anti-tampering" requirement. 3. The exported HTML comes with complete signature information, enabling closed-loop evidence preservation without relying on backend interfaces, facilitating independent storage and transmission of documents; 4. When displaying the output, the integrity is automatically verified using Slate's native normalizeNode mechanism. Once the document is modified, the signature is immediately displayed in an alert style, which meets the requirement of the electronic signature law that "any change can be detected". 5. The double-click verification method is intuitive and easy to use, which enhances users' trust in electronic documents; 6. The entire solution is implemented as a wangEditor-next plugin, which does not intrude on the editor's core and is easy to upgrade and maintain; 7. Automatically detects and alerts when copying signatures across documents, effectively preventing signatures from being maliciously reused.

[0078] 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.

[0079] 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.< / canvas>

Claims

1. A method for inserting and tamper-proofing electronic signatures in lines based on wangEditor-next, characterized in that, Includes the following steps: S1. In the Slate data model of wangEditor-next, extend the definition of the inline void node type signature, the signature node contains attributes for storing signature-related information; S2. In response to the signature insertion command, insert the signature node at the current cursor position and render it as an interactive canvas element using a custom rendering function. S3. In response to the signature completion operation, obtain at least a portion of the signature data and the anti-tampering verification data, and write the obtained data as an attribute into the signature node; S4. In response to the document export command, serialize the signature node into an HTML tag carrying the attribute and output it; S5. In response to the document echo command, the HTML tag is deserialized into a signature node, and the verification data stored in the signature node is compared with the current document verification data calculated in real time. The verification status attribute of the signature node is updated according to the comparison result. S6. Control the display style of the canvas element according to the verification status attribute.

2. The inline electronic signature insertion and anti-tampering verification method based on wangEditor-next according to claim 1, characterized in that, The signature node includes one or more of the following attributes: The signImage field is used to store the encoded string of the signature image; The timestamp field is used to store the signing timestamp; The signerId field is used to store the signer's identifier; The certThumbprint field is used to store the digital certificate fingerprint of the signer; The `contentHash` field is used to store a summary of the document's content. The warning field is used to store the verification status indicator.

3. The inline electronic signature insertion and anti-tampering verification method based on wangEditor-next according to claim 1, characterized in that, The anti-tampering verification data includes at least a document content summary, and obtaining the document content summary includes the following steps: Traverse the current Slate document tree and generate normalized data objects; The normalized data object is serialized into a string, and a hash algorithm is used to calculate a digest, which serves as the document content digest.

4. The inline electronic signature insertion and anti-tampering verification method based on wangEditor-next according to claim 1, characterized in that, The signature data includes at least a signature image, and obtaining the signature image includes the following steps: In response to interactive operations on the canvas elements, the signature collection interface is invoked; The signature acquisition interface captures the user's input trajectory and generates signature image data.

5. The inline electronic signature insertion and anti-tampering verification method based on wangEditor-next according to claim 1, characterized in that, Serializing the signature node into an HTML tag carrying the attribute specifically includes: mapping the attribute of the signature node to the custom data attribute of the HTML tag; deserializing the HTML tag into a signature node specifically includes: reading the custom data attribute of the HTML tag and reconstructing it into the corresponding attribute of the signature node.

6. The inline electronic signature insertion and anti-tampering verification method based on wangEditor-next according to any one of claims 1-5, characterized in that, The verification status attribute of the signature node is updated based on the comparison between the verification data stored in the signature node and the current document verification data calculated in real time. This includes the following steps: By overriding the editor's normalizeNode method, the signature node is scanned every time the editor state changes; For each signature node, extract its stored verification data and compare it with the current document verification data calculated in real time; If they are inconsistent, set a status attribute for the signature node to indicate that the verification failed. If they match, then set a status attribute for the signature node to indicate successful verification.

7. The inline electronic signature insertion and anti-tampering verification method based on wangEditor-next according to claim 6, characterized in that, The display style of the canvas element is controlled based on the verification status attribute, specifically including: If the verification status attribute indicates that verification failed, then add an alert style to the canvas element; If the verification status attribute indicates successful verification, then add a confirmation style to the canvas element.

8. The inline electronic signature insertion and anti-tampering verification method based on wangEditor-next according to any one of claims 1-5, characterized in that, Also includes: In response to a double-click operation on the canvas element, the attribute information of the corresponding signature node is read and a signature verification information overlay is displayed.

9. The inline electronic signature insertion and anti-tampering verification method based on wangEditor-next according to any one of claims 1-5, characterized in that, Also includes: In response to cross-document paste operations, deserialize the HTML tags in the pasted content into signature nodes; The verification status of the signature node is determined by verification comparison. If the verification fails, it is displayed in a warning style.

10. A device for inserting and verifying inline electronic signatures based on wangEditor-next, capable of running the method for inserting and verifying inline electronic signatures based on wangEditor-next as described in any one of claims 1-9, characterized in that, The device includes at least: The model extension module is used to extend the definition of the inline void node type signature in the Slate data model of wangEditor-next. The signature node contains attributes for storing signature-related information. An insertion rendering module is used to insert the signature node at the current cursor position in response to the signature insertion command, and render it as an interactive canvas element through a custom rendering function; The signature processing module is used to, in response to the signature completion operation, obtain at least a portion of the signature data and the anti-tampering verification data, and write the obtained data as an attribute into the signature node; The export module is used to serialize the signature node into HTML tags carrying the attribute and output them in response to a document export command; The echo verification module is used to respond to the document echo command, deserialize the HTML tags into signature nodes, compare the verification data stored in the signature nodes with the current document verification data calculated in real time, and update the verification status attribute of the signature nodes according to the comparison result. The display control module is used to control the display style of the canvas elements according to the verification status attributes.

Images