grapesjs / export Goto Github PK

View Code? Open in Web Editor NEW

72.0 7.0 66.0 1.09 MB

Export GrapesJS templates in a zip archive

License: BSD 3-Clause "New" or "Revised" License

HTML 15.06% TypeScript 84.94%

export's Introduction

GrapesJS Export

This plugin adds the possibility to export template in a zip archive. Demo: http://grapesjs.com/demo.html

Summary

Plugin name: grapesjs-plugin-export
Commands: gjs-export-zip

Options

Option	Description	Default
`addExportBtn`	Add a button inside the export dialog	`true`
`btnLabel`	Label to the export button	`Export to ZIP`
`filenamePfx`	ZIP filename prefix	`grapesjs_template`
`filename`	Use a function to generate the filename, eg. `filename: editor => 'my-file.zip',`	`null`
`root`	Use the root object to create the folder structure of your zip (async functions are supported), eg. `

{
  css: {
    'style.css': ed => ed.getCss(),
    'some-file.txt': 'My custom content',
  },
  img: async ed => {
    const images = await fetchImagesByStructue(ed.getComponents());
    return images;
    // Where `images` is an object like this:
    // { 'img1.png': '...png content', 'img2.jpg': '...jpg content' }
  },
  'index.html': ed => `<body>${ed.getHtml()}</body>`
}

|{ ...check the source }` |

Download

CDN
- https://unpkg.com/grapesjs-plugin-export
NPM
- npm i grapesjs-plugin-export
GIT
- git clone https://github.com/GrapesJS/export.git

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-plugin-export.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      // ...
      plugins: ['grapesjs-plugin-export'],
      pluginsOpts: {
        'grapesjs-plugin-export': { /* options */ }
      }
  });

  // You can also call the command wherever you want in this way
  editor.runCommand('gjs-export-zip');
</script>

Modern javascript

import grapesjs from 'grapesjs';
import thePlugin from 'grapesjs-plugin-export';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [thePlugin],
  pluginsOpts: {
    [thePlugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => thePlugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/GrapesJS/export.git.git
$ cd grapesjs-plugin-export

Install it

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause

export's People

Contributors

Stargazers

Watchers

Forkers

gdg artlantis imsaeedafzal zackfalcon jookyltd 851091009 integrateddigital alissonphp krissams sura2k jaredswenson justindool kundarmah charlesgetup tarunrao marcianobarros20 himasrafeek busytechnicalsolutions maheshsundaramurthy naveenkumar2609 besingasj fsn123 andrisetyoo hajash20 sunfirescm darksith666 abrouet alpyol askaguilr2 mgumowsk akshathaholla91 mmmika yearbai rcostabrava001 ibw shamimislam lebonsavane monupal ju99ernaut tomhatzer bvanhou duhaali davidlaw maickon legatoplay kumarabhishek008 sachingk djamol krishnacb linecode mm86133 fathym-it ouri028 visudade fairhopeweb crazyfree suryatmodulus lcsouzamenezes grapesjs-workspace dfxadmin serjoa rpaladin dheia ifwaxtel chenmingqiang23 madintrace

export's Issues

Including data-gjs-type in exported html

I recently tried exporting the html and css of my sample site to load it back into grapesjs as the index.html. (I'm making a custom plugin and wanted to make a site to demo it.) After some troubleshooting, it seems like the components won't register without including the data-gjs-type.

Is it possible to configure the export so the generated html includes these data-gjs-type attributes?

Thanks in advance.

how can i import it into vue.js

please give me some advice

Inline css

Hi,

How can I add inline css in newsletter on click export.
Now export newsletter generate internal css but i want inline css.
Please help me regarding this.

Thanks,

[Question]: Export files using array

Hi @artf , sorry to bother but I would like to know if there is any way that we can export files where the file name and its content are inside an array?
Example, I know I can do this:

...
'grapesjs-plugin-export': {
    addExportBtn: false,
    btnLabel: "Export ZIP",
    filenamePfx: "GrapeJS-Project",
    filename: null,
    root: {
        some_folder: { // This creates a folder named some_folder
            'some_file.text': 'This is the content of the file'
        }
    }
}
...

But is there a way to make something similar (below) or any logic that I can add files inside array? Like this example:

'grapesjs-plugin-export': {
    addExportBtn: false,
    btnLabel: "Export ZIP",
    filenamePfx: "GrapeJS-Project",
    filename: null,
    root: {
        some_folder: {
            for(let i=0; i < array.length ; i++) // THIS IS AN EXAMPLE OF WHAT I WANT
                array[i].filename: array[i].filecontent // THIS IS AN EXAMPLE OF WHAT I WANT
        }
    }
}

Question: exportOpts filename / filenamePfx customization

Hi, I am wondering If i am missing something in the documentation but It seems like I can't customize the filename being generated from the plugin, for example:

here's my sample code:

here's the version of my grapesjs and preset-webpage

js framework: Angular 7

Re: Grapesjs

we are using GrapesJS plugin and we find issue with drag and drop of controls. please assist as soon as possible.

Thanks,
NarendarMarimuthu

Re: GrapesJS. under form section controls drag and drop not working

we are using GrapesJS plugin and we find issue with drag and drop of controls. please assist as soon as possible.

Thanks,
NarendarMarimuthu

can't see export button on the demo site

How to export images using this plugin

Currently this plugin exports html and css in grapesjs. if we want to export images also, how it can be achieved ?
We want to export the images separately, in a separate folder just like CSS.

Export to ZIP HTML file mostly has no newlines

When I export to ZIP and then open the index.html file in a text editor, the file has no newlines for all the HTML code until the for (var i = 0, len = items.length; i < len; i++) { line.

it is annoying as the HTML code has to manually formatted.

Options not being applied (filenamePfx and root)

Hello, great work. on grape...really loving it.
I have a problem where some options in the config are not being applied...they are filenamePfx, root * ( it uses the default zip file prefix and the folder structure remains as the default). Here is a snippet of the options I am using.

{
            filenamePfx: 'some_prefix',
            filename: null,
            root: {
               'style.css': ed => ed.getCss(),
                'index.html': ed =>
                    `<!doctype html>
            <html lang="en">
              <head>
                <meta charset="utf-8">
                <link rel="stylesheet" href="./style.css">
              </head>
              <body>${ed.getHtml()}</body>
            <html>`
            }
        }

I have played with the options a bit and can confirm that addExportBtn and btnLabel are being applied.

Multi-Page Support

Using this plugin, I noticed it only exports the active page. Could you work around making it all pages?

How to include .js in zip directly from path

Iwas trying to add custom.js on exported zip file, adding css works perfectly since its all text while javascript file might contain hex strings and its getting broken when copied to a file. Sample below breaks dues to hex string in my case.

root:{
css: {
 'style.css': '.popup-title{font-family:"Enriqueta"}'
},
'test.js': 'console.log(\"\\t\\n\\v\\f\\r                　\\u2028\\u2029\\ufeff\")'
}

what I am trying below

root:{
css: {
 'style.css': '.popup-title{font-family:"Enriqueta"}'
},
'test.js': 'localhost:80/custom.js'
}

Export images which are used in the editor Canvas

Hi @artf ,

 I tried to download the images which are used in the editor canvas but I dont know how to do it.

Note: I pushed images into asset manager with external links like below,
editor.AssetManager.add(result.fileUrl);

My ultimate goal is to download the images which are used in the editor canvas during export and replace the src for the all images with local folder called 'images'.

GrapesJSExportDirectory

index.html
Css/styles.css
Images/{image1.png, image2.png}

My export command function:

editor.Commands.add(exptPluginCommand, {
      run() {
        let zip = new JSZip(),
          cssDir = zip.folder("css"),
          //imgDir = zip.folder("images"),
          fn = "healthcare" + Date.now() + ".zip";
        zip.file(
          "index.html",
          preHeadTag +
          scriptsAndStyles +
          postHeadTag +
          editor.getHtml() +
          postHtml
        );
        cssDir.file("style.css", editor.getCss());
        //imgDir.file("test.png", editor.DomComponents.getWrapper().find("img")[0].get("src"));
        zip
          .generateAsync({
            type: "blob"
          })
          .then(content => {
            FileSaver.saveAs(content, fn);
          });
      }
    });

Please help me to get out of this.. Thanks in advance..

Export to ZIP Closing HTML tag is not a closing tag

the closing tag in the exported HTML is an opening HTML tag, not a closing tag.

Export all asset to destination folder

Hello,
I have an issue when export the template.
How can I export all asset in template to the destination folder without zip?

Thanks for your support.

Not able to customize the Export Plugin options

Hi @artf,
I tried to customize the options in the grapesjs editor export plugin. But only two options(addExportBtn, btnLabel) works as expected. Other options such as filenamePfx, filename, root are not working as expected.

My code:

var editor = grapesjs.init({
            container: '#editor-portal',
            fromElement: true,
            clearOnRender: true,
            allowScripts: 1,
            height: '100vh',
            canvas: {
                styles: selectedTemplateExternalStyles,
                scripts: selectedTemplateExternalScripts
            },
            plugins: ['gjs-preset-webpage', 'grapesjs-custom-code'],
            pluginsOpts: {
                'gjs-preset-webpage': {
                    exportOpts: {
                        filenamePfx: 'dummy',
                        filename: 'temp',
                        addExportBtn: 1,
                        btnLabel: 'Export as ZIP',
                        root: {
                            css: {
                                'style.css': ed => ed.getCss(),
                            },
                            html: {
                                'test.html': ed =>
                                    `<!doctype html>
                                 <html lang="en">
                                 <head>
                                 <meta charset="utf-8">
                                 <link rel="stylesheet" href="./css/style.css">
                                    ${ed.Canvas.getConfig().script.map(data=> {debugger;
                                    console.log(data);
                                    return "<script src="+data+"></script>";
                                    })
                                    }
                        </head>
                        <body>${ed.getHtml()}<div>hi</div></body>
                      </html>`
                            }
                        }
                    }
                },
                'grapesjs-custom-code': {

                }
            },
            storageManager: {
                type: null
            },
            assetManager: {
                storageType: '',
                storeOnChange: true,
                storeAfterUpload: true,
                assets: assetImages,
                upload: 0,
                uploadName: 'files',
                uploadFile: function (e) {
                    var reader = new FileReader(),
                        files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
                    reader.readAsDataURL(files[0]);
                    reader.onload = function () {
                        var formData = {};
                        formData.base64 = reader.result;
                        Promise.resolve(agent.WebSiteEditor.saveImages(formData)).then(function (res) {
                            if (res.data !== null && res.data !== 'undefined') {
                                var result = res.data;
                                if (result) {
                                    editor.AssetManager.add(result.fileUrl);
                                } else
                                    return false;
                            } else
                                return false;
                        });
                    };
                    reader.onerror = function (error) {
                        console.log('Error: ', error);
                    };
                },
                embedAsBase64: false,
                disableUpload: false,
                dropzone: false
            }
        });

I just changed addExportBtn variable into 0, the export button not visible in the editor. And changed btnLabel variable from "export to ZIP" into "export as ZIP". The changes are affected. But other than that other options are not able to customize.