question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Load external css in editor

See original GitHub issue

hello 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:closed
  • Created 4 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
pouyamiralayicommented, Mar 12, 2020

@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:

editor.addComponents(
  `
     <style> div { background: teal} </style>
  `
)

Cheers!

1reaction
pouyamiralayicommented, Mar 10, 2020

@micker you must include them like this:

    canvas: {
        styles: ['bundle1.css', 'bundle2.css'],
        scripts: ['bundle1.js', 'bundle2.js'],
    },

I do not see the canvas object in your setup. Cheers!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found