How to run command for a block component?
To achieve this, you can listen to the drag event of the editor:
Read full answer below โQuestion
editor.BlockManager.add('test', {
label: 'test',
category: 'Basic',
command: () => {
editor.runCommand('open-assets')
}
});
I'd like to do something like this. so once a user drops the test component into the canvas, I'd like to open up asset manager modal where you can upload an image by running 'open-assets' command.
Thank you very much Artur
Answers (3)
To achieve this, you can listen to the drag event of the editor:
editor.on('block:drag:stop', component => {
// identify your component and do something cool :)
});
@NicoEngler Thank you for reply! although, I'm not sure how to insert an image from image modal into the link-block component if i do this, nothing happens even after i select an image from the modal @artf Is there any way to do that? Plus, the modal is empty initially before I open up asset manage...
Iยดm afraid I can't assist further without playing around with the code myself. Though I can help debugging if you shoot up an example on codepen or similar.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1545
[Question] How I Get ID From Block?
Hi, i have my block and I get print in Div id results from my javascript class component... How i get ID from my block ??? editor.BlockMana...
Issue #1471
[Question] Blockmanager and Image
Hi! I use this code to add a new block: blockManager.add("image", { label: 'Image', category: 'Basic', attributes: { class: "gjs-fonts gjs-...
Issue #1034
insert element or block inside parent element
Good day, i have component, have block i have Trait on listen changes, how can I add "h1 " inside that block "'<div class="container" style...
Issue #1584
Not getting the Script of Block from editor.getComponents()
Below is the Component that I'm adding. this.editor.BlockManager.add('dob-mmyy-pii', { id: 'dob-mmyy', label: DOB (MM, YYYY) (PII), categor...
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.