Find images links in the editor
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(DataTransfer, modelToDrop) {
if (modelToDrop && modelToDrop.attributes && modelToDrop.attributes.type === 'image') {
this.setState({ /* data to save */ });
}
}`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...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.