A method for integrating external plug-ins into CMS

Abstract

A method for integrating external plug-ins into a CMS, including the following: plug-in integration process: initializing the plug-in environment; sharing state and tool classes: using vue3-sfc-loader to share the plug-in's store state and tool classes with the main editor; plug-in registration and installation: users manage plug-ins through simple installation and uninstallation operations; after installing the plug-in, the system automatically registers the plug-in with the main editor; data transfer and page integration: developer support: developers use the development platform to implement a complete set of plug-in development, submission for review, and review and online release processes; plug-in operation process: 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; state synchronization and data preservation: the plug-in shares state with the main editor; user operations on the plug-in are saved to the page data in real time.

Description

Technical Field

[0001] The present invention belongs to the field of computer website construction, and in particular relates to a solution for integrating external plug-ins 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-type 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 directed to a website that is installed with a device for an integrated SEO method acting on a CMS system, and analyzes the website structure, keyword density, website sitemap, robots, URL, page structure, and other aspects, and proposes an SEO solution through five 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 five dimensions will be performed on the web pages crawled by the website; many information-type 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 models 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. Complete the plug-in online review process to achieve seamless updates for users.

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

[0009] The purpose of this invention is to address the flexibility and efficiency issues faced by CMS systems when processing large amounts of content by integrating external plug-ins. By using the vue3-sfc-loader plug-in, state sharing and tool class sharing between the plug-in and the main editor are achieved, providing a more flexible and convenient operating mode. vue3-sfc-loader is a solution for loading external Vue files. This solution allows the creation of plug-ins within existing development environments, such as commonly used quick contacts and special effects, to be loaded as such plug-ins.

[0010] The technical solution of this invention is to realize the state sharing and tool class sharing between the plugin and the main editor by using the vue3-sfc-loader plugin, providing a more flexible and convenient operation mode. It mainly involves two core processes: plugin integration process and plugin 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 with the main editor.

[0015] (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. 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 global object method built into GrapesJS, the plug-in type is added to the global object. After the plug-in is edited, the edited JSON data will be stored on 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 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 plugin development, submission for review, and online release. After each plugin 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. User operations on the plug-in are saved to the page data in real time.

[0020] (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.

[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 plug-in installation, uninstallation, update, and configuration.

[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, providing users with a more convenient operating experience.

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

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

[0027] 2. Improved system efficiency: Traditional systems often require repeated operations on all content when processing large amounts of content, resulting in a waste of system resources. This invention uses a plug-in approach to break down the main project content into independent plug-in modules, which are then loaded and operated only when necessary. This on-demand loading mechanism significantly reduces repetitive work in the system, reduces server operating pressure, and improves overall system efficiency.

[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 function expansion, thereby enhancing the flexibility and scalability of the system. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] The above and other objects, 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 flowchart 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 with reference to the accompanying drawings and examples. It should be understood that the implementation examples described here 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. 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, the installation status of all plug-ins on the page is read and the file addresses of all plug-ins related to the page are obtained.

[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 from Vue files, getting the style of the Vue file and manually inserting it into the page head. The CSS in the plugin is manually inserted into the page using the style tag, and the JS is read and loaded onto the page using a fetch network request.

[0039] The vue3-sfc-loader plugin parses .vue files and dynamically inserts components during browser runtime, enabling complete .vue file parsing and construction. GrapesJS includes a variety of commonly used basic components, such as text, images, buttons, and videos, and supports custom components. Users can drag and drop these components to build page layouts. Users can create custom components based on their needs and add them to the editor using the editor.DomComponents.addType() method. Custom components can contain complex HTML structures and interaction logic, tailored to specific functional requirements.

[0040] CSS is a language that defines style constructs such as fonts, colors, and positioning. It's used to describe how information on a web page is formatted and displayed. CSS styles can be stored directly within an HTML page or in a separate style sheet file. Either way, the style sheet contains rules for applying styles to a specific type of element.

[0041] Step 4: Develop the plugin, including all CSS, such as animations, 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 on the passed in object. Use the passed in object to add special effect settings to specific elements on the page. For example, if you need to set a floating animation for a button on the page in the plugin, you can directly use the passed in grapesJS global object and operate the animation class name of the button. After the plugin is developed, it can be submitted for review.

[0042] Step 5: The plugin registers a component with GrapesJS. Once inserted into a page, all plugin settings can be saved directly on the page using the page's JSON storage mechanism. Plugin registration relies on the GrapesJS component model. The core concept of this integration approach is to treat every element on the page as a component, including the plugin itself. Using the global object methods provided by GrapesJS, plugin types can be registered with the global object. After editing a plugin, the editor stores the generated JSON data in the plugin type's component. The main editor can access the plugin type's JSON data array through GrapesJS global object methods, enabling data persistence. When the page is refreshed or reloaded, the JSON data is reparsed and rendered into the corresponding GrapesJS object. Furthermore, plugins can access their configuration options and other relevant data through the global GrapesJS object, completing plugin registration and initialization. This approach not only ensures seamless plugin integration 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 principles 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 plugin environment: Based on the existing CMS editor and plugin development platform, configure the vue3-sfc-loader plugin environment to support dynamic loading of single-file components; 2) Shared state and utility classes: Use vue3-sfc-loader to share the plugin's store state and utility classes with the main editor to ensure seamless collaboration between the plugin and the main CMS editor system. 3) Plugin registration and installation: Users manage plugins through simple installation and uninstallation operations. After installing a plugin, the system will automatically register the plugin with 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 GrapesJS component mode; 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 again, the plugin setting data will 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 online review; After each plug-in update, users do not need to reinstall it, just refresh the page to use the latest version; Plugin operation process: 1) Dynamic loading and unloading: Users dynamically load plug-ins when needed, and the system automatically parses the plug-in's JSON data and integrates its functions into the current page; 2) State synchronization and data preservation: The plug-in shares state with the main editor to ensure data consistency during operation; user operations on the plug-in are 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, wherein: Dynamic loading and state sharing of plug-ins are achieved through vue3-sfc-loader.

3. The method for integrating external plug-ins into a CMS according to claim 1, wherein: Step 1: The developer creates a special effect plug-in on the development platform; when the plug-in is loaded on the CMS website construction page, the installation status of all plug-ins on the page is read and the file addresses of all plug-ins are obtained; Step 2: Get all the file paths of the plug-in through network request; Step 3: Use vue3-sfc-loader to load the plug-in file and call the unified plug-in initialization; pass all the system store states and required method names to the plug-in through this main entry method to achieve state sharing; The vue3-sfc-loader plugin file itself supports reading template, script, and style tags in the vue file, getting the style of the vue file and manually inserting it 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 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 plugin registers a component with GrapesJS. After being inserted into a page, all plugin settings are saved directly on the page through the page's JSON storage mechanism. Plugin registration relies on the GrapesJS component model. Using the global object method provided by GrapesJS, we can register plugin types with the global object. After the plugin is edited, 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, the JSON data will be re-parsed and rendered into the corresponding GrapesJS object.

Images