CDN And Script on Editor

[templeajuzie]

I am currently working on a NextJS project where I’m using GrapesJS as the core tool for building templates and I am impressed with the flexibility and power grapejs offers.

However, I’ve encountered a challenge while integrating CDN into GrapesJS, for example, preline script cdn. I would appreciate your guidance on the correct way to add this feature.

i tried this method,
const editor = grapesjs.init({
fromElement: true, // Allow components from HTML
container: "#editor",
canvas: {
scripts: [
{
src: "https://cdn.jsdelivr.net/npm/preline@2.5.0/dist/preline.min.js",
type: "module",
},
],
},
})

and but method,
const editor = grapesjs.init({
fromElement: true, // Allow components from HTML
container: "#editor",
canvas: {
scripts: [
"https://cdn.jsdelivr.net/npm/preline@2.5.0/dist/preline.min.js",
],
},
})

but the functionality is not working.

Also when I inject a script through block manager, that shows alert("hello") when draged to the editor, it will work, but when I save the data to my db and refresh the editor, the loaded data coming into the canvas will no longer have the functionality of the alert.

[artf]

The canvas.scripts are indeed only for loading stuff inside the editor canvas. If you need the same scripts in your final exported code you have to include them manually or implement component related JS (docs)

[templeajuzie]

I understand the part that i have to add them manually in my final export, but the cdn I loaded to the canvas is not even working, but when I add the cdn after exporting the code, the javascript functionality starts working.

[artf]

share a reproducible live demo, so it's easier to debug what is not working.

[templeajuzie]

Here's a live demo

vid1.mp4