Custom Asset Manager
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 (3)
@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
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2989
How to append button in custom div
Hi @artf Is there any way to append all the defaults buttons of grapesjs in custom div like the same way we are append the style manager. h...
Issue #3685
BUG: showStylesOnChange is not working
Guys, I am new to grapes, I would like on component change show the Style Manager, here is my component and how I add it, also I would like...
Issue #5334
BUG: Selection of custom component type not working in the canvas
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome, Opera, Edge, etc Reproducible demo...
Issue #2687
[Question] How to append style manager to custom panel
I would like to append the whole style manager module to a panel? I have been digging up the docs for the past 2 days and couldn't find a p...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.