Grapesjs: [HELP] GrapesJS load html/css from Database

[Eshayat]

Hi there,

We are using grapesjs in our Angular app. We have managed to create and save the grapesjs html/css in our database. One of the things we still couldn't find our that, In edit mode we want to call our API and get the HTML, CSS and load it into grapesjs canvas. We have tried with storage manager but that didn't work, if theres any set method or any code sample anyone could share that would be great help.

Regards,
Eshayat

[Eshayat]

At first, I'm thinking i won't use the native storage manager that's how i wanted to call.
Let me know how we should do this,

[mcottret]

Hi @Eshayat,

We have tried with storage manager but that didn't work

Could you elaborate ? Have you properly followed the "Setup remote storage" & "Setup the server" sections of the "Storage Manager" documentation ?

The following configuration should work, provided that your endpoint returns the data in the correct format:

[...]
storageManager: {
    type: 'remote',
    urlLoad: 'http://endpoint/load-template/some-id-123',
    // autoload: true (is the default)
}
[...]

[mcottret]

At first, I'm thinking i won't use the native storage manager that's how i wanted to call.
Let me know how we should do this,

If for any reason you're not willing to use the storage manager, I believe this configuration can only be used to set the default canvas content, so you could initialise the editor this way once your server would have responded.

If you're interested in updating the canvas content dynamically after initialisation, you can use the Editor API to achieve it, namely the following methods:

[...]
this.editor.setComponents(remoteData['gjs-components']));
this.editor.setStyle(remoteData['gjs-styles']));
[...]

[Eshayat]

Hey there, the second method worked. Thank you