Encontrar enlaces de imágenes en el editor
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)
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 */ });
}
}`Gracias por tu sugerencia, @maryia-kabash
'''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.
Issue #1766
¿Hay alguna forma de integrar ImageEditor en GrapesJs
Después de colocar la imagen dentro del editor, ¿existe algún plugin para que GrapesJs edite esa imagen, como recortar, añadir texto .....
Issue #1639
[Pregunta]: ¿Sería posible cambiar la configuración en el gestor de estilos de forma que tenga href cuando se crea un enlace?
Estoy usando un boletín predefinido con RTE integrado (no quiero usar el editor CK como en la demo) Para convertir cualquier texto en enlac...
Issue #1066
[PREGUNTA] Consigue contenido con CSS en línea
He estado buscando alguna explicación y he visto que algunos clientes de correo bloquean CSS... Me gustaría saber si hay alguna forma de ob...
Issue #2097
Pregunta sobre nuevas opiniones
Hola a todos, ¿Hay alguna forma sencilla de añadir una nueva vista justo al lado del gestor de estilos? Me gustaría crear una nueva vista q...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.