Is it possible to include an external stylesheet in the grapesjs canvas?

Answers (3)

roytang• October 21, 20170 reactions

Code SnippetTEXT

Please ignore. I ended up injecting the stylesheet link using javascript into Grapes' canvas' iframe

// insert external stylesheet into the grapesjs window
var iframes = Utilities_GetElementsByClass("gjs-frame", "IFRAME", document.body);
for (var i=0; i<iframes.length; i++) {
  var iframe = iframes[i];
  var doc = iframe.contentDocument;
  var element = document.createElement("link");
  element.setAttribute("rel", "stylesheet");
  element.setAttribute("type", "text/css");
  element.setAttribute("href", "/CSS/Website.css");
  doc.getElementsByTagName("head")[0].appendChild(element);
}

artf• October 23, 20170 reactions

You can inject scripts/styles via canvas config option

const editor = grapesjs.init({
  ...
  canvas: {
    styles: ['https://...', '...'],
    scripts: ['https://...'],
  }
});

roytang• October 23, 20170 reactions

Thanks!

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Is it possible to include an external stylesheet in the grapesjs canvas?

Question

Answers (3)

Related Questions and Answers

[QUESTION] How to load external CSS file into Grapes Editor?

GrapeJs framework breaks on adding external stylesheet

When the component's view modifies the HTML, text components are no longer editable

[QUESTIONS] Change canvas style

Paid Plugins That Match This Issue

Browse Plugin Categories