Body -> Decorations -> Background-image

As a workaround for body background I use the following actions:

• save body background to DB separately from components and styles, via editor.DomComponents.getWrapper().attributes.style
• when template is loaded set the style via editor.DomComponents.getWrapper().setStyle(/*set proper styles*/)
• clear canvas with editor.DomComponents.getWrapper().setStyle('') , but this doesn't clear background from traits

I need to know what do you store in DB and how do you load it.

Hi, this is the code.

<div id="builder"></div>

<script type="text/javascript">

	var token = "{{ csrf_token() }}";

	var editor = grapesjs.init({
     	fromElement: 1,
     	clearOnRender: true,
     	container: '#builder',
     	plugins: ['gjs-preset-newsletter', 'gjs-blocks-basic', 'gjs-blocks-flexbox'],
     	pluginsOpts: {
			'gjs-blocks-basic': { category: false },
	    },

    	storageManager: {
        	autosave: false,
        	setStepsBeforeSave: 1,
        	type: 'remote',
        	urlStore: '/dashboard/pages/builder/' + {{ $page->id }},
        	urlLoad: '/dashboard/pages/builder/' + {{ $page->id }} + '/load',
        	contentTypeJson: true,
        	params: { _token:token },
		},

		assetManager: {
			assets: {!! !empty($page->builder['gjs-assets']) ? $page->builder['gjs-assets'] : '[]' !!},
			storeOnChange : true,
			storeAfterUpload : true,
		    upload: '/dashboard/pages/builder/' + {{ $page->id }} + '/postimages',
		    uploadName: 'images',
		    params: { _token:token, enctype:'multipart/form-data' },
		    autoAdd: 1,
		},
	});

	var assets = editor.AssetManager.getAll();

	assets.on('remove', function(asset) {

		var removefile = asset.get('src').split('/').reverse()[0];

        $.ajax({
        	url: '/dashboard/pages/builder/' + {{ $page->id }} + '/postimages',
        	type: 'POST',
        	data: { file:removefile, _token:token },
        	success: function(response){
        		assets.remove(asset.get('src'));
        	}
    	});
	});

	editor.Panels.addButton
	('options',
		[{
    		id: 'save-db',
    		className: 'fa fa-floppy-o',
    		command: 'save-db',
    		attributes: {title: 'Save'}
        }]
	);

	editor.Commands.add
    ('save-db',
	    {
	        run: function(editor, sender)
	        {
	        	sender && sender.set('active');
	        	editor.store();
        	}
    });

        editor.Panels.removeButton("options", ["export-template", "gjs-toggle-images", "gjs-open-import-template"]);

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

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

	var btnClass = editor.Panels.addButton
	('options',
		[{
    		id: 'add-class',
    		className: 'fa fa-plus',
    		command: 'add-class',
    		attributes: {title: 'Add Clicker Zone'}
        }]
	);

	var cmdClass = editor.Commands.add
    ('add-class',
	    {
	        run: function(editor, sender)
	        {
	        	var componentModel = editor.getSelected();
				componentModel.addClass('open-box');
	        	sender && sender.set('active', true);
        	},

        	stop: function(editor, sender)
        	{
        		var componentModel = editor.getSelected();
        		componentModel.removeClass('open-box');
	        	sender && sender.set('active', false);
        	}
    	}
    );


</script>

This is the php code: store

public function builderPost(Page $page, Request $request)
    {
        if (!empty($page->exists) AND Gate::allows('page-access', $page)) {

            $page->builder = json_encode($request->except('_token'));
            $page->save();

            return ['status' => 'success', 'message' => 'Your Page was successfully saved!'];
        }

        Session::flash('flashSession', ['status' => 'danger', 'message' => 'Error, you cannot build this Page!']);
        return redirect('dashboard/pages');
    }

for load

public function builderLoad(Page $page)
    {
        if (!empty($page->exists) AND Gate::allows('page-access', $page)) {

            return json_decode($page->builder, true);
        }

        Session::flash('flashSession', ['status' => 'danger', 'message' => 'Error, you cannot build this Page!']);
        return redirect('dashboard/pages');
        
    }

Thanks.