Grapesjs: How to load css link into the head tag?

Created on 23 Oct 2017 · 6Comments · Source: artf/grapesjs

Hello,
First of all, thanks for contributing such an amazing js framework.
I am very new to grapesjs. And github too.

canvas: {
    scripts: ['https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js']
  }

https://github.com/artf/grapesjs/wiki/Components-&-JS#template-related
According to grapesjs wiki, I load js links inside the canvas as the above codes and it works fine.

But when I try with css links like this, it doesn't work.

canvas: {
      links : ['https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'] 
  }

Some people here suggest to add those CSS links directly under the id="gjs".
I did it but what happen is if I clean the canvas, it also clean my css links and CSS doesn't work anymore.
My question is how can I load CSS link into the head tag?

outdated

Source

ronaldaug

Most helpful comment

You were almost there :)

canvas: {
    styles: ['https://...'] 
}

artf on 23 Oct 2017

👍4

All 6 comments

You were almost there :)

canvas: {
    styles: ['https://...'] 
}

artf on 23 Oct 2017

👍4

Thank you so much @artf , it works like a charm.

ronaldaug on 23 Oct 2017

👍1

the css files in canvas doesnt included in the editor.gethtml() ..how can i can i get it ?

alialrabi on 18 Nov 2018

You have to include separately while rendering, it won't come in getHtml() or anything.

coder-strange on 19 Nov 2018

👍1

Hi,
I Tried loading the external stylesheet with "styles" as mentioned above, but it has included the stylesheet into the body, and that too many times.