Dynamically adding plugins/components? #5996

addlistener · 2024-07-07T12:09:40Z

addlistener
Jul 7, 2024

Let's say I have

const ComponentA = (editor) => editor.DomComponents.addType(...)
const ComponentB = (editor) => editor.DomComponents.addType(...)
...

I checked the docs https://grapesjs.com/docs/modules/Plugins.html#basic-plugin you can only add plugins when calling init. Is there a way we can do this dynamically? editor.addPlugin(...).

The use case will be supporting dynamic components.

Answered by artf

The plugin is usually a simple function, so you could call it by passing the current editor instance and the options you need.

import someGjsPlugin from 'someGjsPlugin';
// ...
const editor = grapesjs.init({...});
// ...
someGjsPlugin(editor, { ...plugin options.. });

artf · 2024-07-12T12:38:26Z

The plugin is usually a simple function, so you could call it by passing the current editor instance and the options you need.

import someGjsPlugin from 'someGjsPlugin';
// ...
const editor = grapesjs.init({...});
// ...
someGjsPlugin(editor, { ...plugin options.. });

3 replies

When I try this it breaks the block manager set in the javascript file.

Hi
You'll probably need a reproductible demo, on codepen for example

Please don't double post
i will try to answer here: #6383