storageManager: Loading from remote storage

[DeathStapler]

Hi,

I'm trying to read the HTML and CSS from my database. When I try to load it into the editor, nothing displays. I can store the data just, just cannot load it.

Is this the correct format for the data when you are loading it?

Content-type

application/json

Preview

{gjs-assets: "", gjs-components: "",…}
   gjs-assets : ""
   gjs-components : ""
   gjs-css : "*{box-sizing: border-box;}body{margin:0;}.c1077{padding:10px;}"
   gjs-html : "<div class="c1077">Insert your text here</div>"
   gjs-styles : ""

Response

{"gjs-assets":"","gjs-components":"","gjs-css":"*{box-sizing: border-box;}body{margin:0;}.c1077{padding:10px;}","gjs-html":"<div class=\"c1077\">Insert your text here<\/div>","gjs-styles":""}

[duskhacker]

@DeathStapler This is what mine looks like:

{
    "gjs-css":"*{box-sizing: border-box;}body{margin:0;}.c1050{padding:10px;}", 
    "gjs-html":"<div class="c1050">Hi</div>", 
    "gjs-assets":"[]", 
    "gjs-styles":"[]", 
    "gjs-components":"[]"
  }

The thing that jumps out at me at first is that assets, components and styles should be arrays, you have empty strings.

The Content-Type is correct.

[DeathStapler]

I tried changing them to arrays. I tried just printing what you (@duskhacker) are using. Neither worked.

I validated the JSON, just to make sure it checked out.

This is my setup. Does anything look incorrect?

var editor = grapesjs.init({
        container : '#gjs',
        style: '.txt-red{color: red}',
        plugins: ['gjs-preset-newsletter', 'gjs-blocks-basic'],
        pluginsOpts: {
            'gjs-blocks-basic': { blocks: ['video'] }
        },
        assetManager: {
            assets: [
                 'https://siteurl.edu/uploads/screen-shot-2017-11-29-at-9-17-08-am.png',
                 'https://siteurl.edu/uploads/screen-shot-2017-11-16-at-9-21-05-am.png',
            ],
            storeOnChange: true,
            storeAfterUpload: true,
            upload: "/upload-editor-media",
        },
        storageManager: {
            type: 'remote',
            stepsBeforeSave: 1,
            storeComponents: false,
            storeStyles: false,
            storeHtml: true,
            storeCss: true,
            urlStore: "/save-template/2",
            urlLoad: "/load-template/2", 
            params: {},   // For custom values on requests
          }
    });

[artf]

@DeathStapler first of all, be sure to use the latest release. Check if this helps #159 Otherwise put this editor.on('storage:load', obj => console.log('Loaded ', obj)) and post here what do you get. Actually, I do not recommend storing/loading from HTML/CSS, this is your final result, you lose all the information added by the editor (eg. traits, component's properties, etc.), therefore you should rely on

// are `true` by default
storeComponents: true,
storeStyles: true,

but besides this, your code should work. In case, does enabling storeComponents and storeStyles makes the loading works?

[DeathStapler]

So when I set:

contentTypeJson: true,

resulting in:

storageManager: {
            type: 'remote',
            autoload: true,
            stepsBeforeSave: 1,
            contentTypeJson: true,
            urlStore: "/save-template/2",
            urlLoad: "/load-template/2", 
            params: {},   // For custom values on requests
          },

I can now load from the database. But, now it will not save, because it is sending the data as JSON. How can I send the data as POST variables, but receive it as JSON?

[DeathStapler]

Never mind. I will just take the JSON that is sent in the body of the POST and use that.

[shareefhiasat]

@DeathStapler do you store each of the following in column in database ? when you save , and then retrive please advise thanks

{
    "gjs-css":"*{box-sizing: border-box;}body{margin:0;}.c1050{padding:10px;}", 
    "gjs-html":"<div class="c1050">Hi</div>", 
    "gjs-assets":"[]", 
    "gjs-styles":"[]", 
    "gjs-components":"[]"
  }

[DeathStapler]

Hi,

I am storing and retrieving all the of columns.

[artf]

@shareefhiasat I explain here how to use them https://github.com/artf/grapesjs/wiki/Storage#store-and-load-templates

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.