Issue #523Opened November 15, 2017by tldrjumps2 reactions

[Question/Enhancement] How to Export CSS linked in Canvas Styles properties

Question

How to export the HTML/CSS in the code view / download as zip. With the stylesheets in styles.css referenced in the grapesjs canvas, but not the unused, actually i am fine with all the styles.css stylesheet, for simple API access for export.

If I add the stylesheet in init

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

    bm.add('Table', {
      label: 'Table',
      category: 'Table',
      content: {
        type: 'table',
        classes: ['table-components'],
        columns: 2,
        rows: 1, 
        //style: {width: '100%', border: '1px solid black'}
      },
    });

Yea, Table 😋 Thanks for the good work, let us worry about this easy issue and documenting or leave trace in issue list. Artf should focus more on other amazing features.

Answers (3)

artf• January 25, 20181 reactions

@chiqui3d definitely it shouldn't be added to what is used for storing otherwise you will add those styles twice.

artf• July 14, 20191 reactions

The issue I have is that when I try to export the code using the grapesjs export plugin nothing referenced inside canvas is exported.

@Yakito For now, those scripts/styles should be included manually, you can use root option from the export plugin:

root: {
  ...
  'index.html': ed => `
	<head>
		<link href="${myStyle}" .../>
		<script src="${myScript}" .../>
	</head>
	<body>${ed.getHtml()}</body>
  `
}
artf• November 15, 20170 reactions

Hi @tldrjumps I'm not sure if I properly got your problem. You can simply get all the CSS with editor.getCss(), which also tries to optimize it by removing classes without components. Styles inserted via canvas.styles option are just injected inside the canvas but actually, the editor doesn't see their rules

Related Questions and Answers

Continue research with similar issue discussions.

Issue #1888

[Question] Add custom html inside canvas

Hi there, I'm using grapes to export a custom json with all the information i need, instead of HTML and CSS. For doing that I'm parsing the...

3 answersUpdated April 2, 2020

Issue #822

[QUESTION] How to get the html and css code in view code tool?

or how to get all the html code and css so that I could save it in my database. Or there is already a functionality in the documentation? y...

3 answersUpdated September 18, 2019

Issue #1897

[Question] view vs code

Hello...and sorry for my english! First of all, congratulations for this fantastic framework. I'm trying to use GrapeJS to create my own wo...

3 answersUpdated March 27, 2020

Issue #1526

[QUESTION] how to make fullscreen command

Hi, unfortunately I do not find documentation and can't manage to get it understand from code: I know there is a built-in command 'fullscre...

3 answersUpdated January 1, 2020

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.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders