Method for integrating external plug-in in CMS

Abstract

The invention discloses a method for integrating an external plug-in in a CMS. The plug-in integration process comprises the following steps: initializing a plug-in environment; sharing the state and the tool class: sharing the store state and the tool class of the plug-in and the main editor through the vue3-sfc-loader; plug-in registration and installation: a user manages the plug-in through simple installation and uninstallation operations; after the plug-in is installed, the system automatically registers the plug-in into the main editor; data transmission and page integration: developer support: a developer realizes a whole set of process of plug-in development, submission auditing and auditing online through a development platform; the plug-in operation process comprises the following steps: dynamic loading and unloading: a user can dynamically load a plug-in as required, and a system can automatically analyze JSON data of the plug-in and integrate functions of the plug-in into a current page; state synchronization and data storage: the plug-in and the main editor share the state; and the operation of the user on the plug-in can be stored in the page data in real time.

Description

Technical Field

[0001] The invention belongs to the field of computer website construction, and in particular relates to a solution for integrating an external plug-in into a CMS. Background Art

[0002] The software platform for building computer websites has an increasingly wide range of applications. For example, as the functions of the new version of the editor of the applicant's Leading Cloud Marketing Platform become more and more complete, the project size and page function entrances are getting larger and larger, resulting in certain bottlenecks in both the maintainability of the project and the convenience of user operation. The existing CMS has certain limitations in terms of functional expansion, especially when processing large amounts of content, the flexibility and efficiency of the system may be affected. CMS, or Content Management System (CMS), is a software system located between the WEB front end (Web server) and the back-end office system or process (content creation, editing).

[0003] CN202211304533.X discloses an SEO method and device acting on an information CMS system, including a website structure optimization method, a website link optimization method, a website page optimization method, a website keyword optimization method, and a website active submission optimization method; the present invention is aimed at a website that installs a device for an integrated SEO method acting on a CMS system, analyzes from aspects such as website structure, keyword density, website sitemap, robots, URL, and page structure, and proposes an SEO solution through 5 optimization strategies; after installing this device, a crawler will be simulated to analyze each page of the website separately, and an optimization strategy analysis of 5 dimensions will be performed on the web pages crawled by the website; many information websites, whether PGC or UGC, in order to increase the exposure of these contents, the traffic brought by search engines accounts for a relatively large proportion. Therefore, a general solution and integrated device are made for search engine optimization to facilitate the use of various CMS systems.

[0004] In order to improve the scalability and user experience of the system, integrating external plug-ins has become an effective solution. Based on the existing system, we have developed a set of external plug-in integration modes that can meet the following requirements:

[0005] 1. Developers only need to focus on the plug-in itself when developing and maintaining functions, without having to be familiar with the entire system;

[0006] 2. Users can freely choose from the plug-in market and use pluggable interactive methods to build websites;

[0007] 3. The completed plug-in online review process enables users to update without any notice.

[0008] (4) Due to the flexible plug-in nature, it is easy to control the content that different permissions see. Summary of the invention

[0009] The purpose of the present invention is to solve the flexibility and efficiency problems of the CMS system when processing a large amount of content by integrating external plug-ins. By using the vue3-sfc-loader plug-in, the state sharing and tool class sharing between the plug-in and the main editor are realized, providing a more flexible and convenient operation mode. vue3-sfc-loader is a solution for loading external vue files. Using this solution, the existing program development environment can be used to make plug-ins. For example, commonly used quick contacts, special effects, etc. can be loaded as such plug-ins.

[0010] The technical solution of the present invention is to use the vue3-sfc-loader plug-in to realize the state sharing and tool class sharing between the plug-in and the main editor, providing a more flexible and convenient operation mode. It mainly involves two core processes: plug-in integration process and plug-in operation process:

[0011] Plugin integration process:

[0012] (1) Initialize the plug-in environment: Based on the existing CMS editor and plug-in development platform, configure the vue3-sfc-loader plug-in environment to support dynamic loading of single-file components;

[0013] (2) Shared state and tool classes: Through vue3-sfc-loader, the plug-in shares the store state and tool classes with the main editor to ensure that the plug-in can work seamlessly with the CMS editor main system;

[0014] (3) Plug-in registration and installation: Users can manage plug-ins through simple installation and uninstallation operations. After installing a plug-in, the system will automatically register the plug-in in the main editor.

[0015] (4) Data transfer and page integration: After the plug-in is installed, the interactive logic between the plug-in and the page is completed through the component mode of GrapesJS. The plug-in integration of the present invention needs to rely on the component mode of GrapesJS. The principle of this component mode integration is: each component of the page, including the plug-in itself, is also a component. Through the built-in global object method of GrapesJS, the plug-in type is added to the global object. After the plug-in is edited, the edited JSON data will be stored in the component of the plug-in type. The main editor can obtain the JSON array of the plug-in type through the global object method of GrapesJS, and then save it on the page. When the page is refreshed and loaded for the second time, it is rendered into the corresponding GrapesJS object in JSON format, and the plug-in can obtain the setting items and other data through the global GrapesJS object to complete the registration of the plug-in. After the plug-in is edited, the edited JSON data will support the page saving and storage on the page through the editor. When the page is refreshed and loaded for the second time, the setting items and other data of the plug-in can be automatically read.

[0016] (5) Developer support: Developers can use the development platform to implement a complete set of processes including plug-in development, submission for review, and online review. After each plug-in update, users do not need to reinstall it, but only need to refresh the page to use the latest version.

[0017] Plugin operation process:

[0018] (1) Dynamic loading and unloading: Users can dynamically load plug-ins when needed. The system will automatically parse the plug-in's JSON data and integrate its functions into the current page.

[0019] (2) State synchronization and data preservation: The plug-in shares state with the main editor to ensure data consistency during operation. The user's operation on the plug-in will be saved to the page data in real time.

[0020] (3) Plug-in update and maintenance: Support automatic plug-in update mechanism to ensure that users always use the latest version of plug-in functions.

[0021] Specific implementation technology: Dynamic loading and state sharing of plug-ins are realized through vue3-sfc-loader.

[0022] User interaction: Provides a user-friendly plug-in management interface that supports installation, uninstallation, update, and configuration of plug-ins.

[0023] Data security and consistency: Ensure data security and consistency through state management tools.

[0024] The present invention significantly improves the flexibility and scalability of the CMS system by introducing an integration method of external plug-ins, and provides users with a more convenient operation experience.

[0025] Beneficial effects: Compared with the existing technology, its significant advantages and effects are:

[0026] 1. Simplify user operations: Traditional plug-in integration methods usually require users to manually set multiple parameters, and the operation steps are cumbersome. With the plug-in integration method of the present invention, users only need to perform simple settings during the initial installation, and subsequent plug-in operations and management will be automated. Users can easily install, uninstall, and update plug-ins without having to repeatedly set parameters, thereby significantly simplifying the operation process.

[0027] 2. Improve system efficiency: When processing a large amount of content, traditional systems often need to repeat operations on all content, resulting in a waste of system resources. The present invention decomposes the main project content into independent plug-in modules in a plug-in manner, and only loads and operates these modules when necessary. This on-demand loading mechanism greatly reduces the system's repetitive workload, reduces the operating pressure of the server, and improves the overall efficiency of the system.

[0028] 3. Reduce development costs: Since the present invention supports automatic updating and status sharing of plug-ins, new developers no longer need to be familiar with the entire CMS editing system and only need to focus on the plug-in itself.

[0029] 4. Enhance system flexibility: Users can freely select and combine plug-ins according to their own needs to achieve personalized functional expansion, thereby enhancing the flexibility and scalability of the system. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] The above and other purposes, features and advantages of the present invention will become more apparent by describing in detail the embodiments of the present invention in conjunction with the accompanying drawings, in which:

[0031] Figure 1 This is a flow chart of plug-in usage and implementation in an embodiment of the present invention. DETAILED DESCRIPTION

[0032] In order for ordinary technicians in this field to understand and implement the present invention, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the implementation examples described herein are only used to illustrate and explain the present invention, and are not used to limit the present invention.

[0033] This embodiment takes a special effect plug-in as an example to describe the plug-in integration process.

[0034] Figure 1 This is a flowchart for integrating an external plug-in in an embodiment of the present invention, and the specific steps are:

[0035] Step 1: The developer creates a special effect plug-in on the development platform. When the CMS website building page plug-in is loaded, read the installation status of all plug-ins on the page and obtain all plug-in related file addresses.

[0036] Step 2: Get all the file paths of the plug-in through network request.

[0037] Step 3: Use vue3-sfc-loader to load the plugin file and call the unified plugin initialization method. Pass all the system store states and required method names to the plugin through this main entry method to achieve state sharing.

[0038] The vue3-sfc-loader plugin file itself supports reading template, script and style tags in vue files, getting the style of vue files and manually inserting them into the page head. The css in the plugin is manually inserted into the page through the style tag, and the js is read through the fetch network request and loaded onto the page.

[0039] The vue3-sfc-loader plug-in is used to parse .vue files and dynamically insert components when the browser is running. It can realize the complete parsing and construction of .vue files. GrapesJS has built-in a variety of commonly used basic components, such as text, pictures, buttons, videos, etc., and supports custom components. Users can build page layouts by dragging these components. Users can create custom components according to their needs and add them to the editor through the editor.DomComponents.addType() method. Custom components can contain complex HTML structures and interaction logic, which are suitable for specific functional requirements.

[0040] CSS is a language that defines style structures such as fonts, colors, positions, etc. It is used to describe the way information on a web page is formatted and displayed. CSS styles can be stored directly in an HTML page or in a separate style sheet file. In either case, the style sheet contains rules for applying styles to elements of a specified type.

[0041] Step 4: Develop the plug-in, including all css, such as animation, etc., and load the css resources into the main editor. The object parameters passed in by vue3-sfc-loader can be directly obtained using requeir('params'). The object obtained by operation is the same as that used by the main editor, so all operations on the main editor need to be completed by operating the passed in object. Use the passed in object to add special effect settings to specific elements of the page. For example, if you need to set a floating animation of a button on the page in the plug-in, you can directly use the passed in grapesJS global object to operate the animation class name of the button. After the plug-in is developed, it can be submitted for review directly.

[0042] Step 5: After the plugin is inserted into the page, all plugin settings can be saved directly on the page through the JSON saving mechanism of the page. Plugin registration relies on the component model of GrapesJS. The core concept of this integration method is to treat every element on the page as a component, including the plugin itself. Using the global object method provided by GrapesJS, we can register the plugin type to the global object. After the plugin is edited, the editor will store the generated JSON data on the component of the plugin type. The main editor can access the JSON data array of these plugin types through the global object method of GrapesJS to achieve persistent storage of data. When the page is refreshed or loaded again, these JSON data will be re-parsed and rendered as the corresponding GrapesJS object. In addition, the plugin can access its configuration options and other related data through the global GrapesJS object to complete the registration and initialization of the plugin. This approach not only ensures seamless integration of the plugin, but also provides flexibility and scalability for complex page construction.

[0043] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principle of the present invention. These improvements and modifications should also be regarded as the scope of protection of the present invention.

Claims

1. A method for integrating an external plug-in into a CMS, characterized in that: Including plug-in integration process and plug-in operation process: Plugin integration process: 1) Initialize the plug-in environment: Based on the existing CMS editor and plug-in development platform, configure the vue3-sfc-loader plug-in environment to support dynamic loading of single-file components; 2) Shared state and tool classes: Through vue3-sfc-loader, the plug-in is shared with the store state and tool classes of the main editor to ensure that the plug-in can work seamlessly with the main system of the CMS editor; 3) Plug-in registration and installation: Users manage plug-ins through simple installation and uninstallation operations; after installing the plug-in, the system will automatically register the plug-in in the main editor; 4) Data transfer and page integration: After the plug-in is installed, the interaction logic between the plug-in and the page is completed through the component mode of GrapesJS; After the plugin is edited, the edited JSON data will be saved and stored on the page through the editor. When the page is refreshed and loaded for the second time, the plugin settings and other data can be automatically read; 5) Developer support: Developers use the development platform to implement a complete set of processes including plug-in development, submission for review, and review and launch; After each plug-in update, users do not need to reinstall, just refresh the page to use the latest version; Plugin operation process: 1) Dynamic loading and unloading: Users can dynamically load plug-ins when needed, and the system will automatically parse the plug-in's JSON data and integrate its functions into the current page; 2) State synchronization and data preservation: The plug-in shares the state with the main editor to ensure data consistency during operation; the user's operation on the plug-in will be saved to the page data in real time; 3) Plug-in update and maintenance: Support automatic update mechanism of plug-ins to ensure that users always use the latest version of plug-in functions.

2. The method for integrating external plug-ins into a CMS according to claim 1, characterized in that: Dynamic loading and state sharing of plug-ins are realized through vue3-sfc-loader.

3. The method for integrating external plug-ins into a CMS according to claim 1, characterized in that: Step 1: The developer creates a special effect plug-in on the development platform; when the CMS website building page plug-in is loaded, read the installation status of all plug-ins on the page and obtain all plug-in-related file addresses; Step 2: Get all the file paths of the plug-in through network request; Step 3: Use vue3-sfc-loader to load the plugin file and call the unified plugin initialization; pass all the system store states and required method names to the plugin through this main entry method to achieve state sharing; The vue3-sfc-loader plugin file itself supports reading template, script and style tags in vue files, getting the style of vue files and manually inserting them into the page head; the css in the plugin is manually inserted into the page through the style tag, and the js is read through the fetch network request and loaded onto the page; Step 4: Develop the plug-in and load the CSS resources into the main editor; pass in the object parameters through vue3-sfc-loader; use the passed in object to add special effect settings to specific elements of the page; Step 5: The plug-in registers the component to grapesJS. After being inserted into the page, all the plug-in settings are saved on the page directly through the JSON saving mechanism of the page; plug-in registration depends on the component model of GrapesJS; the global object method provided by GrapesJS, we can register the plug-in type to the global object; After the plugin editing is completed, the editor will store the generated JSON data in the plugin type component; the main editor accesses the JSON data array of these plugin types through the global object method of GrapesJS to achieve persistent storage of data; when the page is refreshed or loaded a second time, these JSON data will be re-parsed and rendered as corresponding GrapesJS objects.

Images