Issue #2316Opened October 8, 2019by kickbk10 reactions

Customizing the assets-manager view

Question

I would like to create a custom assets-manager modal to open in bootstrap modal. I'd like to keep the original assets manager functionality (like drop image zone, input to fetch image from remove, and I'd like to use datatable for the images/assets). In addition, I would like to integrate with Pixabay API so images can be easily entered into the editor. This can be in a separate tab. See mockup. Would you please offer some general guideline on how I can create a bootstrap modal in my view and load the assets manager inside it? mockupgrapes2

Answers (3)

PriyankaPrabhuSeptember 24, 20217 reactions

@kickbk did you achieve the custom asset manager ? If yes please share the code

khoa-justunoOctober 8, 20193 reactions

You can do this with a custom modal by overwriting the default image asset manager.

editor.Commands.add("open-assets", {
  run(editor, sender, opts) {
    const assettarget = opts.target;
    // code to open your own modal goes here.
   openModal(assettarget)
  }
});

When you want to set an image use this.

const assettarget = opts.target;
assetTarget.set("src", image.url);
artfOctober 17, 20190 reactions

I'd suggest the same solution proposed by @khoa-justuno If you need a new modal it will be easier to create the Asset Manager UI from scratch, reusing the DOM elements created by GrapesJS, in this case, would be just a pain to maintain

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.