load local html file into grapesjs

[raghuv9]

hello i am pretty new to grapejs i want to load a local html file in the assets folder into grapesjs editor ,pls tellme how i can load local html file thanks in advance .. here is my code

import grapesjs from 'grapesjs';

import 'grapesjs/dist/css/grapes.min.css'; import 'grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css'; import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css';

import gjspresetnewsletter from 'grapesjs-preset-newsletter'; import gjspresetwebpage from 'grapesjs-preset-webpage';

export default {
    data() {
        return {
            editor: null
        }
    },
    methods: {
        change() {
            this.$emit('change', this.editor.getHtml());
        },
    },
      mounted() {
            const LandingPage = {
            html: '../userpage/index.html',
            css: ['../userpage/style.css','../userpage/css.css','../userpage/bootstrap.min.css'],
            components: null,
            style: null,
            };
            this.editor = grapesjs.init({
            container: "#gjs",
            canvas: {},
            fromElement: true,
            components: LandingPage.components || LandingPage.html,
            style: LandingPage.style || LandingPage.css,
            plugins: [],
            pluginsOpts: {
                "gjs-preset-webpage": {}
            },
             storageManager: {
                type: 'local',
                stepsBeforeSave: 10,
                urlStore: '',
                urlLoad: 'https://raghuv9.github.io/Tapmusic/',
                params: {}, token
                headers: {},
                }
            });
    }
}

[pouyamiralayi]

hi! beside reading the content of the file that heavily depends on your environment, (if you are in a node environment you can use 'fs' module), you can use editor.setComponents('your html content'). more info here cheers.

[raghuv9]

hi! beside reading the content of the file that heavily depends on your environment, (if you are in a node environment you can use 'fs' module), you can use editor.setComponents('your html content'). more info here cheers.

No actually i'm trying to give the link of that html file like url:'../somefolder/test.html' this is how i want to load it into editor instead of pasting html code inside set-component method, is there any chance of doing it like this(urlLoad:"assets/folder/file.html") by using urlLoad method inside storagemanager?

[pouyamiralayi]

to my knowledge i am not aware of a way that grapesjs can do it. sorry!

[nikolabtt]

Browser (GrapesJS is executed in browser) should not be able to access arbitrary file from host machine file system. If that was allowed, you would be able to add some JS to a web page and be able to steal files from your users. If you want to achieve this, you must host your files on a http server.

[artf]

Find the way to correctly load your HTML file (as already mentioned you can't do it without user consent for security reason) and then start the editor with that content

[devtechk]

hi! beside reading the content of the file that heavily depends on your environment, (if you are in a node environment you can use 'fs' module), you can use editor.setComponents('your html content'). more info here cheers.

It' has been very helpfull, but how to insert css style? (overwriting the existing one)

maybe with this? https://grapesjs.com/docs/api/editor.html#setstyle

I've used this code inside a commmand, it works great but too many line of code, what do you think about it? :

      const dc = editor.DomComponents;
      dc.clear();
      editor.CssComposer.clear();
      dc.load(pdfLayout);
      editor.addComponents(`<style>${pdfLayout.css}</style>`)

then i've used only this two lines:

      editor.setComponents(pdfLayout.html);
      editor.setStyle(pdfLayout.css);

Thank you

[zee-algo]

@devtechk I,ve implemented this but unfortunately styles manager is at its default. Can you please help how can i update style manager also with updated properties values? Thanks in advance.