search

GrapesJS / export

Export GrapesJS templates in a zip archive
BSD 3-Clause "New" or "Revised" License
76 stars 68 forks source link

How to export images using this plugin #5

Closed Neerajkashyap closed 5 years ago

Neerajkashyap commented 5 years ago

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.

jotakar commented 5 years ago

I have the same question.

jotakar commented 5 years ago

And finally I got the solution. Very easy: render css, render html, build a list of images then add them to zip file in plugin root options.

artf commented 5 years ago

Exactly, use the root option to customize the ZIP content (there is also an example)

mrajeshkrossark commented 5 years ago

And finally I got the solution. Very easy: render css, render html, build a list of images then add them to zip file in plugin root options.

@jotakar Can you give any example for that?

jotakar commented 5 years ago

I'll try to explain my way for getting images downloaded. Now I have this project in stand-by ;) Config cloud-export in index.html ` 'grapesjs-plugin-export':{ root : { css: { 'style.css': editor => editor.getCss().replace(/"img\//g,'"../img/'), },

                  img:  async editor => {
                            const images = await readImgs(editor);
                            return images;
                            },                  
                  'index.html': editor =>
                            `<!doctype html><html lang="es"><head><meta charset="utf-8"><link rel="stylesheet" href="./css/style.css"><title="${editor.getConfig().title}"></head><body>${editor.getHtml()}</body></html>`,
            }
          },`

The readImages() function is in the script file attached. exportimages.js.txt

mrajeshkrossark commented 5 years ago

I'll try to explain my way for getting images downloaded. Now I have this project in stand-by ;) Config cloud-export in index.html ` 'grapesjs-plugin-export':{ root : { css: { 'style.css': editor => editor.getCss().replace(/"img//g,'"../img/'), },

                img:  async editor => {
                          const images = await readImgs(editor);
                          return images;
                          },                  
                'index.html': editor =>
                          `<!doctype html><html lang="es"><head><meta charset="utf-8"><link rel="stylesheet" href="./css/style.css"><title="${editor.getConfig().title}"></head><body>${editor.getHtml()}</body></html>`,
          }
        },`

The readImages() function is in the script file attached. exportimages.js.txt

@jotakar , Hi really thanks for this help. But I dont know what you are doing in the peticion = await fetch(listaImgs[i]); . Can you please explain little bit more in this. Thanks in advance.

jotakar commented 5 years ago

Async processess are the hell for me, my mind is sequential :) What I know is that the program needs an image downloaded for going on, so it awaits until the image is downloaded (await fetch(listaImgs[i])) then it awaits until data are ready to be converted to binary (second await), finally it convert arrayBuffer into binary. "peticion" (spanish) is "asking for", I didn't commented enaugh tje script, and there is a mix english/spanish, sorry but I worte it for my own use.
I'm sure there is a better way to solve the problem, but i't's the way I found.