How to load external css file on editor

[narraressan]

Hi. Thank you for solving my problems on the editor this past few days,

But while I am finalizing my simple work, I decided to use skeleton css, but I can't figure out how to load css file on the editor? (inside the iframe) is it possible?

[narraressan]

Well, I think I found a work around, I am not sure if it works 100%

I added to editor using setComponent...

[allmonday]

Maybe you can append it in head of iframe.

var iframe = editor.Canvas.getFrameEl();
iframe.contentDocument.head.appendChild(/* your link tag here */);

[artf]

Actually, setComponents is the way to go. The problem is that it overwrites the whole template. I think I'll add addComponents on the next release but it'll be basically the same as:

editor.getComponents().add('<link rel="stylesheet" href="...">');

@allmonday your snippet actually will add the link tag but the problem it won't update the template state, so when you'll call editor.getHtml() you won't see it inside the code.

[prtjack]

hey! @artf How can i save an existing template with its own external CSS properties? I tried the both options:

1. By placing entire HTML and CSS under the id="gjs".
2. By using editor.setComponents() i can achieve my purpose but its very complicated to minify the whole CSS and place under editor.setStyle().

So what is the best option to export an existing template with it's CSS.

[artf]

Hi @prtjack can you elaborate why the 1st option is not working? Can you post some code?

[prtjack]

Hey! @artf Sorry for this extremely late reply. I wanted to load my existing templates dynamically. So, what is the best workaround for me?

[octavebenil]

Hey, you can use canvas property like this : var editor = grapesjs.init({ ...... canvas: { scripts: ['https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'], styles: ['https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'] } })

[likhamahudda]

@octavebenil Thanks very much its working fine. canvas: { scripts: ['https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'], styles: ['https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'] }

[gitwithsarthak]

Hey, you can use canvas property like this : var editor = grapesjs.init({ ...... canvas: { scripts: ['https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'], styles: ['https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'] } })

https://github.com/artf/grapesjs/discussions/3973#discussioncomment-1703718