Hola, ¿cuál es la mejor manera de implementar el gestor de varias páginas en una app de React? He implementado esto con éxito sin el gestor de páginas así: Para la implementación del gestor de páginas pruebo esto: Aquí, me queda indefinido para el gestor de páginas. Agradecería cualquier ayuda, por favor. Gracias
artf
Creo que simplemente estás usando una versión antigua de GrapesJS
ClaudeCode
Gracias por informar de esto, @Ubanna. Buena pregunta sobre indefinido para el gestor de páginas múltiples en React. El enfoque recomendado con StyleManager es usar la API orientada a eventos. Empieza aquí: Consulta la documentación de Gra...
0.17.19 ¿Puedes reproducir el error de la demo? SÍ ¿Cuál es el comportamiento esperado? Había hecho una pregunta sobre la actualización de iframe (#3413). La solución propuesta funcionaba para esa versión (0.17.3) y, tras ejecutar el fragmento de código, el iframe debería actualizarse y el lienzo debería verse con los...
artf
Tendría que comprobar por qué sigue intentando quitar el marco, pero por ahora, simplemente sáltate esta línea 'frameView.remove()'
theSC0RP
@artf. Gracias. Esto funciona cuando se hace una vez. Si hago alguna acción como hacer clic dentro del lienzo y luego ejecuto 'frameWrapView.render();' otra vez, me aparece otro error. La captura de pantalla y un vídeo de este error se adj...
artf
Intentaré arreglarlo en la próxima versión, pero por ahora tienes que desseleccionar componentes antes de 'frameWrapView.render()' y volver a seleccionarlos después de renderizar
¿Qué intentas añadir a GrapesJS? Mejor soporte para Shadow DOM, que permite a los desarrolladores renderizar GrapesJS dentro de un elemento Shadow sin tener que pasar elementos específicamente en lugar de selectores en la configuración. Describe tu solicitud de función detallado Cuando actualmente se usan selectores d...
artf
Hola @AStoker no entiendo cuál es el verdadero problema con tu ejemplo (aparte de no cargar estilos GrapesJS dentro de tu dom de sombras). Si estás añadiendo shadow dom, obviamente no puedes hacer este 'contenedor: '#gjs'', pero aún puedes...
AStoker
El problema es que debo pasar elementos HTML por todas partes y no puedo usar selectores. Esto puede volverse engorroso de escribir, ya que ahora debo usar el selector de consultas del Dom sombra para cada viñeta, cada elemento, cualquier...
AStoker
Actualicé el JSFiddle para que veáis lo que tenemos que hacer para conseguir estilos dentro de Shadow DOM. Pero, desafortunadamente, el CSS que GrapesJS añade automáticamente existe en el cuerpo y contamina las hojas de estilo globales y e...
Soy nuevo en el mundo de las uvas, estoy intentando hacer los bloques en un estilo diferente al arrastrar por ejemplo, los bloques de imagen 1 - cuando no se arrastra o flota toma el estilo A. 2- cuando el estacionamiento toma el estilo B . 3- Cuando se arrastra, toma el estilo C (cuando está sobre el lienzo). ¿Alguie...
ronaldohoch
Quizá con estos eventos puedas hacerlo: https://grapesjs.com/docs/api/editor.html#blocks o https://grapesjs.com/docs/api/editor.html#canvas
artf
En tal caso, probablemente una interfaz de gestor de bloques completamente personalizada sea la única opción (por ejemplo, renderizada por tu propio componente BlockManager en Angular). Ya debería ser posible, pero preferiría tomarme mi ti...
hadeel94
En tal caso, probablemente una interfaz de gestor de bloques completamente personalizada sea la única opción (por ejemplo, renderizada por tu propio componente BlockManager en Angular). Ya debería ser posible, pero preferiría tomarme mi ti...
Hola @artf, Quiero obtener el elemento HTML de la página seleccionada. Pero devuelve indefinido al usar el siguiente código: '''js editor.on('page:select', page => { page.getMainComponent().view.el.querySelector('section'); Hay una etiqueta de sección dentro de esa página... }); ```
artf
Hola @iabhiyaan, cuando se activa 'page:select', los iframes dentro del lienzo aún no están cargados, así que solo tienes que esperar a que estén cargados antes de acceder a su DOM. '''js editor.on('page:select', page => { const frame = pa...
iabhiyaan
Gracias, @artf.
ClaudeCode
Gracias por informar de esto, @iabhiyaan. Gracias por compartir tu informe sobre page.getMainComponent().view da un momento indefinido de cuándo se selecciona la página. Para ayudar al equipo a investigar y priorizar esto: Por favor, propo...
Tengo algunas plantillas que se generaron con la v0.14.5. ¿Cómo puedo "actualizarlas" a la última versión? Tienen clases asociadas y veo que la versión más reciente ya no añade clases a los elementos. Contexto: usamos componentes a medida y algunos valores predeterminados (por ejemplo, arrastrable, redimensionable, et...
artf
Tienen clases asociadas y veo que la versión más reciente ya no añade clases a los elementos. No estoy seguro de a qué te refieres, las clases deberían importarse como antes.Contexto: usamos componentes personalizados y algunos valores pre...
acip
Hola, gracias por la respuesta rápida. Aquí está la plantilla generada por la v0.14.5 https://jsonblob.com/535ae06f-d4f6-11eb-8bc1-415e99da64cb Así es como se ve https://ibb.co/Zz8qg2J Hemos cambiado los atributos y el estilo predeterminad...
acip
He configurado la versión antigua vs nueva para una plantilla existente: https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.14.5-old-template.html https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.16.45-old-template.html...
La compilación de ejecución de NMM da un error @version 0.17.3.. /.. /lib/codemirror en ./src/editor/dist/grapes.min.js.. /css/css en ./src/editor/dist/grapes.min.js.. /javascript/javascript en ./src/editor/dist/grapes.min.js.. /xml/xml en ./src/editor/dist/grapes.min.js
artf
Cuéntanos más detalles sobre tu montaje y el error
iabhiyaan
'''js { "nombre": "grapesjs", "descripción": "Marco de construcción web libre y de código abierto", "versión": "0.17.3", "autor": "Artur Arseniev", "licencia": "BSD-3-Cláusula", "página principal": "http://grapesjs.com", "principal": "dist...
iabhiyaan
Build de NPM Run CSS funciona bien. Pero npm run build da esos errores
Necesito generar el modelo de objetos JSON de la página diseñada en lugar de generar el código HTML, CSS y JS, ¿existe alguna función que devuelva el objeto JSON de la página diseñada? Además, estoy implementando el creador de interfaces en Angular, así que la versión typescript será preferida.
artf
Te recomendaría mucho leer las páginas de documentación como Components y Storage Manager donde se cubren todas estas partes.
ClaudeCode
Gracias por informar de esto, @ola-893. Excelente pregunta sobre FEAT: Modelo de objeto JSON de la página generada. El enfoque recomendado con StyleManager es usar la API orientada a eventos. Empieza aquí: Consulta la documentación de Grap...
Hola, Soy bastante nuevo en este gran proyecto, pero estoy intentando cambiar la visualización de un componente onClick de otro componente después de seleccionar el id del componente en el menú desplegable. Estoy teniendo problemas para añadir un atributo onClick al componente después de seleccionarlo desde un rasgo d...
ClaudeCode
Gracias por informar de esto, @tmrowe123. Gracias por compartir tu informe sobre Intentar añadir un atributo onClick al componente. Para ayudar al equipo a investigar y priorizar esto: Por favor, proporciona: Un ejemplo mínimo reproducible...
¿Es posible publicar el código completo de la demo desde el principio? Hay muchos pequeños fragmentos que dependen unos de otros. Sería bueno tener estos en un repositorio como ramas separadas para que los desarrolladores puedan ver el resultado final esperado. En muchos casos se saltaron cosas simples o la ubicación...
anlumo
Sí, el problema es que la demo define su propio plugin que luego importa todos los demás plugins. Esto hace que intentar averiguar cómo hacer las cosas sea muy difícil, porque tienes que seguir muchos redirecciones entre diferentes reposit...
artf
El código final del tutorial para empezar es en realidad aquí (y su grapesjs config).Sí, el problema es que la demo define su propio plugin que luego importa todos los demás plugins @anlumo sí, en realidad los plugins actuales de presets e...
erpardeepjain
@artf pero ¿cómo ejecutar ese archivo o archivo de configuración ya que el archivo principal está en Vue y el proyecto base en React, ¿puedes indicarme cómo hacerlo funcionar como se muestra en la demo?