Custom Asset Manager
@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)
@artf Achieved it and handle case-insensitive also
Thank you!! ❤️
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!!
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
Thanks for reporting this, @Abhisheknanda1344463.
Thanks for sharing your report about Custom Asset Manager. To help the team investigate and prioritize this:
Please provide:
- A minimal reproducible example (CodeSandbox/JSFiddle)
- Your GrapesJS version number
- Browser and OS information
- Any error messages from the browser console
- 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.
Issue #4455
'panel-devices' and 'panel-switcher' conflicting
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 103.0.5060.114 Reproducible...
Issue #3688
How to customize a component
I read this document https://grapesjs.com/docs/modules/Components.html#define-custom-component-type and tried to write the following code....
Issue #3446
Cannot Store Data Unexpected token '-'
Please Help Me, I Want To Store gjs data to mysql but i cannot get any data from front end to back end here my code: const editor = grapesj...
Issue #5487
Style Manager doesn't display multiple rules for the same class
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox Reproducible demo link https://jsf...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS vs Webflow vs Builder.io vs Puck: Which Visual Builder to Choose in 2026
A practitioner's 2026 comparison of GrapesJS, Webflow, Builder.io, and Puck — pricing, AI features, lock-in, and a one-line rule for picking the right one
Tutorial
GrapesJS vs Webflow vs Tilda (2026): Honest Comparison, Pricing & Which to Pick
GrapesJS vs Webflow vs Tilda compared head-to-head: real 2026 pricing, SEO features, code export, and which one actually fits your project
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.