Find images links in the editor
Hi @hemanthmc I can suggest subscribing to sorter:drag:end event and pass a React method as a callback. In the method check if image is dropped and store its src into React state or do whatever needed. A more detailed example: this.grapesjsInstance.on('sorter:drag:end', this.onDragEnd); onDragEnd(DataTransfer, modelTo...
Read full answer below ↓Question
I am trying to integrate GrapesJs in reactJs.
Can you please help me out with the below question w.r.t GrapesJs-React,
• Is there a way to find the images link used inside the editor ??
example: when I drag and drop and image inside grapesjs editor it will create one image tag with image src path. So I want all all the images path used inside the editor which and all I drag and dropped inside editor.
Answers (3)
Hi @hemanthmc I can suggest subscribing to sorter:drag:end event and pass a React method as a callback. In the method check if image is dropped and store its src into React state or do whatever needed. A more detailed example: this.grapesjsInstance.on('sorter:drag:end', this.onDragEnd); onDragEnd(D...
Thank you for your suggestion @maryia-kabash
editor.getWrapper() // Get the wrapper Component
.find('img') // Find all inner components by a query string
.map(comp => comp.getAttributes()['src']) // map found components
Component API: https://grapesjs.com/docs/api/component.html
Related Questions and Answers
Continue research with similar issue discussions.
Issue #697
Question: Dropping external element into blocks
Hello, I want to drop external elements ( for example, tree view node) into blocks. Can you please help me out to show a way, how to achiev...
Issue #1150
[Question] Get Uploads as Base64
Hello All, I need help integrating this into a web app that I have. Everything renders and works as expected but I am trying to get the upl...
Issue #1960
[QUESTION] Dynamic class generation with a template
Hi there ! I am wondering if there is a way to force the dynamic class generation (of the form cXXXXX which happens when I drag'n'drop a co...
Issue #1864
[QUESTION] Best way to listen to changes on the final HTML?
Hi, I just had a quick question because I could not figure out how to do it or did not find an issue related to it. I am just trying to cal...
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.