Grapesjs: Find images links in the editor

[hemanthmc]

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.

[maryia-kabash]

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 */ }); } }

[hemanthmc]

Thank you for your suggestion @maryia-kabash

[artf]

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

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.