[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)
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.
Issue #2316
Customizing the assets-manager view
I would like to create a custom assets-manager modal to open in bootstrap modal. I'd like to keep the original assets manager functionality...
Issue #612
Urgent : Duplicate other blocks when used custom asset manager
Hello, We have modified the Assset manager with custom one. But we are having problem now. If we drop one image into canvase and then add a...
Issue #2705
[Question] Adding image sizes to image
When I add an image attribute to the page I noticed that inside of the component the image has attributes to it. When I call my images into...
Issue #808
[Question] Create space where component would drop
As mentioned in the title (which may be a bit confusing), I'm curious about how to create a space where component would drop. This is very...
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.