Load external css in editor
See original GitHub issuehello i search a lot but i didn’t find how to load a css file inside editor My code regards of other issue i add styles: ['http://localhost/flexidev/templates/shaper_helix3/css/template.css\‘] no real error but no style … what i forgot ? `function fclayout_init_builder(editor_sfx, element_id) { /** * Lets say, for instance, you start with your already defined HTML template * and you'd like to import it on fly for the user */ var LandingPage = { html: '
This is the layout area, you may drag and drop to add your blocks here, to load flexicontent field use data panel to insert flexicontent block
', css: null, components: null, styles: ['http://localhost/flexidev/templates/shaper_helix3/css/template.css\’], }; var lp = \'./img/\';
var plp = \'//placehold.it/350x250/\';
var images = [
lp+\'flexicontent.png\',
lp+\'grapesjs-logo-cl.png\'
];
var editor = grapesjs.init({
avoidInlineStyle: false,
// dragMode: \'absolute\',
// Indicate where to init the editor. You can also pass an HTMLElement
// Size of the editor
height: \'100%\',
container: \'#gjs_\' + editor_sfx,
// We use `fromElement` or `components` to get the HTML
// `components` accepts an HTML string or a JSON string of components
// Here, at first, we check and use components if are already defined
// otherwise the HTML string gonna be used
fromElement: 0,
components: LandingPage.components || LandingPage.html,
// We might want to make the same check for styles
style: LandingPage.style || LandingPage.css,
protectedCss: \'\',`
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (1 by maintainers)
Top Results From Across the Web
How to add CSS - W3Schools
External CSS. With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML...
Read more >HTMLG Editor - Load External CSS File
Load external file. Input field – Enter the absolute URL of your CSS file and press the triangle icon to load it. You...
Read more >How to Link CSS to HTML Files in Web Development - Hostinger
In this detailed guide, you'll learn how to link a CSS style sheet to HTML and the many reasons why you would want...
Read more >Editing external CSS - Stack Overflow
Into your main.css file you can start with adding some minimum properties like : body { background-color: #yourHexCodeColor; font-family: ...
Read more >How to Include CSS in HTML Pages - Tutorial Republic
The @import rule is another way of loading an external style sheet. The @import statement instructs the browser to load an external style...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@micker if your
customCss
is a url, that’s the way to include it. but if you you have some styles that you want to include by hand, here is the procedure:Cheers!
@micker you must include them like this:
I do not see the
canvas
object in your setup. Cheers!