Issue #3331Opened March 10, 2021by Abhisheknanda13444632 reactions

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)

Abhisheknanda1344463March 19, 20210 reactions

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, 20210 reactions

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.

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.