Issue #1707✓ ResueltoAbierto el 4 de enero de 2019por hemanthmcReacciones 3

Encontrar enlaces de imágenes en el editor

Respuesta rápidapor maryia-kabash2

Hola @hemanthmc Puedo sugerir suscribirte al evento 'sorter:drag:end' y pasar un método React como callback. En el método comprueba si la imagen está descartada y guarda su src en estado React o haz lo que sea necesario. Un ejemplo más detallado: 'this.grapesjsInstance.on('sorter:drag:end', this.onDragEnd);' 'onDragEn...

Lee la respuesta completa abajo ↓

Pregunta

Estoy intentando integrar GrapesJs en reactJs.

¿Podrías ayudarme con la siguiente pregunta sobre GrapesJs-React?

• ¿Hay alguna forma de encontrar el enlace de imágenes que se usa dentro del editor?

Ejemplo: cuando arrastro y suelto una imagen dentro del editor grapesjs, crea una etiqueta de imagen con la ruta de imagen src. Así que quiero que todas las imágenes se usen dentro del editor, que y todo lo que arrastro y suelto dentro del editor.

Respuestas (3)

👍 Muy útilmaryia-kabash4 de enero de 2019
Fragmento de códigoTEXT
Hola @hemanthmc 
Puedo sugerir suscribirte al evento 'sorter:drag:end' y pasar un método React como callback.
En el método comprueba si la imagen está descartada y guarda su src en estado React o haz lo que sea necesario. 

Un ejemplo más detallado:
'this.grapesjsInstance.on('sorter:drag:end', this.onDragEnd);'

'onDragEnd(DataTransfer, modelToDrop) {
        if (modelToDrop & & modelToDrop.attributes && modelToDrop.attributes.type === 'imagen') {
            this.setState({ /* datos para guardar */ });
        }
    }`
hemanthmc4 de enero de 2019

Gracias por tu sugerencia, @maryia-kabash

artf5 de enero de 2019

'''js editor.getWrapper() // Obtén el componente del wrapper .find('img') // Encuentra todos los componentes internos mediante una cadena de consulta .map(comp => comp.getAttributes()['src']) // map componentes encontrados

API de componentes: https://grapesjs.com/docs/api/component.html

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.