QUESTION: Custom Asset Manager. How to set bg image

[mmotov]

Hi there! I'm building a custom modal for the Asset Manager and basically, it seems that I need to override 'open-assets'command. How I can understand if a user wants to set an image src or background-image property? Thanks in advance!

[advancedsoftwarecanada]

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 :/

[artf]

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.

[advancedsoftwarecanada]

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?

[advancedsoftwarecanada]

Ugh, sorry, I'm a grapejs noob, there's already a setting for this:

[ronaldohoch]

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.

Hello, sorry for comment in here, but it's not working. But i have made a little change to have it working here..

It's my function, i needed to change all the assets implementation. Just set the code as, if using mjml plugin: editor.getSelected().addStyle({ 'background-url': textUrl }); In normal html: editor.getSelected().addStyle({ 'background-image': url(${textUrl}) });

  Commands.add('open-assets', editor => { 
      //... some code from my own assets manager
      if(listOfImageTags.includes(editor.getSelected().attributes.tagName)){
          editor.getSelected().set({ src: txtUrl, alt: txtAlt });
      }else{
          if(stateEditor==="EMAIL"){
              editor.getSelected().addStyle({ 'background-url': textUrl });
          }else{
              editor.getSelected().addStyle({ 'background-image': `url(${textUrl})` });
          }
      }
  });