Grapesjs: Load assets from remote storage

Created on 27 Jun 2017 · 8Comments · Source: artf/grapesjs

Hi, at first - thank you for this editor, its great and I will surely use it in many projects! :)

I have a problem with loading assets on init.

My storage configuration is:
storageManager: {
type: 'remote',
urlStore: '{!! url('admin/marketing/subscription/campaigns/store', [$model->id]) !!}',
urlLoad: '{!! url('admin/marketing/subscription/campaigns/load', [$model->id]) !!}',
contentTypeJson: true
}

My load function in PHP:

foreach((array)$entity->assets as $asset)
{
$assets[] = ['src' => File::find($asset)->getFullUrl(), 'type' => 'image'];
}
return response()->json(['gjs-html' => $entity->content, 'gjs-css' => $entity->styles, 'gjs-assets' => $assets]);

And Im returning this JSON from backend:

{"gjs-html":"SOME HTML", "gjs-css":"SOME CSS", "gjs-assets":[{"src":"http:\/\/edito.localhost\/storage\/image\/cms_subscription_campaigns\/2017\/6\/27\/4db7ee187e2798fe7828c88cc79e70af\/IMG_9489m.jpg","type":"image"}]}

In result, I have all HTML and CSS loaded in editor, but images (assets) component is still empty. How to return data from load function in backend to fill assets component with my files?

bug outdated

Source

adrian1207

All 8 comments

Hi @adrian1207 your JSON is correct, I think there is might be a bug with the Asset Manager loader. For a moment, as a workaround, I'd suggest loading assets via the main config:

...
assetManager: {
  assets: {!! $jsonAssets !!}
},

artf on 27 Jun 2017

Hi, I have got the latest version and I also seem to have nothing rendering.

The JSON that is being returned looks like this.

{"gjs-html":"<HTML>","gjs-assets":[{"src":"http:\/\/placehold.it\/350x250\/78c5d6\/fff\/image1.jpg","type":"image"},{"src":"http:\/\/placehold.it\/350x250\/78c5d6\/fff\/image2.jpg","type":"image"}]}

I have the latest version of Grapesjs: 0.9.4.

Maybe it is something with my configuration. When i try and load the images is asset manager it doesn't work either. The only way the asset manager works is if I change the storageManager type to 'local'.

My configuration looks like this:

var editor = grapesjs.init({
                    clearOnRender: true,
                   /* height: '100%',*/
                    storageManager: {
                      type: 'remote',
                      stepsBeforeSave: 5,
                      autoload: true,
                      autosave: true,
                      urlStore: '<?php echo Yii::app()->baseUrl . '/index.php/campaigns/'.$campaign->campaign_uid.'/push_campaign_template'; ?>',
                      urlLoad: '<?php echo Yii::app()->baseUrl . '/index.php/campaigns/'.$campaign->campaign_uid.'/pull_campaign_template'; ?>',
                      //control-dev.mailblaze.com/customer/index.php/campaigns/yy582mldbd38f/pull_campaign_template',
                      contentTypeJson: true,
                      params: {},   // For custom values on requests
                    },
                    assetManager: {
                      storageType      : '',
                      storeOnChange    : true,
                      storeAfterUpload  : true,        
                    },
                    container : '#gjs',
                    fromElement: true,

Chronis77 on 5 Jul 2017

There is might be something wrong with the renderer, can you check if there are actually no assets

editor.AssetManager.getAll().length

Might help you setting some listener before rendering

var editor = grapesjs.init({
 autorender: 0,
 ...
});

editor.on('storage:load', function(obj) {
  console.log('Loaded ', obj);
})
editor.on('storage:store', function(obj) {
 console.log('Stored ', obj);
})

editor.AssetManager.getAll().on('reset change', function(asset){
  console.log('Assets changed', asset);
})

editor.render();

artf on 5 Jul 2017

See attached for the output.

capture