[Question]: loading scripts/css to the canvas depending on traits
Question
hey there. first of all thanks for this sweet lovely tool.
what I need is to load js or css files to the canvas depending on traits.
let's say I have a button with an option for making it triggering a lightbox.

now what I need is to only load the lightbox plugin's files only when this checkbox is checked.
I couldn't manage doing this from Component's "script" property. in a clean way at least

this one may work btw. but I just prefer to have something like a global list of scripts or styles, and at the end put them in my html something like canvas: { scripts: [] } but I want to be able to dynamically add to this list
Answers (1)
When you use canvas: { scripts: [], styles: [] } it appends only those files to the canvas of the editor, so you won't see them in your final code (editor.getHtml()).
There is no kind of global list but you still can tell the component to avoid including your script
const myScript = function() {
const el = this;
// ...
}
editor.Components.addType('...', {
model: {
init() {
this.on('change:my-trait-prop', this.onTraitPropChange);
this.onTraitPropChange(); // do the check on init
},
onTraitPropChange() {
const prop = this.get('my-trait-prop');
prop ? this.set({ script: myScript }) : this.set({ script: '' });
}
}
})
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2972
FEAT: Disable scripts on canvas
Hello, first of all thanks for a great tool. On my project i hit the problem where I need to disable scripts inside the editor. I found 2 s...
Issue #444
How to load css link into the head tag?
Hello, First of all, thanks for contributing such an amazing js framework. I am very new to grapesjs. And github too. https://github.com/ar...
Issue #1739
How to load dynamic CSS style(Not Link) into the Canvas head
Hi, First of all thanks for your great Work !!!!! I am trying to load a dynamic style into the canvas head. Is there any way to load dynami...
Issue #1888
[Question] Add custom html inside canvas
Hi there, I'm using grapes to export a custom json with all the information i need, instead of HTML and CSS. For doing that I'm parsing the...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.