Issue #2542Opened February 1, 2020by erikhaw3 reactions

[Question] Image-like component with own asset manager

Question

Hi everyone! I have a question about my problem, which I want to solve for about 1 month. The question is: Can I create a component, like a image component, so when I drop it, it will open my own asset manager, that will not overwrite original asset manager, so Image component will have same functionality as it has now. I wrote simple modal, where you can search for images online, but this modal overwrites original asset manager:

 const modal = editor.Modal;
 
  modal.open({
         title: '<br>Pixabay plugin<br>',
         content: `
           <div class="container">
               <form id="search-form">
                <input type="text" id="search-photos">
               </form>
               <div id="forPhotos">
               </div>
               </div>`,
     });
 

When I drop image block, this modal appears instead of original asset manager, and now the second problem, I wanted to overwrite open-assets command, which I found here on the forum like this:


            window.editor.Commands.add("open-asset", {
                run(editor, sender, opts) {
                    setTimeout(() => {
                        opts.target.set('src', 'https://via.placeholder.com/150');
                    },  1);
                }
            });

So, when I drop image component, it will really add image to the page, but when I try to rename command to:

            window.editor.Commands.add("mycommand", {
                run(editor, sender, opts) {
                    setTimeout(() => {
                        opts.target.set('src', 'https://via.placeholder.com/150');
                    },  1);
                }
            });

And then execute it, it will not work, because I don´t know, what that parameter in method means and I dont know, how to call it, I thought about something like this: window.editor.runCommand("mycommand", /* Some parameters? */); So, please, is there a way how to achieve that I will have my own command, own component and modal, that will be separated from the open-assets and Image block and it will work in the same way as an image block? Then I drop it, it will open modal, I will search for image, click on this image and then it will drop to the page. Modal functionality and block component are already done, but I really dont know, how to separate it and how to call it properly, that it will drop image right to the page.

Finally, sorry for my English, I'm still not very advanced in it, but I hope you understand my problem. Thank you for your time and your suggestions. Have a nice day. E. H.

Answers (1)

artfFebruary 3, 20203 reactions

You just need to create your own command which calls your modal. Obviously, as you're implementing your own Asset Manager it's up to you knowing WHEN to update the target

editor.Commands.add('my-asset-manager', {
	run(editor, sender, opts) {
		editor.Modal.open({
	         title: '...',
	         content: `...`,
	    });
		// Pseudo-code for your asset manager
		yourAssetManager.on('image.selected', (imgPath) => {
			const target = editor.getSelected();
			target.set('src', imgPath);
		})
	}
});

For your custom image component you could do something like this:

editor.DomComponents.add('your-image', {
	extend: 'image', // Extend the original image component
	view: {
		onActive(ev) {
			// Prevent propagation when the activation is triggered by
			// double-clicking on the component in the canvas
	    	ev && ev.stopPropagation();
			editor.runCommand('my-asset-manager');
		},
	}
})

When you add the block, be sure to use the activate property, this will trigger the onActive when it's dropped in the canvas

editor.BlockManager.add('my-block-id', {
  label: 'My image',
  select: true, // Select the component once it's dropped
  activate: true,
  content: { type: 'your-image' }
})

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.