Issue #3331✓ SolvedOpened March 10, 2021by Abhisheknanda13444632 reactions

Custom Asset Manager

快速解答by Abhisheknanda13444632

@artf Achieved it and handle case-insensitive also https://user-images.githubusercontent.com/20657737/112457190-82d18980-8d81-11eb-895b-b5c42e849f3a.mov Thank you!! ❤️

Read full answer below ↓

Question

Hi @artf
I followed the documentation to make new type of asset manager here ( https://codepen.io/abhi_punk81/pen/MWbWzaq) I've created new type like the same one in the docs

How can i open that asset manager after dropping my custom block of icon -: At first it'll work fine but when i drop the image block after that then default will one appear

Could you please guide me here I am trying to make new plugin for icons one

After finding from the issues which already raised I have add command this way and call this commnd on the icon component and stuck how could i update the target on double click-:

const cm = editor.Commands;
cm.add('svg-icon', {
    	run(editor, sender, opts) {
        // const assettarget = opts.target;
    	   editor.Modal.open({
          title: 'Select Icon',
          content: `<div class="gjs-am-assets-cont">
      <div class="gjs-am-assets-header" style="display: none;">
      </div>
      <div class="gjs-am-assets gjs-am-assets--show" data-el="assets"><div class="gjs-am-asset gjs-am-svg-icon">
      <div class="gjs-am-preview-cont">

          <div class="gjs-am-preview-bg gjs-checker-bg"></div>
          <div class="gjs-am-icon" style="text-align: center; z-index: 1; position: relative; height: 100%">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.93 2.93A9.969 9.969 0 0 0 2 10c0 2.76 1.12 5.26 2.93 7.07l1.41-1.41A7.938 7.938 0 0 1 4 10c0-2.21.89-4.22 2.34-5.66L4.93 2.93m14.14 0l-1.41 1.41A7.955 7.955 0 0 1 20 10c0 2.22-.89 4.22-2.34 5.66l1.41 1.41A9.969 9.969 0 0 0 22 10c0-2.76-1.12-5.26-2.93-7.07M7.76 5.76A5.98 5.98 0 0 0 6 10c0 1.65.67 3.15 1.76 4.24l1.41-1.41A3.99 3.99 0 0 1 8 10c0-1.11.45-2.11 1.17-2.83L7.76 5.76m8.48 0l-1.41 1.41A3.99 3.99 0 0 1 16 10c0 1.11-.45 2.11-1.17 2.83l1.41 1.41A5.98 5.98 0 0 0 18 10c0-1.65-.67-3.15-1.76-4.24M12 8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-1 6v4h-1c-.55 0-1 .45-1 1H2v2h7c0 .55.45 1 1 1h4c.55 0 1-.45 1-1h7v-2h-7c0-.55-.45-1-1-1h-1v-4h-2z"></path></svg>

          </div>

      </div>
      <div class="gjs-am-meta">

      <div class="gjs-am-name">Access point network</div>
      </div>
    </div>`,
    	  });
      }
    });

Thanks

Answers (4)

Abhisheknanda1344463March 19, 2021

Hi @artf somehow I've managed to do it On component active I called this -:

  events: {
        dblclick: 'onActive'
      },
      onActive () {
        editor.AssetManager.render(editor.AssetManager.getAll().filter(asset => asset.get('type') == 'svg-icon'));
        editor.runCommand("open-assets", {
          target: this.model,
        });
      },

It'll open my asset manager and I've added assets for this custom manager as well as you can see in the screenshot <img width="1105" alt="Screenshot 2021-03-20 at 10 23 45 PM" src="https://user-images.githubusercontent.com/20657737/111877865-45f54380-89cb-11eb-8229-1848704320b7.png">

Now, My question is how could i achieve the search functionality to filter the assets. Could you please guide me @artf Thanks!!

artfMarch 22, 2021

Should be similar to what you've already done here editor.AssetManager.render(editor.AssetManager.getAll().filter(asset => asset.get('type') == 'svg-icon')); So find assets by search and update it with render

ClaudeCodeMay 17, 2026

Thanks for reporting this, @Abhisheknanda1344463.

Thanks for sharing your report about Custom Asset Manager. To help the team investigate and prioritize this:

Please provide:

  1. A minimal reproducible example (CodeSandbox/JSFiddle)
  2. Your GrapesJS version number
  3. Browser and OS information
  4. Any error messages from the browser console
  5. Steps to reproduce the issue

What helps most:

  • Minimal code example (not your full project)
  • Screen recording or screenshot showing the issue
  • Expected vs actual behavior clearly stated
  • GrapesJS configuration you're using

With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.