Integration and packaging method and device based on front-end document editing plug-in and medium
By encapsulating unified configuration interfaces and methods, the problem of inconsistent integration of document editor components across different front-end frameworks has been solved, achieving cross-front-end framework adaptation and improving development efficiency and system architecture flexibility.
Patent Information
- Application Number
- CN202511338780.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-09-18
- Publication Date
- 2026-01-16
AI Technical Summary
Existing document editor components have inconsistent integration methods across different front-end frameworks, complex interfaces, and a lack of unified encapsulation. This forces developers to deeply understand configuration structures, event mechanisms, and underlying interface documentation, resulting in low development efficiency.
This paper provides an integration and encapsulation method based on a front-end document editing plugin. By generating plugin initialization configuration, constructing and mounting document editing plugin instances, determining functional interfaces and encapsulating them uniformly, and encapsulating an event callback registration mechanism, cross-front-end framework adaptation is achieved.
It simplifies the integration process of document editor plugins, improves development efficiency and maintainability, enhances the business reusability and cross-project versatility of plugin functions, and reduces the cost of repetitive development.
Smart Images
Figure CN121349554A_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of computer software, and particularly relates to an integration and encapsulation method, device and medium based on a front-end document editing plug-in. BACKGROUND
[0002] With the popularity of online office and document collaboration, document editors such as OnlyOffice, Office Online, WPS Docs, etc. are gradually embedded into various web applications. Among them, OnlyOffice provides a set of rich-featured document editing web SDK, and developers can embed the editor into the front-end page through JavaScript configuration items, which is widely used in enterprise OA systems, government systems and education platforms.
[0003] The prior art usually initializes the document editor component through a JavaScript object and transmits parameters including file information, permission configuration, user information, callback method, etc. Meanwhile, OnlyOffice also provides a series of interfaces for front-end calling to realize functions such as saving documents, jumping paragraphs, modifying styles, etc.
[0004] However, the integration methods of the document editor component in the prior art are inconsistent between different front-end frameworks, the interfaces are complex and lack unified encapsulation, and developers need to deeply understand the configuration structure, event mechanism and underlying interface documents of the document editor component, resulting in low development efficiency. SUMMARY
[0005] The embodiments of the present application provide an integration and encapsulation method, device and medium based on a front-end document editing plug-in, which are used to solve the technical problem that the integration methods of the document editor component in the prior art are inconsistent between different front-end frameworks, the interfaces are complex and lack unified encapsulation, and developers need to deeply understand the configuration structure, event mechanism and underlying interface documents of the document editor component, resulting in low development efficiency.
[0006] The embodiments of the present application adopt the following technical solutions:
[0007] The embodiments of the present application provide an integration and encapsulation method based on a front-end document editing plug-in. The method comprises the following steps: generating a plug-in initialization configuration according to configuration parameters corresponding to a configuration interface object; initializing and loading based on the plug-in initialization configuration, constructing and mounting a document editing plug-in instance; determining function interfaces in the document editing plug-in, and uniformly encapsulating the function interfaces to call the function interfaces in response to a trigger mechanism; encapsulating an event callback registration mechanism, automatically calling corresponding callback functions in a preset event type stage to synchronize business logic and the state of the document editing plug-in; and encapsulating the document editing plug-in as a general component to realize cross-front-end framework adaptation.
[0008] In an implementation manner of the present application, the plug-in initialization configuration is generated according to the configuration parameters corresponding to the configuration interface object, specifically including: constructing the configuration interface object; wherein the configuration interface object includes different parameter categories and attribute ranges of each parameter; the parameter category at least includes one of document basic information, permission control parameter, user information, interface setting parameter and function strategy parameter; the parameters to be configured are integrated into an object in a preset format through the configuration interface object; the parameters of the object in the preset format are parsed, and the parsed parameters are converted into the plug-in initialization configuration suitable for the document editing plug-in according to the original configuration requirements of the document editing plug-in.
[0009] In an implementation manner of the present application, the plug-in initialization configuration is generated according to the configuration parameters corresponding to the configuration interface object, specifically including: constructing the configuration interface object; wherein the configuration interface object includes different parameter categories and attribute ranges of each parameter; the parameter category at least includes one of document basic information, permission control parameter, user information, interface setting parameter and function strategy parameter; the parameters to be configured are integrated into an object in a preset format through the configuration interface object; the parameters of the object in the preset format are parsed, and the parsed parameters are converted into the plug-in initialization configuration suitable for the document editing plug-in according to the original configuration requirements of the document editing plug-in.
[0010] In an implementation manner of the present application, the function interface in the document editing plug-in is determined and uniformly encapsulated, specifically including: determining the function interface in the document editing plug-in; wherein the function interface at least includes one of a document download interface, a keyword search interface, a bookmark jump interface, a paragraph positioning interface and a text highlighting interface; the function interface is encapsulated, error information containing error types and reasons is generated according to errors in the original interface calling process, so as to add an exception handling mechanism to the encapsulation method based on the error information; the encapsulated method is used as a public interface of the document editing component.
[0011] In an implementation manner of the present application, in the preset event type stage, the corresponding callback function is automatically called to synchronize the business logic with the state of the document editing plug-in, specifically including: determining the event type stage corresponding to the document editing plug-in; wherein the event type stage at least includes one of plug-in loading start and document loading completion; receiving the function reference corresponding to the event type transmitted by the business system through the configuration item, and storing the function reference and the event type stage in association; setting an event listening point at a preset process node corresponding to the document editing component, and monitoring the state of the document editing plug-in in real time, when the preset event triggering condition is met, matching the corresponding function reference in the associated storage data and triggering execution.
[0012] In an implementation manner of the present application, before automatically calling the corresponding callback function in the preset event type stage, the method further comprises: constructing an added event registry inside the document editing component; wherein the added event registry stores the metadata of the event type through a key-value pair structure; constructing an event registration interface, receiving event metadata through the event registration interface, and updating the event metadata that meets the format condition after verification to the added event registry; setting a hook function as an extension entry of the event triggering logic in the process node corresponding to the document editing component, and connecting the added event to the state monitoring process of the document editing component through the hook function, so as to realize the binding of the triggering condition judgment and the callback triggering logic.
[0013] In an implementation manner of the present application, the document editing plug-in is encapsulated as a general component to realize cross-frontend framework adaptation, specifically including: taking the function logic corresponding to the document editing plug-in as an independent unit, excluding the code related to a specific frontend framework, and forming a reusable logic module independent of the framework; using a preset target input parameter and a preset target output event mechanism in encapsulation; constructing a lightweight component wrapping layer for each frontend framework; wherein the wrapping layer converts the preset target input parameter into a framework-compatible parameter format, maps the state change of the function logic into an event mechanism supported by the framework, and binds the life cycle hook of the framework with different stages of the function logic; the logic module is split into independently called function units to be imported as needed in a combined API or a functional component.
[0014] In an implementation manner of the present application, after the document editing plug-in is encapsulated as a general component, the method further comprises: obtaining the current terminal display environment; and adjusting the size and theme of the document editing plug-in based on the responsive layout configuration parameter and the current terminal display environment.
[0015] The embodiment of the present application provides an integration and encapsulation device based on a frontend document editing plug-in, including: at least one processor; and a memory in communication connection with the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to: generate plug-in initialization configuration according to configuration parameters corresponding to a configuration interface object; perform initialization loading based on the plug-in initialization configuration, construct and mount a document editing plug-in instance; determine a function interface in the document editing plug-in, and uniformly encapsulate the function interface to call the function interface in response to a triggering mechanism; encapsulate an event callback registration mechanism, automatically call the corresponding callback function in a preset event type stage, so that the business logic is synchronized with the state of the document editing plug-in; and encapsulate the document editing plug-in as a general component to realize cross-frontend framework adaptation.
[0016] The nonvolatile computer storage medium provided by the embodiment of the application stores computer executable instructions, and the computer executable instructions are configured to: generate plug-in initialization configuration according to configuration parameters corresponding to a configuration interface object; perform initialization loading based on the plug-in initialization configuration, construct and mount a document editing plug-in instance; determine a function interface in the document editing plug-in, and uniformly encapsulate the function interface to call the function interface in response to a trigger mechanism; encapsulate an event callback registration mechanism, automatically call a corresponding callback function in a preset event type stage, so that a business logic is synchronized with a state of the document editing plug-in; and encapsulate the document editing plug-in as a general component to realize cross-front-end framework adaptation.
[0017] The above at least one technical solution adopted by the embodiment of the application can achieve the following beneficial effects: the embodiment of the application simplifies the integration steps of the document editor plug-in through unified configuration interface and method encapsulation, a developer only needs to input a structured configuration object to complete a complex initialization and mounting process, direct operation of a bottom layer API is avoided, and development efficiency and maintainability are improved. Secondly, the embodiment of the application provides a general function interface, which is directly called by a developer, improves business reusability and expansion capability of plug-in functions, and reduces repeated development cost. In addition, the embodiment of the application adopts a framework-independent parameter input structure and a standard component encapsulation mechanism to realize seamless migration of the plug-in in multiple technology stacks, and improves flexibility of a system architecture and cross-project generality of components. BRIEF DESCRIPTION OF DRAWINGS
[0018] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the drawings needed to be used in the embodiments or prior art description will be briefly introduced. Obviously, the drawings in the following description are only some embodiments described in the present application, and other drawings can be obtained by those skilled in the art without creative labor. In the drawings:
[0019] Figure 1 A flow chart of an integration and encapsulation method based on a front-end document editing plug-in is provided for the embodiment of the present application;
[0020] Figure 2 An internal module structure diagram of a plug-in encapsulation component is provided for the embodiment of the present application;
[0021] Figure 3 A plug-in loading and initialization flow chart is provided for the embodiment of the present application;
[0022] Figure 4 A structure schematic diagram of an integration and encapsulation device based on a front-end document editing plug-in is provided for the embodiment of the present application.
[0023] Reference signs:
[0024] 200: an integration and packaging device based on a front-end document editing plug-in, 201: a processor, 202: a memory. DETAILED DESCRIPTION
[0025] The embodiment of the present application provides a method, device and medium for integrating and packaging a front-end document editing plug-in.
[0026] In order to enable personnel in the technical field to better understand the technical solutions in the present application, the technical solutions in the embodiments of the present application will be clearly and completely described in the following with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, but not all the embodiments. Based on the embodiments of the present application, all other embodiments obtained by a person of ordinary skill in the art without creative work should fall within the protection scope of the present application.
[0027] The technical solutions of the embodiments of the present application will be described in detail in the following with reference to the drawings.
[0028] Figure 1 A method for integrating and packaging a front-end document editing plug-in provided by the embodiment of the present application is shown in a flowchart as shown in the figure. Figure 1 The method for integrating and packaging a front-end document editing plug-in includes the following steps:
[0029] S101, generating plug-in initialization configuration according to configuration parameters corresponding to a configuration interface object.
[0030] In an implementation manner of the present application, a configuration interface object is constructed; wherein the configuration interface object includes different parameter categories and attribute ranges of each parameter; the parameter categories at least include one of document basic information, permission control parameters, user information, interface setting parameters and function strategy parameters. By the configuration interface object, the parameters to be configured are integrated into an object in a preset format. The object in the preset format is subjected to parameter analysis, and the analyzed parameters are converted into plug-in initialization configuration suitable for the document editing plug-in according to the original configuration requirements of the document editing plug-in.
[0031] Specifically, the embodiment of the application first defines a general configuration interface object option, the internal structure of which includes but is not limited to the following attributes: fileType: document type (docx, xlsx, pptx, etc.); title: document name; url: document address; key: unique identifier; permission parameters: such as edit (whether editable), download (whether downloadable), comment (whether commentable), print (whether printable); user information: such as user.name, user.id; language and interface settings: such as lang, theme-light, zoom; callback URL, automatic save policy, plug-in UI behavior control, etc.
[0032] In the embodiment of the application, all parameters are transmitted through a unified JSON format object, and the component automatically generates a legal OnlyOffice plug-in initialization configuration according to the object, shielding the original complex parameter structure and improving the use efficiency and security.
[0033] Further, the embodiment of the application first defines the parameter categories included in the configuration interface object and the specific attributes of each parameter, forming a structured definition. According to the defined parameter categories and attribute ranges, all parameters to be configured are integrated into a preset structured format configuration interface object. Among them, the parameters are classified by category, and the parameter values meet the attribute range requirements, and the final configuration object is used as a unified input.
[0034] Further, the embodiment of the application can also parse and verify the integrated preset format object to extract valid parameters. The object is split by parameter category, and the contents are separated, the integrity and validity of the parameters are verified, such as checking whether the mandatory items are missing and whether the parameter values meet the requirements, and fault-tolerant processing is performed on invalid parameters, such as using default values when optional parameters are missing, to ensure the accuracy of the parsing result. In addition, the embodiment of the application maps the parsed parameters to an initialization configuration that can be recognized by the plug-in according to the original configuration requirements of the document editing plug-in. The document basic information, permission control parameters, user information, interface setting parameters, and function policy parameters are respectively mapped and converted according to the format required by the plug-in, and finally a complete plug-in initialization configuration is generated, which includes all the underlying parameters required for plug-in operation, without the need for users to manually splice the original configuration structure.
[0035] S102, initializing and loading based on the plug-in initialization configuration, constructing and mounting a document editing plug-in instance.
[0036] In an implementation form of the present application, the plug-in initialization configuration is parsed, and a document editing plug-in is instantiated according to the parsed intermediate data. A plug-in container node is created at a preset position of a page; wherein the size of the plug-in container node is adaptively adjusted according to the interface configuration parameters, and a mounting space is provided for the document editing plug-in. The document editing plug-in is associated with the plug-in container node, and initialization parameters are injected; wherein the initialization parameters at least include one of a document address, user information and permission control. The instantiated document editing plug-in is rendered to the container node, the document content is loaded, and the corresponding interactive interface is displayed according to the permission parameters.
[0037] Specifically, the embodiment of the present application implements initialization loading inside the component, which is used to build and mount a document editor instance. The loading process includes: parsing the configuration items passed in by the user; creating a plug-in container node; instantiating a DocsAPI.DocEditor object (DocsAPI.DocEditor is a JavaScript object provided by ONLYOFFICE, which is used to embed and integrate the ONLYOFFICE online document editing function in a webpage); rendering the plug-in to a specified position on the page; displaying the front-end loading state, and automatically switching to an editable page after the plug-in is loaded. This process automatically encapsulates the original initialization mechanism of the plug-in, and is closely integrated with the state management system of the front-end UI framework, realizing synchronous feedback of the interface and function.
[0038] Further, the converted plug-in initialization configuration is parsed, and information related to instantiation of the document editing plug-in is extracted to form intermediate data. The intermediate data includes basic information of the document, identity information of the user, permission control rules, and interface display parameters, etc. A plug-in container node is dynamically generated in a preset mounting area on the page. The width and height of the node will be automatically adjusted according to the interface configuration parameters obtained by parsing, for example, when the interface is set to full-screen display, the container node will fill the available space; when a specified scaling ratio is set, the container size will be proportionally adapted, providing a size-adapted mounting carrier for the document editing plug-in.
[0039] Further, based on the parsed intermediate data, a document editing plug-in is instantiated, and the instance is bound to the created container node to specify the mounting target of the plug-in. At the same time, initialization parameters in the intermediate data are injected into the plug-in instance, for example, the document address is passed into the plug-in to specify the document resource to be loaded, the user information is passed in to identify the operation subject, and the permission parameter is passed in to limit the operable range of the document.
[0040] S103, determine the function interface in the document editing plug-in, and uniformly encapsulate the function interface to call the function interface in response to the trigger mechanism.
[0041] In an implementation form of the present application, a function interface in the document editing plug-in is determined; wherein the function interface at least includes one of a document download interface, a keyword search interface, a bookmark jump interface, a paragraph positioning interface, and a text highlighting interface. The function interface is encapsulated, error information including an error type and a cause is generated according to an error in a native interface calling process, and an exception handling mechanism is added to the encapsulation method based on the error information. The encapsulated method is used as a public interface of the document editing component.
[0042] Specifically, in order to improve the business integration flexibility, the present application uniformly encapsulates and exposes the function interface provided by the plug-in, including but not limited to: document download, downloading the current document to the local in a set format; keyword search, supporting finding the matching position through the keyword, returning the paragraph index and the start and end character position array; bookmark jump, jumping to the specified bookmark position; paragraph positioning, accurately jumping to the specified paragraph or paragraph position; text highlighting, highlighting the text area, supporting setting color, automatic recovery, scroll positioning and other function parameters. Through encapsulation, the external can trigger and call through the event mechanism, simplifying the integration of document functions in the business system.
[0043] Further, the embodiment of the present application also monitors the errors that may occur in the native function interface calling process inside the encapsulation method, such as bookmark nonexistence leading to jump failure, paragraph index out of range causing positioning exception, insufficient permission leading to download failure, etc. For different error types, standardized error information including the error type and the specific cause is generated to ensure that the error content is clear and identifiable. Secondly, according to the generated standardized error information, exception handling logic is added in the encapsulation method. When the native interface calling has an error, the encapsulation method will automatically capture the exception and respond through the preset processing rule, avoiding the error directly passing to the external business system to cause process interruption.
[0044] In addition, the embodiment of the present application integrates the method of completing encapsulation and adding exception handling into the public interface of the document editing component, exposes it to the outside, and allows the external business system to use these functions through the calling method provided by the component.
[0045] S104, encapsulate the event callback registration mechanism, automatically call the corresponding callback function in the preset event type stage, so that the business logic is synchronized with the state of the document editing plug-in.
[0046] In an implementation manner of the present application, an event type stage corresponding to the document editing plugin is determined; wherein, the event type stage at least includes one of plugin loading and startup, and document loading completion. A function reference corresponding to the event type passed in by the business system through the configuration item is received, and the function reference is associated and stored with the event type stage. An event listening point is set at the preset process node corresponding to the document editing component to monitor the status of the document editing plugin in real time. When the preset event trigger condition is met, the corresponding function reference is matched in the associated stored data and triggered for execution.
[0047] Specifically, to facilitate the business system to monitor the plugin status, the embodiment of the present application provides an event callback registration mechanism, including: onAppReady: called when the plugin component starts to load; onDocumentReady: triggered after the document is fully loaded; Future extensible events: such as document closing, modification detection, collaborative editing status, etc. The user passes in the corresponding function reference through the configuration item, and the component automatically triggers the callback at the appropriate lifecycle stage, reducing the coupling degree between the business code and the plugin.
[0048] Furthermore, the embodiment of the present application first sorts out the complete lifecycle of the document editing plugin from startup to operation, and clarifies the key event type stages. Secondly, the function references corresponding to the event type passed in by the business system are received, and after associating these function references with the corresponding event type stages, they are stored in the mapping relationship table inside the component to form the corresponding relationship between the event type and the function reference. An event listening point is set at the preset process node of the document editing component to monitor the status change of the document editing plugin in real time. When the plugin status meets the preset event trigger condition, the function reference corresponding to the event type is matched from the mapping relationship table, and the function is automatically executed to achieve the linkage response between the business system and the plugin status.
[0049] In an implementation manner of the present application, a new event registration table is constructed inside the document editing component; wherein, the new event registration table stores the metadata of the event type through a key-value pair structure. An event registration interface is constructed, and the event metadata is received through the event registration interface, and the event metadata that meets the format conditions after verification is updated to the new event registration table. A hook function is set at the process node corresponding to the document editing component as the extension entry of the event trigger logic, and the new event accesses the status monitoring process of the document editing component through the hook function to achieve the binding of the trigger condition determination and the callback trigger logic.
[0050] Specifically, a registry is created within the document editing component to store newly added event information. This registry uses a key-value pair structure for data management. The key is a unique identifier for the event type, ensuring the uniqueness of each event type; the value is metadata for the event type, including information such as the event's trigger conditions, the structure of the passed parameters, and the event level. Initially, this registry only reserves storage space, awaiting the filling of metadata for subsequent newly added events. This embodiment also provides an event registration interface as an entry point for external systems to add new events to the component. When an external system needs to register a new event, it passes event metadata containing the event's unique identifier, trigger conditions, parameter structure, etc., through this interface. After receiving the metadata, the component automatically verifies whether its format conforms to a preset specification. For metadata that passes verification, it updates the new event registry, completing the registration of the new event type; for metadata that fails verification, it returns a format error message, ensuring that the event metadata stored in the registry has a uniform and valid format.
[0051] Furthermore, hook functions are set at key process nodes in the document editing component. These hook functions serve as extended entry points for the new event triggering logic. When a new event needs to be associated with specific plugin behaviors, these hook functions connect the new event to the component's state monitoring process. Even further, based on the triggering conditions in the new event's metadata, the component automatically determines that the event needs to be triggered when the hook function detects that the plugin state meets those conditions. It then finds the corresponding callback function reference in the new event registry, completing the binding between the triggering condition determination and the callback triggering logic, thereby implementing the new event's response mechanism within the component.
[0052] S105. Encapsulate the document editing plugin as a general component to achieve cross-frontend framework adaptation.
[0053] In one implementation of this application, the functional logic corresponding to the document editing plugin is treated as an independent unit. Code related to a specific front-end framework is filtered out, forming a reusable logic module independent of the framework. Pre-defined target input parameters and pre-defined target output event mechanisms are used in the encapsulation to build a lightweight component wrapper layer for each front-end framework. This wrapper layer converts the pre-defined target input parameters into a framework-compatible parameter format, maps the state changes of the functional logic to event mechanisms supported by the framework, and binds the framework's lifecycle hooks to different stages of the functional logic. The logic module is split into independently callable functional units for on-demand import and reuse in composite APIs or functional components.
[0054] Specifically, considering the diversity of the front-end ecosystem, this embodiment encapsulates the document editing plugin as a generic component, using standard input parameters and output event mechanisms within the encapsulation. This enables: a unified calling method; generic lifecycle hook integration; and the abstraction of plugin functionality into reusable logical units that can be used in composable APIs or functional components. Through a framework-independent encapsulation strategy, the plugin's portability and extensibility across different systems are improved.
[0055] Furthermore, this embodiment extracts the functional logic of the document editing plugin into an independent unit, removing all code related to a specific front-end framework. This ensures that the logical unit relies only on native syntax and the plugin's own interface, ultimately forming an independent logical module that can be used across different front-end frameworks. Secondly, a unified pre-defined target input parameter system is used, covering document configuration, permission settings, interface parameters, etc., with parameter names and structures remaining consistent across various front-end frameworks. Simultaneously, pre-defined target output events are defined, including status feedback such as plugin loading status, document readiness, and function execution results. Event names and parameter formats are unified, ensuring consistent input and output methods when different frameworks call components.
[0056] Furthermore, lightweight component wrapper layers are built for front-end frameworks such as Vue, React, and Angular. These wrapper layers convert pre-defined target input parameters into a framework-compatible format, map state changes of functional logic to framework-supported event mechanisms, and bind framework-specific lifecycle hooks to the initialization, execution, and destruction phases of functional logic. Framework-independent logic modules are broken down into multiple independently callable units based on their functional responsibilities. Each unit has independent input and output interfaces, supporting on-demand import and reuse in composable APIs or functional components without depending on complete components.
[0057] In one implementation of this application, the components in this embodiment support configuration of attributes such as width, height, and scaling ratio, automatically adapting to different terminal display environments (PC, tablet, embedded page, etc.). Furthermore, it supports theme switching (such as light, dark, and contrast themes) to meet accessibility or brand consistency requirements.
[0058] Figure 2 This application provides an embodiment of a plug-in encapsulation component's internal module structure diagram, such as... Figure 2 The plugin encapsulation component includes a configuration module, an initialization module, a method interface module, and a style adaptation module, clearly demonstrating the division of responsibilities among the various functional modules within the front-end component.
[0059] Figure 3 A flowchart of plugin loading and initialization provided for embodiments of this application is shown below. Figure 3As shown, the plugin loading and initialization process includes: loading the document, initializing the plugin, obtaining the configuration, setting up the listener, initializing the editor, and rendering the document, clearly demonstrating the management mechanism of the plugin lifecycle.
[0060] Figure 4 This is a schematic diagram of the structure of an integrated and packaged device based on a front-end document editing plugin, provided as an embodiment of this application. For example... Figure 4 As shown, the integration and encapsulation device 200 based on the front-end document editing plugin includes: at least one processor 201; and a memory 202 communicatively connected to the at least one processor 201. The memory 202 stores instructions executable by the at least one processor 201. These instructions, when executed by the at least one processor 201, enable the at least one processor 201 to: generate a plugin initialization configuration based on the configuration parameters corresponding to the configuration interface object; perform initial loading based on the plugin initialization configuration, constructing and mounting a document editing plugin instance; determine the functional interfaces in the document editing plugin and encapsulate them uniformly so that the functional interfaces can be called in response to a trigger mechanism; encapsulate an event callback registration mechanism, automatically calling the corresponding callback function during a preset event type phase to synchronize the business logic with the state of the document editing plugin; and encapsulate the document editing plugin as a general component to achieve cross-front-end framework adaptation.
[0061] This application provides a non-volatile computer storage medium storing computer-executable instructions. These instructions are configured to: generate a plugin initialization configuration based on configuration parameters corresponding to a configuration interface object; perform initialization loading based on the plugin initialization configuration, constructing and mounting a document editing plugin instance; determine the functional interfaces in the document editing plugin and uniformly encapsulate them for invocation in response to a trigger mechanism; encapsulate an event callback registration mechanism to automatically call the corresponding callback function during a preset event type phase, synchronizing business logic with the state of the document editing plugin; and encapsulate the document editing plugin as a general component to achieve cross-frontend framework adaptation.
[0062] The various embodiments in this application are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the embodiments of apparatus, devices, and non-volatile computer storage media are basically similar to the method embodiments, so the descriptions are relatively simple; relevant parts can be referred to the descriptions of the method embodiments.
[0063] The above descriptions are merely embodiments of this application and are not intended to limit the scope of this application. For those skilled in the art, various modifications and variations can be made to the embodiments of this application. These modifications or substitutions do not cause the essence of the corresponding technical solutions to depart from the spirit and scope of the technical solutions in the embodiments of this application.
Claims
1. A method for integration and encapsulation of front-end document editing plug-ins, characterized in that, The method comprises: According to the configuration parameters corresponding to the configuration interface object, the plug-in initialization configuration is generated; Based on the plug-in initialization configuration, the initialization loading is carried out, the document editing plug-in instance is constructed and mounted; Determine the function interface in the document editing plug-in, and uniformly encapsulate the function interface to call the function interface under the condition of responding to the trigger mechanism; Encapsulate the event callback registration mechanism, automatically call the corresponding callback function in the preset event type stage, so that the business logic is synchronized with the state of the document editing plug-in; The document editing plug-in is encapsulated as a general component to realize cross-front-end framework adaptation.
2. The method of integrating and packaging front-end document editing plug-ins according to claim 1, wherein, According to the configuration parameters corresponding to the configuration interface object, the plug-in initialization configuration is generated, which specifically comprises: The configuration interface object is constructed; wherein the configuration interface object comprises different parameter categories and attribute ranges of each parameter; the parameter categories at least include one of document basic information, permission control parameter, user information, interface setting parameter and function strategy parameter; The parameters to be configured are integrated into an object of a preset format through the configuration interface object; The parameters of the object of the preset format are parsed, and the parsed parameters are converted into the plug-in initialization configuration suitable for the document editing plug-in according to the original configuration requirements of the document editing plug-in.
3. The method of integrating and packaging front-end document editing plug-ins as claimed in claim 1, wherein, Based on the plug-in initialization configuration, the initialization loading is carried out, the document editing plug-in instance is constructed and mounted, which specifically comprises: The plug-in initialization configuration is parsed, and the document editing plug-in is instantiated according to the parsed intermediate data; The plug-in container node is created in the page preset position; wherein the size of the plug-in container node is adaptively adjusted according to the interface configuration parameter, and the mounting space is provided for the document editing plug-in; The document editing plug-in is associated with the plug-in container node, and the initialization parameters are injected; wherein the initialization parameters at least include one of document address, user information and permission control; The instantiated document editing plug-in is rendered to the plug-in container node, the document content is loaded, and the corresponding interaction interface is displayed according to the permission parameter.
4. The method of integrating and packaging front-end document editing plug-ins as claimed in claim 1, wherein, The function interface in the document editing plug-in is determined, and the function interface is uniformly encapsulated, which specifically comprises: The function interface in the document editing plug-in is determined; wherein the function interface at least includes one of document download interface, keyword search interface, bookmark jump interface, paragraph positioning interface and text highlighting interface; The function interface is encapsulated, error information containing error type and reason is generated according to the error in the original interface calling process, and an exception handling mechanism is added to the encapsulation method based on the error information; The encapsulated method is used as the public interface of the document editing component.
5. The method of integrating and packaging front-end document editing plug-ins as claimed in claim 1, wherein, In the preset event type stage, the corresponding callback function is automatically called to synchronize the business logic with the state of the document editing plug-in, which specifically comprises: The event type stage corresponding to the document editing plug-in is determined; wherein the event type stage at least includes one of plug-in loading start and document loading completion; The receiving service system stores the function reference corresponding to the event type stage by configuring the function reference corresponding to the event type stage. The document editing component sets an event listening point in the preset process node corresponding to the document editing component, and monitors the state of the document editing plug-in in real time. When the preset event triggering condition is met, the corresponding function reference is matched in the associated stored data and triggered for execution.
6. The method of integrating and packaging front-end document editing plug-ins as claimed in claim 1, wherein, Before the automatic calling of the corresponding callback function in the preset event type stage, the method further comprises: An added event registry is constructed inside the document editing component; wherein the added event registry stores the metadata of the event type through a key-value pair structure; An event registration interface is constructed, through which event metadata is received, and the event metadata that meets the format condition after verification is updated to the added event registry; A hook function is set in the process node corresponding to the document editing component as an extension entry of the event triggering logic. The added event accesses the state monitoring process of the document editing component through the hook function to realize the binding of the triggering condition judgment and the callback triggering logic.
7. The method of integration and encapsulation of front-end document editing plug-ins, according to claim 1, wherein, The document editing plug-in is encapsulated as a general component to realize cross-front-end framework adaptation, specifically including: The function logic corresponding to the document editing plug-in is taken as an independent unit, and the code related to a specific front-end framework is screened out to form a reusable logic module independent of the framework; A preset target input parameter and a preset target output event mechanism are used in encapsulation; A lightweight component wrapping layer is constructed for each front-end framework; wherein the wrapping layer converts the preset target input parameter into a framework-compatible parameter format, maps the state change of the function logic into a framework-supported event mechanism, and binds the life cycle hook of the framework with different stages of the function logic; The logic module is split into an independently callable function unit to be imported as needed in a combined API or a functional component.
8. The method of integrating and packaging front-end document editing plug-ins according to claim 1, wherein, After the document editing plug-in is encapsulated as a general component, the method further comprises: Obtaining the current terminal display environment; Based on the responsive layout configuration parameters and the current terminal display environment, the size and theme of the document editing plug-in are adjusted.
9. An integration and packaging device based on a front-end document editing plug-in, characterized in that, The device comprises a memory for storing computer program instructions and a processor for executing the program instructions, wherein when the computer program instructions are executed by the processor, the device is triggered to execute the method of any one of claims 1-8.
10. A non-transitory computer storage medium storing computer-executable instructions, the computer-executable instructions comprising instructions for: receiving a request to access a file; determining whether the file is stored in a cache; and in response to determining that the file is stored in the cache, providing access to the file from the cache. The computer executable instructions can execute the method of any one of claims 1-8. The computer executable instructions can execute the method of any one of claims 1-8.