search

GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.37k stars 4.05k forks source link

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

Closed tldrjumps closed 6 years ago

tldrjumps commented 6 years ago

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.

artf commented 6 years ago

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

tldrjumps commented 6 years ago

Sorry for no properly discuss my use case and intented, The use case is to allow provide style from user to store the in or use with snippets block dropped.(Before the block drop) Then allow them to export the dropped block design with style.

Basic use case is use grapesjs to load articles, then allows user to select particular css file(markdown article style). Further use case that allow the user to defined style of blocks such as table, div, then exported the dynamic design of block out as complete design of their choice (They might have certain css template for some block)

artf commented 6 years ago

Well, if you want, for instance, to export the selected component HTML/CSS you can do this

const model = editor.getSelected();
const html = model.toHTML();
const css = editor.CodeManager.getCode(model, 'css', {cssc: editor.CssComposer});
const final = `${html}<style>${css}</style>`;
chiqui3d commented 6 years ago

I think, that this should automatically inject the css that have been injected with the canvas option and this one doesn't, why?

That is, if I add css with:

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

when exporting should add it

artf commented 6 years ago

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

Yakito commented 5 years ago

Hello @artf thanks a lot for your time!

I am not sure I follow your answer here:

const model = editor.getSelected();
const html = model.toHTML();
const css = editor.CodeManager.getCode(model, 'css', {cssc: editor.CssComposer});
const final = `${html}<style>${css}</style>`;

My scenario is simple, I am importing into GJS some HTML,CSS,JS files. For everything to look as it was I am using something like this:

canvas: {
    scripts: ['https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js','https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js'],
    styles: [
      'css/mycss.css',
    ]
  },
  plugins: ['grapesjs-plugin-export'],
      pluginsOpts: {
        'grapesjs-plugin-export': { /* options */ }
      }

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

Any tip in the right direction will be appreciated! Thanks!

artf commented 5 years ago

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>
  `
}