Add plugins after load?

[clonefunnels]

I'm using a version of grapesjs that was already built, but there is no option to add the plugins. Everything is built right into the grapesjs.js file.

I know that normally I'd add a plugin like this:

const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: false,
plugins: ['@silexlabs/grapesjs-fonts'],
});

But I cannot do it, and when I try to manually add the plugin inside the javascript file it doesn't work.

[lexoyo]

Hi
Could you provide a reproductible demo on codepen or something like that ?

[clonefunnels]

I'm not sure how I'd be able to do that. I'm using this:

https://github.com/allamo123/laravel-grapes

[clonefunnels]

The problem is that he has all of the configurable options inside the javascript file and it's all bunched together into one line.

[lexoyo]

Ah ok

when I try to manually add the plugin inside the javascript file it doesn't work.

What is the bug exactly ?

The problem is that he has all of the configurable options inside the javascript file and it's all bunched together into one line.

You mean the plugin ? Why is it a problem ?

[clonefunnels]

The bottom line is that I need to know if it's possible to dynamically insert plugins or not.

Plugins like this one: plugins: ['@silexlabs/grapesjs-fonts'],

[clonefunnels]

The problem is that I cannot add plugins into his javascript file. So I need to be able to do it on the php page.

[clonefunnels]

Here's the file I'm referring to:

https://github.com/allamo123/laravel-grapes/blob/main/resources/assets/js/PageBuilder.js

[clonefunnels]

When I try to do this, it breaks the block manager and all other custom scripts I set:

import @silexlabs/grapesjs-fonts from '/js/fontplugin.js';

[clonefunnels]

Maybe you can tell me what to do based on this code:

var t=this,n=arguments;return new Promise((function(r,i){
var o=e.apply(t,n);function a(e){Xe(o,r,i,a,s,"next",e)}function s(e){Xe(o,r,i,a,s,"throw",e)}a(void 0)}))}}
var Ze,_e=t().init({container:"#gjs",height:"657px",width:"100%",storageManager:{id:"gjs-",type:"remote",stepsBeforeSave:0,autosave:!1,autoload:!1,storeComponents:!0,storeStyles:!0,storeHtml:!0,storeCss:!0},plugins:[i(),a(),l()],pluginsOpts:{},canvas:{styles:["https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"],scripts:["https://code.jquery.com/jquery-3.3.1.slim.min.js","https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js","https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"]}});

[clonefunnels]

plugins:[i(),a(),l()],pluginsOpts:{},

[lexoyo]

This code is bundle, it doesn't mean anything :(

[lexoyo]

Oh but your import is all strange

import @silexlabs/grapesjs-fonts from '/js/fontplugin.js';

Ask a gpt you'll see