Actualizar Canvas después de cambiar gjs-html externamente
Parece que se me olvidó el DomComponents, después de descargar y echar un vistazo al src de grapesjs-newsletter, estaba en openImportCommand y vi cómo se estaban actualizando los DomComponents. Así que añadí lo siguiente a mi método de react component WillReceiveProps justo después de actualizar el html en el almacena...
Lee la respuesta completa abajo ↓Pregunta
Hola,
He estado usando GrapesJS con ReactJS (GrapesJS está dentro de su propio componente React) y estoy teniendo problemas para subir una imagen usando mi propio componente selector de archivos React.
Cuando selecciono una imagen de mi componente react de mi selector de archivos, como es externa a GrapesJS, actualizo manualmente el elemento gjs-html en el almacenamiento local con la ruta del archivo devuelta mediante el método de ciclo de vida de react componentWillReceiveProps en mi componente GrapesJS, que funciona muy bien. El problema que tengo es que no puedo activar una actualización del lienzo GrapesJS después de haber modificado el gjs-html para actualizar la única forma de obtener el la imagen importada para mostrar en el lienzo es destruir la instancia de GrapesJS y crear una nueva para que use el GJS-HTML en la inicialización.
En el momento de devolver la imagen seleccionada estoy fuera del alcance de GrapeJS, por eso tengo que modificar manualmente el almacenamiento local gjs-html. Estoy asignando la inicialización de GrapesJS a una variable y esperaba poder activar una actualización del editor a través de ella. Por desgracia, no he podido actualizar el lienzo para mostrar la nueva imagen.
Sé que GrapesJS no ha sido creado específicamente pensando en React, pero me pregunto si hay alguna forma de actualizar el Canvas sin tener que destruir y reinicializar el editor. He revisado la API y probado varios enfoques, pero hasta ahora no he podido encontrar una solución.
Me preguntaba si tienes algún consejo o enfoque que podrías sugerir.
Gracias
Respuestas (2)
Parece que se me olvidó el DomComponents, después de descargar y echar un vistazo al src de grapesjs-newsletter, estaba en openImportCommand y vi cómo se estaban actualizando los DomComponents. Así que añadí lo siguiente a mi método de react component WillReceiveProps justo después de actualizar el html en el almacenamiento local.
'Editor. DomComponents.getWrapper().set('content', '');
editor.setComponents($f('body').html());'
Ahora muestra la imagen correctamente, aún no es perfecta pero parece que voy por buen camino.
Parece que me olvidé de los DomComponents, después de descargar y echar un vistazo al src de grapesjs-newsletter, estaba en openImportCommand y noté cómo se estaban actualizando los DomComponents. Así que añadí lo siguiente a mi método de react component WillReceiveProps justo después de actualizar el html en el almacenamiento local. 'Editor. DomComponents.getWrapper().set('content', ''); editor.setComponents($f('body').html());' Ahora muestra la imagen correctamente, aún no es perfecta pero parece que voy por buen camino.
Oye, esto me ha puesto en el buen camino. ¡Gracias!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2170
[PREGUNTA] Componente personalizado: cómo configurar el editable como verdadero
Hola, he creado un tipo de componente personalizado, pero estoy teniendo algunos problemas para hacerlo editable. El componente es un "span...
Issue #2929
Sigue obteniendo CORS cuando se usa un endpoint falso para almacenamiento remoto
¡Hola a todos! Estoy usando grapesjs con vuejs y estoy teniendo problemas con el CORS. Creé mi endpoint falso con Beeceptor y tengo el códi...
Issue #2850
[PREGUNTA] Añadir un desplegable para bloquear usando Rasgos
Hola @artf, Espero que estés bien, Me preguntaba si podríais ayudarme con algún problema sencillo que estoy teniendo (recientemente he empe...
Issue #1888
[Pregunta] Añadir html personalizado dentro de Canvas
Hola, Estoy usando uvas para exportar un json personalizado con toda la información que necesito, en lugar de HTML y CSS. Para hacer eso, e...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.