Custom Asset Manager. How to set bg image

Seconded, just started with GrapeJS and got it operational on my system, looking to set the background image on a header div without having to write css code :/

Actually, the knowledge of what to do on asset selection should not be part of the command itself as the action should be decided by who runs the command, eg.

editor.runCommand('open-assets', {
    onSelect(asset) {
      const cmp = editor.getSelected();
      cmp && cmp.addStyle({ 'background-image': `url("${asset.get('src')}")` })
    }
});

I'd suggest inspecting the current implementation of the command, but I have to say that is quite old, so If you'll find anything that might be improved, I'll be happy to hear that.

This is not the right solution to our question.

What I'm looking to do is add this to a component, how would we do this?

Thanks for reporting this, @mmotov.

Great question about Custom Asset Manager. How to set bg image. The recommended approach with GrapesJS is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!