Issue #1508💬 RespondidoAbierto el 12 de octubre de 2018por ghostReacciones 0

Actualizar Canvas después de cambiar gjs-html externamente

Respuesta rápidapor ghost

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)

ghost16 de octubre de 2018

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.

cederron1 de mayo de 2022

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.

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 →

Explorar categorías de plugins

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