Issue #2772💬 AnsweredOpened May 13, 2020by Mohsen-Khakbiz0 reactions

Loading scripts/css to the canvas depending on traits

快速解答by artf

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

Read full answer below ↓

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. 1

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 2@2x

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)

artfJune 5, 2020

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.