[Question] - How to import styles from <link> to be rendered when dragging block to canvas
Question
My situation:
I'm slowly importing some of my custom made UI components in ReactJS to GrapesJS.
Now, I am able to render the component properly by integrating it with Backbone.
But my question is, can I use <link tags to download my own custom styles, so that I can see them properly within the canvas?
I have tried doing so, but to no success. I wouldn't want to manually download every CSS of my UI Library, but if I render any component, I would like that the component styling matches the <link imported styles.
Answers (3)
Hello @pouyamiralayi Thanks for the quick answer. However, this would seem that won't be sufficient, since what I'm looking for is a way to see my rendered component with the styles that I want, but also, if I export the project, to include these files
Just init the editor with your <link> inside the template, it will be loaded in the canvas and you will be able to see it in your export code
Hi @fasaas you can inject your global styles this way:
const editor = grapesjs.init({
canvas:{
styles: [ 'https://...1.css', 'https://...2.css' ]
}
})
the same goes for your custom scripts. more on this here cheers!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1875
[QUESTION] ID changes when importing html or passing html in components prop in config.
Hi, I built a component and block that I can drag and drop in the canvas. My issue is that some styles rely on the ID. I know this might no...
Issue #966
[QUESTION] How to load external CSS file into Grapes Editor?
Hey, During my editor = grapesjs.init(), I want to load an external CSS file into the canvas using @import url(...). So when I use my custo...
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...
Issue #4323
BUG: Performance issue while dragging component to canvas when you have 2k component on canvas
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Google Chrome Version 101.0.4951.41 (Officia...
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.