CN117313674A - Processing method, system, equipment and medium of rich text editor - Google Patents
Processing method, system, equipment and medium of rich text editor Download PDFInfo
- Publication number
- CN117313674A CN117313674A CN202311322509.3A CN202311322509A CN117313674A CN 117313674 A CN117313674 A CN 117313674A CN 202311322509 A CN202311322509 A CN 202311322509A CN 117313674 A CN117313674 A CN 117313674A
- Authority
- CN
- China
- Prior art keywords
- custom
- vue
- component
- vue component
- rich text
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000003672 processing method Methods 0.000 title abstract description 10
- 238000000034 method Methods 0.000 claims abstract description 49
- 238000009877 rendering Methods 0.000 claims abstract description 34
- 230000006870 function Effects 0.000 claims description 33
- 238000012545 processing Methods 0.000 claims description 23
- 238000004590 computer program Methods 0.000 claims description 14
- 238000012544 monitoring process Methods 0.000 claims description 4
- 230000003993 interaction Effects 0.000 abstract description 7
- 230000002452 interceptive effect Effects 0.000 description 8
- 230000008569 process Effects 0.000 description 5
- 230000004044 response Effects 0.000 description 4
- 230000006399 behavior Effects 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000001514 detection method Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 239000003550 marker Substances 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to the field of rich text editors, in particular to a processing method, a system, equipment and a medium of a rich text editor, wherein the method specifically comprises the following steps: creating a custom Vue component library, and registering and managing the custom Vue component according to the custom Vue component library; creating a custom node object based on a Prosemiror framework, and binding and associating the custom node object with any custom Vue component of the custom Vue component library; and acquiring a corresponding custom Vue component through the custom node object to perform component rendering, and inserting the component rendering into the current cursor position of the rich text editor. The invention realizes the experience of a rich text editor with more flexibility and high expansibility, thereby allowing a user to create and manage various types of custom interaction elements according to the requirements in the course of the online education platform and enabling the online education content to be more flexible and diversified.
Description
Technical Field
The present invention relates to the field of rich text editors, and in particular, to a method, a system, a device, and a medium for processing a rich text editor.
Background
In existing networks and applications, rich text editors have become one of the important tools enabling users to create and edit rich content containing text, pictures, and other media elements. However, existing rich text editors have some limitations, such as lack of ability to support custom Vue/act components for use in conjunction with the mainstream front end framework, loss of flexibility and extensibility. For example, in the rich text editor supported by the current online education platform, a teacher cannot adjust and set interactive elements in real time according to the demands of courses, and only teaching can be performed by using the existing fixed functions of the online education platform.
Disclosure of Invention
The invention aims to provide a processing method, a system, equipment and a medium of a rich text editor, which realize the experience of the rich text editor with more flexibility and high expansibility, thereby allowing a user to create and manage various types of custom interactive elements according to requirements in courses of an online education platform, and leading the online education content to be more flexible and diversified so as to solve at least one of the problems in the prior art.
The invention provides a processing method of a rich text editor, which specifically comprises the following steps:
creating a custom Vue component library, and registering and managing the custom Vue component according to the custom Vue component library;
creating a custom node object based on a Prosemiror framework, and binding and associating the custom node object with any custom Vue component of the custom Vue component library;
and acquiring a corresponding custom Vue component through the custom node object to perform component rendering, and inserting the component rendering into the current cursor position of the rich text editor.
Optionally, registering and managing the custom Vue component according to the custom Vue component library specifically includes:
setting a user management button of a user-defined Vue component in the user-defined Vue component library, wherein the user management button of the user-defined Vue component comprises a registration button, an editing button, a deleting button, a permission button and a list button;
inputting the information of the Vue component through the existing Vue component template according to the registration button to register a new component;
editing the component attribute of each custom Vue component of the custom Vue component library according to the editing button;
deleting the custom Vue component of the custom Vue component library according to the delete button;
setting a management authority range of each user in the custom Vue component library according to the authority button;
and viewing and displaying basic information of all the custom Vue components in the custom Vue component library according to the list button.
Optionally, the creating a custom node object based on the Prosemirror framework, and binding and associating the custom node object with any custom Vue component of the custom Vue component library specifically includes:
creating a custom Node object according to the Node of the Prosemirro framework, and creating a Prosemirror schema object according to the schema of the Prosemirro framework;
setting a node data structure for the custom node object, wherein the node data structure comprises a node name, a node attribute, a node style, selectivity, a rendering function statement and association information with a custom Vue component;
the custom node object is added to the spec.nodes attribute of the Prosemirror schema object.
Optionally, the obtaining, by the custom node object, the corresponding custom Vue component to perform component rendering, and inserting the component rendering into a current cursor position of a rich text editor, specifically includes:
acquiring all custom node objects based on a rendeerDescs function of a Prosemirror framework, and generating a virtual DOM (document object model) from a corresponding custom Vue component according to a rendering function declared on the custom node objects;
and converting the virtual DOM into an HTML element, and inserting the content of the corresponding custom Vue component into the current cursor position of the rich text editor according to the HTML element.
Optionally, the converting the virtual DOM into an HTML element, and inserting the content of the corresponding custom Vue component into the current cursor position of the rich text editor according to the HTML element specifically includes:
creating an HMTL element, and mounting the virtual DOM to the HMTL element by a mount method;
acquiring the current state of a rich text editor according to the editor view of the Prosemiror framework, wherein the current state comprises the current cursor position of the rich text editor;
and acquiring an HTML character string corresponding to the virtual DOM on the HMTL element according to the incnerHTML attribute, inserting the HTML character string into the current cursor position of the rich text editor, and unloading the virtual DOM on the HMTL element by an unmount method.
Optionally, the method further comprises:
importing a Vue.js module, and monitoring whether the data of the custom Vue component changes according to a $watch method of the Vue.js module;
when the data of the custom Vue component changes, the custom Vue component generates a new virtual DOM by calling a rendering function of a custom node object corresponding to the custom Vue component.
The invention also provides a processing system of the rich text editor, which specifically comprises:
the component library module is used for creating a custom Vue component library, and registering and managing the custom Vue component according to the custom Vue component library;
the first processing module is used for creating a custom node object based on the Prosemiror framework and enabling the custom node object to be in binding association with any custom Vue component of the custom Vue component library;
and the second processing module is used for acquiring the corresponding custom Vue component through the custom node object to perform component rendering and inserting the corresponding custom Vue component into the current cursor position of the rich text editor.
The present invention also provides a computer device comprising: memory and processor and computer program stored on the memory, which when executed on the processor, implements a method of processing a rich text editor as defined in any of the above methods.
The invention also provides a computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements a method of processing a rich text editor as defined in any one of the above methods.
Compared with the prior art, the invention has at least one of the following technical effects:
1. the method realizes the experience of a rich text editor with more flexibility and high expansibility, thereby allowing a user to create and manage various types of custom interactive elements according to requirements in courses of an online education platform and enabling online education contents to be more flexible and diversified.
2. Integrating the custom Vue component with the rich text editor provides extremely high customizable, enabling teachers to create specific types of content according to educational needs.
3. The modularized development mode of Prosemirror is used, so that the maintenance and expansion of codes are facilitated, and new custom components and functions can be easily added to the platform.
4. By rendering the Vue component as a virtual DOM, real-time preview can be achieved, so that a user can see a final presentation effect in the editor, and editing efficiency is improved.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic flow chart of a processing method of a rich text editor according to an embodiment of the present invention;
FIG. 2 is a schematic diagram of a processing system of a rich text editor according to an embodiment of the present invention;
fig. 3 is a schematic structural diagram of a computer device according to an embodiment of the present invention.
Detailed Description
In the following description, for purposes of explanation and not limitation, specific details are set forth, such as particular system configurations, techniques, etc. in order to provide a thorough understanding of the embodiments of the present application. It will be apparent, however, to one skilled in the art that the present application may be practiced in other embodiments that depart from these specific details. In other instances, detailed descriptions of well-known systems, devices, circuits, and methods are omitted so as not to obscure the description of the present application with unnecessary detail.
It should be understood that the terms "comprises" and/or "comprising," when used in this specification and the appended claims, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof.
It should also be understood that the term "and/or" as used in this specification and the appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes such combinations.
As used in this specification and the appended claims, the term "if" may be interpreted as "when..once" or "in response to a determination" or "in response to detection" depending on the context. Similarly, the phrase "if a determination" or "if a [ described condition or event ] is detected" may be interpreted in the context of meaning "upon determination" or "in response to determination" or "upon detection of a [ described condition or event ]" or "in response to detection of a [ described condition or event ]".
In addition, in the description of the present application and the appended claims, the terms "first," "second," "third," and the like are used merely to distinguish between descriptions and are not to be construed as indicating or implying relative importance.
Reference in the specification to "one embodiment" or "some embodiments" or the like means that a particular feature, structure, or characteristic described in connection with the embodiment is included in one or more embodiments of the application. Thus, appearances of the phrases "in one embodiment," "in some embodiments," "in other embodiments," and the like in the specification are not necessarily all referring to the same embodiment, but mean "one or more but not all embodiments" unless expressly specified otherwise. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless expressly specified otherwise.
In existing networks and applications, rich text editors have become one of the important tools enabling users to create and edit rich content containing text, pictures, and other media elements. However, existing rich text editors have some limitations, such as lack of ability to support custom Vue/act components for use in conjunction with the mainstream front end framework, loss of flexibility and extensibility. For example, in the rich text editor supported by the current online education platform, a teacher cannot adjust and set interactive elements in real time according to the demands of courses, and only teaching can be performed by using the existing fixed functions of the online education platform.
Referring to fig. 1, the embodiment of the invention discloses a processing method of a rich text editor, which specifically comprises the following steps:
s101: creating a custom Vue component library, and registering and managing the custom Vue component according to the custom Vue component library.
In some embodiments, registering and managing the custom Vue component according to the custom Vue component library specifically includes:
setting a user management button of a user-defined Vue component in the user-defined Vue component library, wherein the user management button of the user-defined Vue component comprises a registration button, an editing button, a deleting button, a permission button and a list button;
inputting the information of the Vue component through the existing Vue component template according to the registration button to register a new component;
editing the component attribute of each custom Vue component of the custom Vue component library according to the editing button;
deleting the custom Vue component of the custom Vue component library according to the delete button;
setting a management authority range of each user in the custom Vue component library according to the authority button;
and viewing and displaying basic information of all the custom Vue components in the custom Vue component library according to the list button.
In this embodiment, a specialized custom Vue component library interface is created in the management interface of the online education platform. The interface may comprise the following elements: (1) register button: for registering a new custom Vue component. After clicking this button, the user may enter information for the Vue component, including name, template, style, behavior, etc. When a teacher or content creator wishes to register a new custom Vue component, they can click on the "register button" and then enter the information for the component, including the name of the component, the template (set HTML or Vue template created by the developer in advance), the style (CSS style for customizing the appearance of the component), the behavior (which may be some configuration options, such as the number of question options for the question component), etc. (2) edit button: for editing properties of existing custom Vue components. The user may select a component to edit and then modify its information. (3) delete button: for deleting custom Vue components. If a custom Vue component is no longer needed, the user can select it and click on the "delete button" to delete it from the custom Vue component library. (4) permission button: the management authority range of each user in the custom Vue component library is set, and the management authority range comprises who can register, edit, delete the custom components and the like. (5) list button: for viewing the basic information of displaying all custom Vue components in the custom Vue component library, the user can browse the registered components.
In an online educational platform, this custom Vue component library can allow teachers to create various types of interactive elements, such as 3D model components, interactive topic components, etc., providing a more flexible and interactive learning experience. In addition, through authority control, a platform administrator can ensure that only authorized users can manage and edit components, and the safety and stability of the system are ensured.
S102: creating a custom node object based on a Prosemiror framework, and enabling the custom node object to be in binding association with any custom Vue component of the custom Vue component library.
In some embodiments, the creating a custom node object based on the Prosemirror framework, and binding the custom node object with any custom Vue component of the custom Vue component library specifically includes:
creating a custom Node object according to the Node of the Prosemirro framework, and creating a Prosemirror schema object according to the schema of the Prosemirro framework;
setting a node data structure for the custom node object, wherein the node data structure comprises a node name, a node attribute, a node style, selectivity, a rendering function statement and association information with a custom Vue component;
the custom node object is added to the spec.nodes attribute of the Prosemirror schema object.
In this embodiment, node is a class in the Prosemirror framework that represents nodes in the document, and schema is a Prosemirror schema object that defines the document model.
A Prosemirror schema object is created using the schema module of the Prosemirror framework, which is used to define the node types and other rules available in the editor. And creating a custom Node object for each custom Vue component according to the Node constructor of the Prosemirror framework, wherein the Node objects are used for representing the presentation of the Vue component in an editor. Setting a node data structure for each custom node object, wherein the node data structure comprises information such as names, attributes, styles, selectivity and the like of nodes, and the Vue functions such as Vue. Command, vue. Render and the like are used in the rendering function of each custom node object and are used for rendering the custom Vue component into a virtual DOM. By adding the custom node object to the spec.nodes attribute of Prosemirror schema, it is ensured that the Prosemirror editor can identify and process this custom node object.
S103: and acquiring a corresponding custom Vue component through the custom node object to perform component rendering, and inserting the component rendering into the current cursor position of the rich text editor.
In some embodiments, the obtaining, by the custom node object, the corresponding custom Vue component for component rendering, and inserting the custom Vue component into a current cursor position of a rich text editor specifically includes:
acquiring all custom node objects based on a rendeerDescs function of a Prosemirror framework, and generating a virtual DOM (document object model) from a corresponding custom Vue component according to a rendering function declared on the custom node objects;
and converting the virtual DOM into an HTML element, and inserting the content of the corresponding custom Vue component into the current cursor position of the rich text editor according to the HTML element.
In some embodiments, the converting the virtual DOM into an HTML element, inserting the content of the corresponding custom Vue component into the current cursor position of the rich text editor according to the HTML element, specifically includes:
creating an HMTL element, and mounting the virtual DOM to the HMTL element by a mount method;
acquiring the current state of a rich text editor according to the editor view of the Prosemiror framework, wherein the current state comprises the current cursor position of the rich text editor;
and acquiring an HTML character string corresponding to the virtual DOM on the HMTL element according to the incnerHTML attribute, inserting the HTML character string into the current cursor position of the rich text editor, and unloading the virtual DOM on the HMTL element by an unmount method.
In this embodiment, in the Prosemirror framework, the renderDescs function is a function used to render the document nodes, typically to convert the node descriptions of the document (typically generated by a node view descriptor) into an actual virtual DOM to render the document content in a user interface. The renderDescs function is typically used in the Prosemirror view, which accepts a description list of document nodes (typically child node description list of root node) and returns a virtual DOM representation. The virtual DOM is a data structure representing an interface that can be efficiently compared and updated to ensure efficient DOM operations.
The renderDescs function may be used to obtain all custom node objects, traverse the editor's document, and generate descriptive information for each node. For each custom node object, its rendering function is accessed, which has been defined in the configuration of the node object, which will be responsible for rendering the custom Vue component as a virtual DOM, and within the rendering function, the relevant functions of the Vue component (e.g., vue. Command and Vue. Render) are invoked to render the Vue component as a virtual DOM.
The virtual DOM is mounted on a temporary HTML element by using the mount method of Vue, and an HTML character string of the HTML element is acquired, wherein the character string represents the presentation form of the virtual DOM in the HTML. For example, an empty HTML < div > element named div is created to accommodate the virtual DOM generated by the Vue component, the virtual DOM generated by the Vue component is rendered onto the created div element by calling mount (div), and the HTML string containing the virtual DOM generated by the Vue component is obtained using div. To prevent memory leaks or other problems, un () is called to clean up and unload the virtual DOM previously mounted on the div element, and return the generated HTML string.
The editor view is part of the Prosemirror module that displays the state of the editor as an editable element in the browser and handles user interactions with the editor. By introducing an editor view 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 the Vue component is inserted into the current cursor position of the editor through the HTML string to present the content of the custom component.
In some embodiments, the method further comprises:
importing a Vue.js module, and monitoring whether the data of the custom Vue component changes according to a $watch method of the Vue.js module;
when the data of the custom Vue component changes, the custom Vue component generates a new virtual DOM by calling a rendering function of a custom node object corresponding to the custom Vue component.
In this embodiment, $watch is one of the core functions in the Vue js framework that listens to changes in data in the Vue instance and executes callback functions when the data changes. Typically, $watch is used to monitor data attributes in the Vue component, and callback functions are triggered when the values of these data attributes change.
The $watch method of the Vue can be used for monitoring the change of the data of the custom Vue component, any interactions or behaviors defined in the Vue component, such as user interactions, event monitors, dynamic content and the like, are reserved in the rendered nodes, if the data of the Vue component changes, a rendering function of a custom node object corresponding to a custom Vue component is triggered, and a new virtual DOM is generated and inserted into an editor to keep the content synchronous.
To sum up, assuming that a teacher needs to insert a 3D map model component in online geography teaching, a developer creates a template of the 3D map model component in advance, including initial attributes, such as map coordinates, default view angles, interaction control methods, and the like. Then, the platform manager gives the teacher operation authority in the management interface of the custom component library through the authority button, more specifically, different teaching subjects can be enabled to correspond to different custom component templates, and the teacher of different subjects can only select the custom component templates corresponding to the teaching course parts of the teacher. In the management interface of the custom Vue component library, a teacher can select the 3D map model component as a template of a new component through a registration button, provide the name of the new component, the attribute required to be set and the like, and store the information into a database or a configuration file after finishing inputting the information. Meanwhile, after registering a new component, a teacher can also re-edit the information of the component or delete the information from the component library, and if the 3D map model component is registered in the previous geographical class, the 3D map model component can be determined as soon as possible by searching and checking through a list button, and the information of the component is edited according to the requirements of the class on the basis of the original 3D map model component.
An insert button or option is provided in the rich text editor that allows the teacher to select and insert 3D map model components into the rich text editor that detects the information of the 3D map model components and creates a custom node object that is inserted into the current cursor position of the respective editor when the teacher selects to insert the 3D map model components. When the 3D map model component is inserted into the editor, the rich text editor may render the appearance of the component in real time, and the student may interact with the 3D map model, e.g., browse maps, zoom, rotate, view marker points, etc., monitor the 3D map model for component data changes resulting from the interaction by a $watch method and trigger the rendering function to keep rendering in real time.
The above process allows teachers to create, manage and insert 3D map model components in online geographic courses and provides a real-time interactive learning experience that helps students to better understand geographic concepts and map data. At the same time, this also provides a way for teachers to conveniently manage and customize educational content.
Referring to fig. 2, the embodiment of the present invention further discloses a processing system 2 of the rich text editor, where the system 2 specifically includes:
the component library module 201 is configured to create a custom Vue component library, and register and manage custom Vue components according to the custom Vue component library;
a first processing module 202, configured to create a custom node object based on a Prosemirror framework, and bind the custom node object with any custom Vue component of the custom Vue component library;
and the second processing module 203 is configured to obtain a corresponding custom Vue component through the custom node object, perform component rendering, and insert the component rendering into a current cursor position of the rich text editor.
It can be understood that the content in the embodiment of the processing method of the rich text editor shown in fig. 1 is applicable to the embodiment of the processing system of the rich text editor, and the functions of the embodiment of the processing system of the rich text editor are the same as those of the embodiment of the processing method of the rich text editor shown in fig. 1, and the advantages achieved are the same as those achieved by the embodiment of the processing method of the rich text editor shown in fig. 1.
It should be noted that, because the content of information interaction and execution process between the above systems is based on the same concept as the method embodiment of the present invention, specific functions and technical effects thereof may be referred to in the method embodiment section, and will not be described herein.
It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-described division of the functional units and modules is illustrated, and in practical application, the above-described functional distribution may be performed by different functional units and modules according to needs, i.e. the internal structure of the system is divided into different functional units or modules to perform all or part of the above-described functions. The functional units and modules in the embodiment may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit, where the integrated units may be implemented in a form of hardware or a form of a software functional unit. In addition, specific names of the functional units and modules are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present application. The specific working process of the units and modules in the above system may refer to the corresponding process in the foregoing method embodiment, which is not described herein again.
Referring to fig. 3, an embodiment of the present invention further provides a computer device 3, including: memory 302 and processor 301 and a computer program 303 stored on memory 302, which computer program 303, when executed on processor 301, implements a method of processing a rich text editor as defined in any of the above methods.
The computer device 3 may be a desktop computer, a notebook computer, a palm computer, a cloud server, or the like. The computer device 3 may include, but is not limited to, a processor 301, a memory 302. It will be appreciated by those skilled in the art that fig. 3 is merely an example of the computer device 3 and is not meant to be limiting as the computer device 3, and may include more or fewer components than shown, or may combine certain components, or different components, such as may also include input-output devices, network access devices, etc.
The processor 301 may be a central processing unit (Central Processing Unit, CPU), the processor 301 may also be other general purpose processors, digital signal processors (Digital Signal Processor, DSP), application specific integrated circuits (Application Specific Integrated Circuit, ASIC), off-the-shelf programmable gate arrays (Field-Programmable Gate Array, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or the like. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The memory 302 may in some embodiments be an internal storage unit of the computer device 3, such as a hard disk or a memory of the computer device 3. The memory 302 may in other embodiments also be an external storage device of the computer device 3, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash Card (Flash Card) or the like, which are provided on the computer device 3. Further, the memory 302 may also include both an internal storage unit and an external storage device of the computer device 3. The memory 302 is used to store an operating system, application programs, boot loader (BootLoader), data, and other programs, such as program code for the computer program. The memory 302 may also be used to temporarily store data that has been output or is to be output.
The embodiment of the invention also provides a computer readable storage medium, on which a computer program is stored, which when being run by a processor, implements a method of processing a rich text editor as defined in any one of the above methods.
In this embodiment, the integrated units, if implemented in the form of software functional units and sold or used as stand-alone products, may be stored in a computer readable storage medium. Based on such understanding, the present application implements all or part of the flow of the method of the above embodiments, and may be implemented by a computer program to instruct related hardware, where the computer program may be stored in a computer readable storage medium, where the computer program, when executed by a processor, may implement the steps of each of the method embodiments described above. Wherein the computer program comprises computer program code which may be in source code form, object code form, executable file or some intermediate form etc. The computer readable medium may include at least: any entity or device capable of carrying computer program code to a photographing device/terminal apparatus, recording medium, computer Memory, read-Only Memory (ROM), random access Memory (RAM, random Access Memory), electrical carrier signals, telecommunications signals, and software distribution media. Such as a U-disk, removable hard disk, magnetic or optical disk, etc. In some jurisdictions, computer readable media may not be electrical carrier signals and telecommunications signals in accordance with legislation and patent practice.
In the foregoing embodiments, the descriptions of the embodiments are emphasized, and in part, not described or illustrated in any particular embodiment, reference is made to the related descriptions of other embodiments.
Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.
In the embodiments disclosed in the present application, it should be understood that the disclosed apparatus/terminal device and method may be implemented in other manners. For example, the apparatus/terminal device embodiments described above are merely illustrative, e.g., the division of the modules or units is merely a logical function division, and there may be additional divisions in actual implementation, e.g., multiple units or components may be combined or integrated into another system, or some features may be omitted or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection via interfaces, devices or units, which may be in electrical, mechanical or other forms.
The units described as separate units may or may not be physically separate, and units shown as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
Claims (9)
1. A method for processing a rich text editor, the method comprising:
creating a custom Vue component library, and registering and managing the custom Vue component according to the custom Vue component library;
creating a custom node object based on a Prosemiror framework, and binding and associating the custom node object with any custom Vue component of the custom Vue component library;
and acquiring a corresponding custom Vue component through the custom node object to perform component rendering, and inserting the component rendering into the current cursor position of the rich text editor.
2. The method according to claim 1, wherein registering and managing custom Vue components according to the custom Vue component library specifically comprises:
setting a user management button of a user-defined Vue component in the user-defined Vue component library, wherein the user management button of the user-defined Vue component comprises a registration button, an editing button, a deleting button, a permission button and a list button;
inputting the information of the Vue component through the existing Vue component template according to the registration button to register a new component;
editing the component attribute of each custom Vue component of the custom Vue component library according to the editing button;
deleting the custom Vue component of the custom Vue component library according to the delete button;
setting a management authority range of each user in the custom Vue component library according to the authority button;
and viewing and displaying basic information of all the custom Vue components in the custom Vue component library according to the list button.
3. The method according to claim 1, wherein the creating a custom node object based on the Prosemirror framework and binding the custom node object with any custom Vue component of the custom Vue component library specifically comprises:
creating a custom Node object according to the Node of the Prosemirro framework, and creating a Prosemirror schema object according to the schema of the Prosemirro framework;
setting a node data structure for the custom node object, wherein the node data structure comprises a node name, a node attribute, a node style, selectivity, a rendering function statement and association information with a custom Vue component;
the custom node object is added to the spec.nodes attribute of the Prosemirror schema object.
4. The method according to claim 3, wherein the obtaining, by the custom node object, the corresponding custom Vue component for component rendering and inserting into the current cursor position of the rich text editor specifically includes:
acquiring all custom node objects based on a rendeerDescs function of a Prosemirror framework, and generating a virtual DOM (document object model) from a corresponding custom Vue component according to a rendering function declared on the custom node objects;
and converting the virtual DOM into an HTML element, and inserting the content of the corresponding custom Vue component into the current cursor position of the rich text editor according to the HTML element.
5. The method according to claim 4, wherein the converting the virtual DOM into an HTML element, inserting the content of the corresponding custom Vue component into the current cursor position of the rich text editor according to the HTML element, specifically comprises:
creating an HMTL element, and mounting the virtual DOM to the HMTL element by a mount method;
acquiring the current state of a rich text editor according to the editor view of the Prosemiror framework, wherein the current state comprises the current cursor position of the rich text editor;
and acquiring an HTML character string corresponding to the virtual DOM on the HMTL element according to the incnerHTML attribute, inserting the HTML character string into the current cursor position of the rich text editor, and unloading the virtual DOM on the HMTL element by an unmount method.
6. The method of claim 5, wherein the method further comprises:
importing a Vue.js module, and monitoring whether the data of the custom Vue component changes according to a $watch method of the Vue.js module;
when the data of the custom Vue component changes, the custom Vue component generates a new virtual DOM by calling a rendering function of a custom node object corresponding to the custom Vue component.
7. A processing system of a rich text editor, the system comprising in particular:
the component library module is used for creating a custom Vue component library, and registering and managing the custom Vue component according to the custom Vue component library;
the first processing module is used for creating a custom node object based on the Prosemiror framework and enabling the custom node object to be in binding association with any custom Vue component of the custom Vue component library;
and the second processing module is used for acquiring the corresponding custom Vue component through the custom node object to perform component rendering and inserting the corresponding custom Vue component into the current cursor position of the rich text editor.
8. A computer device, comprising: memory and processor and computer program stored on the memory, which when executed on the processor, implements a method of processing a rich text editor as claimed in any one of claims 1 to 6.
9. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, implements a method of processing a rich text editor as claimed in any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311322509.3A CN117313674A (en) | 2023-10-13 | 2023-10-13 | Processing method, system, equipment and medium of rich text editor |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311322509.3A CN117313674A (en) | 2023-10-13 | 2023-10-13 | Processing method, system, equipment and medium of rich text editor |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117313674A true CN117313674A (en) | 2023-12-29 |
Family
ID=89242336
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311322509.3A Pending CN117313674A (en) | 2023-10-13 | 2023-10-13 | Processing method, system, equipment and medium of rich text editor |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117313674A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN118502733A (en) * | 2024-07-22 | 2024-08-16 | 海看网络科技(山东)股份有限公司 | Method for determining cursor line head in rich text editor in vue environment |
-
2023
- 2023-10-13 CN CN202311322509.3A patent/CN117313674A/en active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN118502733A (en) * | 2024-07-22 | 2024-08-16 | 海看网络科技(山东)股份有限公司 | Method for determining cursor line head in rich text editor in vue environment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8010479B2 (en) | Simplifying the creation of user-defined custom elements for use in a graphical modeling application | |
| CN108292231B (en) | Method and system for generating applications from data | |
| US6718386B1 (en) | Methods, system, and article for displaying privilege state data | |
| US20140040791A1 (en) | Development platform for software as a service (saas) in a multi-tenant environment | |
| CN111367514B (en) | Page card development method and device, computing device and storage medium | |
| US7367006B1 (en) | Hierarchical, rules-based, general property visualization and editing method and system | |
| US9934292B2 (en) | Dynamic presentation of a results set by a form-based software application | |
| CN117313674A (en) | Processing method, system, equipment and medium of rich text editor | |
| CN109634610B (en) | Interface marking data generation method and device | |
| CN113094776B (en) | Method and system for constructing visual component model data and electronic equipment | |
| CN116452786B (en) | Virtual reality content generation method, system, computer device and storage medium | |
| CN116301785A (en) | Method and device for realizing custom text editor component | |
| CN110928540A (en) | Page generation method and device | |
| CN115408627A (en) | Menu display method, device, equipment and medium | |
| CN109276886B (en) | Text generation method, system and terminal equipment | |
| CN112667951A (en) | Model calling method and device for target detection and electronic equipment | |
| CN107168684B (en) | Method and device for generating content editing form | |
| US20120110476A1 (en) | My online 3D E library | |
| Taufani et al. | iOS Based Education App for Learning the History of Singhasari | |
| Andrunyk et al. | Information System for Finding Inclusive Places for People with Disabilities. | |
| CN116009901A (en) | Software function management method, device, equipment and medium based on sharing script | |
| CN117115304A (en) | Scattered graph management method, system, equipment and medium applied to Photoshop layer | |
| CN118488112A (en) | Information issuing system, method, device and storage medium | |
| CN115063069A (en) | Method, device, server and medium for modularization BOM | |
| Stefanova | Website architecture planning, technical implementation, and performance improvements |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |