Issue #1707Opened January 4, 2019by hemanthmc3 reactions

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)

maryia-kabashJanuary 4, 20192 reactions
Code SnippetTEXT
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 */ });
        }
    }`
hemanthmcJanuary 4, 20191 reactions

Thank you for your suggestion @maryia-kabash

artfJanuary 5, 20190 reactions
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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.