A method, system, device and medium for processing a rich text editor

Abstract

The application relates to the field of rich text editors, and in particular to a rich text editor processing method, system, device and medium, the method specifically comprising: creating a custom Vue component library, registering and managing custom Vue components according to the custom Vue component library; creating a custom node object based on a Prosemirror framework, and binding and associating the custom node object with any custom Vue component of the custom Vue component library; obtaining a corresponding custom Vue component through the custom node object for component rendering, and inserting the custom Vue component into a current cursor position of a rich text editor. The application realizes a more flexible and highly expandable rich text editor experience, thereby allowing a user to create and manage various types of custom interactive elements in a course of an online education platform according to requirements, and making online education content more flexible and diversified.

Description

Technical Field

[0001] This invention relates to the field of rich text editors, and more particularly to a method, system, device, and medium for processing rich text editors. Background Technology

[0002] Rich text editors have become an essential tool in existing web and applications, enabling users to create and edit rich content containing text, images, and other media elements. However, existing rich text editors have some limitations, such as a lack of integration with mainstream front-end frameworks, an inability to support custom Vue / React components, and a loss of flexibility and scalability. For example, in the rich text editors currently supported by online education platforms, teachers cannot adjust interactive elements in real time according to course needs; they can only teach using the fixed functions already provided by the online education platform. Summary of the Invention

[0003] The purpose of this invention is to provide a rich text editor processing method, system, device, and medium, which realizes a more flexible and highly scalable rich text editor experience, thereby allowing users to create and manage various types of custom interactive elements in online education platform courses according to their needs, making online education content more flexible and diversified, and solving at least one of the above-mentioned prior art problems.

[0004] This invention provides a method for processing rich text in an editor, the method specifically including:

[0005] Create a custom Vue component library, and register and manage custom Vue components based on the custom Vue component library;

[0006] Create a custom node object based on the Prosemirror framework, and bind and associate the custom node object with any custom Vue component in the custom Vue component library;

[0007] The corresponding custom Vue component is obtained through the custom node object, rendered, and inserted into the current cursor position in the rich text editor.

[0008] Optionally, registering and managing custom Vue components according to the custom Vue component library specifically includes:

[0009] Set a custom Vue component user management button in the custom Vue component library. The custom Vue component user management button includes a register button, an edit button, a delete button, a permissions button, and a list button.

[0010] Register a new component by entering the Vue component information using an existing Vue component template using the registration button;

[0011] Edit the component properties of each custom Vue component in the custom Vue component library using the edit button;

[0012] Delete the custom Vue component in the custom Vue component library according to the delete button;

[0013] The permissions button is used to set the management permission scope for each user in the custom Vue component library;

[0014] View the list by clicking the button to see basic information about all custom Vue components in the custom Vue component library.

[0015] Optionally, the step of creating a custom node object based on the Prosemirror framework and binding the custom node object to any custom Vue component in the custom Vue component library specifically includes:

[0016] Create custom node objects based on the Node of the Prosemirror framework, and create Prosemirror schema objects based on the schema of the Prosemirror framework.

[0017] Set a node data structure for the custom node object. The node data structure includes node name, node attributes, node style, optionality, rendering function declaration, and association information with the custom Vue component.

[0018] Add the custom node object to the spec.nodes property of the Prosemirror schema object.

[0019] Optionally, the step of obtaining the corresponding custom Vue component through the custom node object, rendering the component, and inserting it at the current cursor position in the rich text editor specifically includes:

[0020] Based on the renderDescs function of the Prosemirror framework, all custom node objects are obtained, and the corresponding custom Vue components are generated into virtual DOM according to the rendering functions declared on the custom node objects.

[0021] The virtual DOM is converted into an HTML element, and the content of the corresponding custom Vue component is inserted into the current cursor position of the rich text editor based on the HTML element.

[0022] Optionally, the step of converting the virtual DOM into HTML elements and inserting the content of the corresponding custom Vue component into the current cursor position of the rich text editor based on the HTML elements specifically includes:

[0023] Create an HTML element and mount the virtual DOM onto the HTML element using the mount method;

[0024] The current state of the rich text editor is obtained from the EditorView of the Prosemirror framework, and the current state includes the current cursor position of the rich text editor.

[0025] The HTML string corresponding to the virtual DOM on the HMTL element is obtained according to the innerHTML property, the HTML string is inserted into the current cursor position of the rich text editor, and the virtual DOM on the HMTL element is unloaded by the unmount method.

[0026] Optionally, the method further includes:

[0027] Import the Vue.js module, and use the $watch method of the Vue.js module to monitor whether the data of the custom Vue component has changed;

[0028] When the data of the custom Vue component changes, a new virtual DOM is generated by calling the rendering function of the custom node object corresponding to the custom Vue component.

[0029] The present invention also provides a rich text editor processing system, the system specifically comprising:

[0030] The component library module is used to create a custom Vue component library, and to register and manage custom Vue components based on the custom Vue component library;

[0031] The first processing module is used to create custom node objects based on the Prosemirror framework and bind and associate the custom node objects with any custom Vue component in the custom Vue component library.

[0032] The second processing module is used to obtain the corresponding custom Vue component through the custom node object, render the component, and insert it into the current cursor position of the rich text editor.

[0033] The present invention also provides a computer device, comprising: a memory and a processor, and a computer program stored in the memory, wherein when the computer program is executed on the processor, it implements the processing method of a rich text editor as described in any of the above methods.

[0034] The present invention also provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the processing method of a rich text editor as described in any of the above methods.

[0035] Compared with the prior art, the present invention has at least one of the following technical effects:

[0036] 1. It has achieved a more flexible and highly scalable rich text editor experience, allowing users to create and manage various types of custom interactive elements in online education platform courses as needed, making online education content more flexible and diversified.

[0037] 2. Integrating custom Vue components with a rich text editor provides a high degree of customizability, enabling teachers to create specific types of content based on educational needs.

[0038] 3. Using Prosemirror's modular development approach facilitates code maintenance and expansion, enabling the platform to easily add new custom components and features.

[0039] 4. By rendering Vue components as a virtual DOM, real-time previews can be achieved, allowing users to see the final result in the editor and improving editing efficiency. Attached Figure Description

[0040] To more clearly illustrate the technical solutions in the embodiments of this application, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0041] Figure 1 This is a flowchart illustrating a rich text editor processing method provided in an embodiment of the present invention;

[0042] Figure 2 This is a schematic diagram of the processing system of a rich text editor provided in an embodiment of the present invention;

[0043] Figure 3 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. Detailed Implementation

[0044] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application may also be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted so as not to obscure the description of this application with unnecessary detail.

[0045] It should be understood that, when used in this application specification and the appended claims, the term "comprising" indicates the presence of the described features, integrals, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components and / or a collection thereof.

[0046] It should also be understood that the term “and / or” as used in this application specification and the appended claims means any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.

[0047] As used in this application specification and the appended claims, the term "if" may be interpreted, depending on the context, as "when," "once," "in response to determination," or "in response to detection." Similarly, the phrase "if determined" or "if detected [the described condition or event]" may be interpreted, depending on the context, as meaning "once determined," "in response to determination," "once detected [the described condition or event]," or "in response to detection [the described condition or event]."

[0048] Furthermore, in the description of this application and the appended claims, the terms "first," "second," "third," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0049] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0050] Rich text editors have become an essential tool in existing web and applications, enabling users to create and edit rich content containing text, images, and other media elements. However, existing rich text editors have some limitations, such as a lack of integration with mainstream front-end frameworks, an inability to support custom Vue / React components, and a loss of flexibility and scalability. For example, in the rich text editors currently supported by online education platforms, teachers cannot adjust interactive elements in real time according to course needs; they can only teach using the fixed functions already provided by the online education platform.

[0051] Reference Figure 1 This invention discloses a rich text editor processing method, the method specifically including:

[0052] S101: Create a custom Vue component library, and register and manage custom Vue components based on the custom Vue component library.

[0053] In some embodiments, registering and managing custom Vue components according to the custom Vue component library specifically includes:

[0054] Set a custom Vue component user management button in the custom Vue component library. The custom Vue component user management button includes a register button, an edit button, a delete button, a permissions button, and a list button.

[0055] Register a new component by entering the Vue component information using an existing Vue component template using the registration button;

[0056] Edit the component properties of each custom Vue component in the custom Vue component library using the edit button;

[0057] Delete the custom Vue component in the custom Vue component library according to the delete button;

[0058] The management permission scope for each user in the custom Vue component library is set according to the permission button;

[0059] View the list by clicking the button to see basic information about all custom Vue components in the custom Vue component library.

[0060] In this embodiment, a dedicated custom Vue component library interface is created in the management interface of the online education platform. This interface may contain the following elements: (1) Registration button: used to register a new custom Vue component. After clicking this button, the user can enter the information of the Vue component, including name, template, style, behavior, etc. When a teacher or content creator wants to register a new custom Vue component, they can click the "Register" button and then enter the component's information, including the component's name, template (an HTML or Vue template created and set up in advance by the developer), style (CSS styles used to customize the component's appearance), and behavior (which may be some configuration options, such as the number of question options for a question component). (2) Edit button: used to edit the properties of an existing custom Vue component. The user can select the component to be edited and then modify its information. (3) Delete button: used to delete a custom Vue component. If a custom Vue component is no longer needed, the user can select it and click the "Delete" button to remove it from the custom Vue component library. (4) Permission button: used to set the management permission scope of each user in the custom Vue component library, including who can register, edit, and delete custom components. (5) List button: Used to view basic information of all custom Vue components in the custom Vue component library. Users can browse registered components.

[0061] In online education platforms, this custom Vue component library allows teachers to create various types of interactive elements, such as 3D model components and interactive question components, thereby providing a more flexible and interactive learning experience. Furthermore, through access control, platform administrators can ensure that only authorized users can manage and edit components, guaranteeing system security and stability.

[0062] S102: Create a custom node object based on the Prosemirror framework, and bind the custom node object to any custom Vue component in the custom Vue component library.

[0063] In some embodiments, the step of creating a custom node object based on the Prosemirror framework and binding the custom node object to any custom Vue component in the custom Vue component library specifically includes:

[0064] Create custom node objects based on the Node of the Prosemirror framework, and create Prosemirror schema objects based on the schema of the Prosemirror framework.

[0065] Set a node data structure for the custom node object. The node data structure includes node name, node attributes, node style, optionality, rendering function declaration, and association information with the custom Vue component.

[0066] Add the custom node object to the spec.nodes property of the Prosemirror schema object.

[0067] In this embodiment, Node is a class in the Prosemirror framework used to represent nodes in a document, while schema is a Prosemirror schema object used to define the document model.

[0068] A Prosemirror schema object is created using the Prosemirror framework's schema module. The schema defines the node types and other rules available in the editor. Based on the Prosemirror framework's Node constructor, a custom node object is created for each custom Vue component. These node objects represent the Vue component's presentation in the editor. The node data structure is set for each custom node object, including its name, attributes, styles, and optional information. Vue functionalities such as `Vue.compile` and `Vue.render` are used in the rendering function of each custom node object to render the custom Vue component as a virtual DOM. By adding the custom node object to the `spec.nodes` property of the Prosemirror schema, it is ensured that the Prosemirror editor can recognize and process this custom node object.

[0069] S103: Obtain the corresponding custom Vue component through the custom node object, render the component, and insert it into the current cursor position of the rich text editor.

[0070] In some embodiments, the step of obtaining the corresponding custom Vue component through the custom node object, rendering the component, and inserting it at the current cursor position in the rich text editor specifically includes:

[0071] Based on the renderDescs function of the Prosemirror framework, all custom node objects are obtained, and the corresponding custom Vue components are generated into virtual DOM according to the rendering functions declared on the custom node objects.

[0072] The virtual DOM is converted into an HTML element, and the content of the corresponding custom Vue component is inserted into the current cursor position of the rich text editor based on the HTML element.

[0073] In some embodiments, converting the virtual DOM into HTML elements and inserting the content of the corresponding custom Vue component into the current cursor position of the rich text editor based on the HTML elements specifically includes:

[0074] Create an HTML element and mount the virtual DOM onto the HTML element using the mount method;

[0075] The current state of the rich text editor is obtained from the EditorView of the Prosemirror framework, and the current state includes the current cursor position of the rich text editor.

[0076] The HTML string corresponding to the virtual DOM on the HMTL element is obtained according to the innerHTML property, the HTML string is inserted into the current cursor position of the rich text editor, and the virtual DOM on the HMTL element is unloaded by the unmount method.

[0077] In this embodiment, within the Prosemirror framework, the `renderDescs` function is used to render document nodes. It typically converts the node descriptions of a document (usually generated by a node view descriptor) into an actual virtual DOM to render the document content in the user interface. The `renderDescs` function is typically used in Prosemirror views; it accepts a list of document node descriptions (usually a list of child node descriptions of the root node) and returns a virtual DOM representation. The virtual DOM is a data structure representing the interface that allows for efficient comparison and updating, ensuring efficient DOM operations.

[0078] The `renderDescs` function can be used to retrieve all custom node objects, traverse the editor's document, and generate description information for each node. For each custom node object, its render function is accessed. This render function is defined in the node object's configuration and is responsible for rendering the custom Vue component into a virtual DOM. Inside the render function, relevant Vue component functionalities (such as `Vue.compile` and `Vue.render`) are called to render the Vue component into the virtual DOM.

[0079] By using Vue's `mount` method, a virtual DOM is mounted onto a temporary HTML element, and the HTML string of that element is retrieved. This string represents the virtual DOM's presentation in the HTML. For example, creating an empty HTML element named `div`... The `div` element is used to contain the virtual DOM generated by the Vue component. The `mount(div)` method renders the virtual DOM onto the created `div` element, and `div.innerHTML` retrieves the HTML string containing the virtual DOM. To prevent memory leaks or other issues, `unmount()` is called to clean up and unmount the virtual DOM previously mounted to the `div` element, returning the generated HTML string.

[0080] EditorView, part of the Prosemirror module, is used to display the editor's state as an editable element in the browser and handle user interactions with the editor. By importing the EditorView module, an instance of an editor view is created. The current editor state and cursor position are obtained from the editor view, and the content of a Vue component is inserted into the editor's current cursor position using an HTML string to render the content of the custom component.

[0081] In some embodiments, the method further includes:

[0082] Import the Vue.js module, and use the $watch method of the Vue.js module to monitor whether the data of the custom Vue component has changed;

[0083] When the data of the custom Vue component changes, a new virtual DOM is generated by calling the rendering function of the custom node object corresponding to the custom Vue component.

[0084] In this embodiment, `$watch` is a core feature of the Vue.js framework. It is used to listen for changes in data within a Vue instance and execute callback functions when these changes occur. Typically, `$watch` is used to monitor data properties in Vue components; when the values ​​of these properties change, the callback functions are triggered.

[0085] You can use Vue's $watch method to listen for changes in the data of custom Vue components. Any interaction or behavior defined in a Vue component, such as user interaction, event listeners, and dynamic content, will be retained in the rendered node. If the data of a Vue component changes, the rendering function of the custom node object corresponding to that custom Vue component is triggered, generating a new virtual DOM and inserting it into the editor to keep the content synchronized.

[0086] In summary, assuming a teacher needs to insert a 3D map model component into an online geography lesson, the developer will pre-create a template for the 3D map model component, including initial attributes such as map coordinates, default viewpoint, and interactive control methods. Then, the platform administrator grants teachers access to the custom component library's management interface via a permissions button. More specifically, different teaching subjects can correspond to different custom component templates, and teachers of different subjects can only select the custom component template relevant to their own teaching content. Teachers can select the 3D map model component as a template for a new component in the custom Vue component library's management interface via the registration button, providing the new component's name, required attributes, etc. After entering the information, it is stored in the database or configuration file. Furthermore, after registering a new component, teachers can edit its information or delete it from the component library. If a 3D map model component has already been registered in a previous geography lesson, teachers can also search for it using the list button to quickly identify the appropriate 3D map model component and edit its information according to the course requirements.

[0087] The rich text editor provides an insert button or option, allowing teachers to select and insert 3D map model components. When a teacher selects to insert a 3D map model component, the rich text editor detects the component's information, creates a custom node object, and inserts it at the current cursor position in the editor. Once the 3D map model component is inserted, the rich text editor can render its appearance in real time, and students can interact with the 3D map model, such as browsing, zooming, rotating, and viewing markers. The `$watch` method monitors changes in the 3D map model's component data caused by interaction and triggers the rendering function to maintain real-time rendering.

[0088] The process described above allows teachers to create, manage, and insert 3D map model components into online geography courses, providing a real-time interactive learning experience that helps students better understand geographical concepts and map data. It also offers teachers a convenient way to manage and customize educational content.

[0089] Reference Figure 2 The present invention also discloses a rich text editor processing system 2, wherein system 2 specifically includes:

[0090] Component library module 201 is used to create a custom Vue component library, and to register and manage custom Vue components based on the custom Vue component library;

[0091] The first processing module 202 is used to create a custom node object based on the Prosemirror framework and bind the custom node object to any custom Vue component of the custom Vue component library.

[0092] The second processing module 203 is used to obtain the corresponding custom Vue component through the custom node object, render the component, and insert it into the current cursor position of the rich text editor.

[0093] It is understandable that, such as Figure 1 The content of the rich text editor processing method embodiments shown are all applicable to the processing system embodiments of this rich text editor. The specific functions implemented by the processing system embodiments of this rich text editor are as follows: Figure 1 The processing method of the rich text editor shown is the same as that of the embodiment, and the beneficial effects achieved are the same as those of the example. Figure 1 The beneficial effects achieved by the processing method embodiment of the rich text editor shown are also the same.

[0094] It should be noted that the information interaction and execution process between the above systems are based on the same concept as the method embodiments of the present invention. For details on their specific functions and technical effects, please refer to the method embodiments section, which will not be repeated here.

[0095] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is merely an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the system can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this application. The specific working process of the units and modules in the above system can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0096] Reference Figure 3 The present invention also provides a computer device 3, including: a memory 302 and a processor 301, and a computer program 303 stored in the memory 302. When the computer program 303 is executed on the processor 301, it implements the processing method of a rich text editor as described in any of the above methods.

[0097] The computer device 3 may be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device 3 may include, but is not limited to, a processor 301 and a memory 302. Those skilled in the art will understand that... Figure 3 The computer device 3 is merely an example and does not constitute a limitation on the computer device 3. It may include more or fewer components than shown in the figure, or combine certain components, or different components, such as input / output devices, network access devices, etc.

[0098] The processor 301 may be a Central Processing Unit (CPU), or it may be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor.

[0099] In some embodiments, the memory 302 may be an internal storage unit of the computer device 3, such as a hard disk or memory of the computer device 3. In other embodiments, the memory 302 may be an external storage device of the computer device 3, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 3. Furthermore, the memory 302 may include both internal and external storage units of the computer device 3. The memory 302 is used to store the operating system, applications, bootloader, data, and other programs, such as the program code of the computer program. The memory 302 can also be used to temporarily store data that has been output or will be output.

[0100] This invention also provides a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the processing method of a rich text editor as described in any of the above methods.

[0101] In this embodiment, if the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the various method embodiments described above. The computer program includes computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. The computer-readable medium can include at least: any entity or device capable of carrying computer program code to a photographing device / terminal device, a recording medium, a computer memory, a read-only memory (ROM), a random access memory (RAM), an electrical carrier signal, a telecommunication signal, and a software distribution medium. Examples include USB flash drives, portable hard drives, magnetic disks, or optical disks. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electrical carrier signals or telecommunication signals.

[0102] In the above embodiments, the descriptions of each embodiment have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0103] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0104] In the embodiments disclosed in this application, it should be understood that the disclosed devices / terminal equipment and methods can be implemented in other ways. For example, the device / terminal equipment embodiments described above are merely illustrative. For instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual coupling or direct coupling or communication connection may be through some interfaces; the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

[0105] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

Claims

1. A method for processing rich text in an editor, characterized in that, The method specifically includes: Create a custom Vue component library, and register and manage custom Vue components based on the custom Vue component library; Create a custom node object based on the Prosemirror framework, and bind and associate the custom node object with any custom Vue component in the custom Vue component library; The custom Vue component is obtained from the custom node object, rendered, and inserted at the current cursor position in the rich text editor. Specifically, this includes: Based on the renderDescs function of the Prosemirror framework, all custom node objects are obtained, and the corresponding custom Vue components are generated into virtual DOM according to the rendering functions declared on the custom node objects. The virtual DOM is converted into HTML elements, and the content of the corresponding custom Vue component is inserted into the current cursor position of the rich text editor based on the HTML elements. Specifically, the step of converting the virtual DOM into HTML elements and inserting the content of the corresponding custom Vue component into the current cursor position of the rich text editor based on the HTML elements includes: Create an HTML element, and mount the virtual DOM to the HTML element using the mount method; The current state of the rich text editor is obtained from the EditorView of the Prosemirror framework, and the current state includes the current cursor position of the rich text editor. The HTML string corresponding to the virtual DOM on the HTML element is obtained according to the innerHTML property, the HTML string is inserted into the current cursor position of the rich text editor, and the virtual DOM on the HTML element is unloaded by the unmount method.

2. The method according to claim 1, characterized in that, The process of registering and managing custom Vue components according to the custom Vue component library specifically includes: Set a custom Vue component user management button in the custom Vue component library. The custom Vue component user management button includes a register button, an edit button, a delete button, a permissions button, and a list button. Register a new component by entering the Vue component information using an existing Vue component template using the registration button; Edit the component properties of each custom Vue component in the custom Vue component library using the edit button; Delete the custom Vue component in the custom Vue component library according to the delete button; The permissions button is used to set the management permission scope for each user in the custom Vue component library; View the list by clicking the button to see basic information about all custom Vue components in the custom Vue component library.

3. The method according to claim 1, characterized in that, The process of creating a custom node object based on the Prosemirror framework and binding the custom node object to any custom Vue component in the custom Vue component library specifically includes: Create custom node objects based on the Node of the Prosemirror framework, and create Prosemirror schema objects based on the schema of the Prosemirror framework. Set a node data structure for the custom node object. The node data structure includes node name, node attributes, node style, optionality, rendering function declaration, and association information with the custom Vue component. Add the custom node object to the spec.nodes property of the Prosemirror schema object.

4. The method according to claim 1, characterized in that, The method further includes: Import the Vue.js module, and use the $watch method of the Vue.js module to monitor whether the data of the custom Vue component has changed; When the data of the custom Vue component changes, a new virtual DOM is generated by calling the rendering function of the custom node object corresponding to the custom Vue component.

5. A rich text editor processing system, characterized in that, The system specifically includes: The component library module is used to create a custom Vue component library, and to register and manage custom Vue components based on the custom Vue component library; The first processing module is used to create custom node objects based on the Prosemirror framework and bind and associate the custom node objects with any custom Vue component in the custom Vue component library. The second processing module is used to obtain the corresponding custom Vue component through the custom node object, render the component, and insert it at the current cursor position in the rich text editor. Specifically, it includes: Based on the renderDescs function of the Prosemirror framework, all custom node objects are obtained, and the corresponding custom Vue components are generated into virtual DOM according to the rendering functions declared on the custom node objects. The virtual DOM is converted into HTML elements, and the content of the corresponding custom Vue component is inserted into the current cursor position of the rich text editor based on the HTML elements. Specifically, the step of converting the virtual DOM into HTML elements and inserting the content of the corresponding custom Vue component into the current cursor position of the rich text editor based on the HTML elements includes: Create an HTML element, and mount the virtual DOM to the HTML element using the mount method; The current state of the rich text editor is obtained from the EditorView of the Prosemirror framework, and the current state includes the current cursor position of the rich text editor. The HTML string corresponding to the virtual DOM on the HTML element is obtained according to the innerHTML property, the HTML string is inserted into the current cursor position of the rich text editor, and the virtual DOM on the HTML element is unloaded using the unmount method.

6. A computer device, characterized in that, include: A memory and a processor, and a computer program stored in the memory, which, when executed on the processor, implements the processing method of a rich text editor as described in any one of claims 1 to 4.

7. A computer-readable storage medium, characterized in that, It stores a computer program, which, when executed by a processor, implements the processing method of the rich text editor as described in any one of claims 1 to 4.

Images