Los IDs de elementos HTML se incrementan en diferentes páginas cargadas en projectData
hola @bgrand-ch, creo que algún día todas las entidades de Grapesjs tendrán un 'UID' global, así que a largo plazo esperaría que este problema se solucionara 🤞
Lee la respuesta completa abajo ↓Pregunta
Versión GrapesJS
- Confirmo que se debe usar la última versión de GrapesJS
¿Qué navegador usas?
Firefox 109
Enlace de demo reproducible
https://grapesjs.com/demo.html
Describe el bicho
Hola,
He notado que cuando cargo varias páginas en el projectData que tienen el mismo 'id' que se usa en el HTML, Grapes incrementa automáticamente el 'id' en cada página aunque sean páginas diferentes.
Para demostrar este problema, encontrarás un fragmento de código abajo donde inicio grapesjs con un 'projectData' que contiene dos páginas usando ids idénticos en algunas etiquetas HTML.
En la lista HTML resultante, puedes ver que los ids como 'body' y 'main-title' se incrementan a 'body-2' y 'main-title-2' en la segunda página.
'''js const editortest = grapesjs.init({ Sin cabeza: Cierto, projectData: { páginas: [ { "marcos": [ { "componente": { "tipo": "envoltorio", "estilizable": [ "Antecedentes", "color de fondo", "imagen de fondo", "repetición de fondo", "apego de fondo", "posición de fondo", "tamaño de fondo" ], "atributos": { "id": "cuerpo" }, "componentes": [ { "tagName": "section", "componentes": [ { "etiquetaNombre": "h1", "tipo": "texto", "atributos": { "id": "título principal" }, "componentes": [ { "tipo": "nodo de texto", "contenido": "Este es un título sencillo" } ] }, { "tipo": "texto", "componentes": [ { "tipo": "nodo de texto", "content": "This is just a Lorem text: Lorem ipsum dolor sit amet" } ] } ] } ] } } ], "id": "ljc0blhC1ZeiCYyY" }, { "marcos": [ { "componente": { "tipo": "envoltorio", "estilizable": [ "Antecedentes", "color de fondo", "imagen de fondo", "repetición de fondo", "apego de fondo", "posición de fondo", "tamaño de fondo" ], "atributos": { "id": "cuerpo" }, "componentes": [ { "tagName": "section", "componentes": [ { "etiquetaNombre": "h1", "tipo": "texto", "atributos": { "id": "título principal" }, "componentes": [ { "tipo": "nodo de texto", "contenido": "Este es otro título" } ] }, { "tipo": "texto", "componentes": [ { "tipo": "nodo de texto", "contenido": "Otro texto" } ] } ] } ] } } ], "id": "1zKkQnGVzy8nKXKE" } ] } })
Let Pages = EditorTest. Pages.getAll().map(page => { const component = page.getMainComponent(); return editortest.getHtml({ component }) });
console.log(páginas)
El resultado de las 'páginas':
'''json
[
"<body id=\"body\"><section><h1 id=\"main-title\">Este es un título sencillo</h1><div>Esto es solo un texto de Lolorem: Lorem ipsum dolor sit amet</div></section></body>",
"<body id=\"body-2\"><section><h1 id=\"main-title-2\">Este es otro título</h1><div>Otro texto</div></section></body>"
]
Código de conducta
- Acepto seguir el Código de Conducta de este proyecto
Respuestas (4)
hola @bgrand-ch, creo que algún día todas las entidades de Grapesjs tendrán un 'UID' global, así que a largo plazo esperaría que este problema se solucionara 🤞
Al principio, quería generar todas las páginas juntas para tener una única salida CSS para todas ellas. Pero ahora estoy probando otra solución para los estilos.
Así que para el problema del 'id', generar cada página por separado podría ser una solución. Gracias por la idea.
Grapes para usar algunos atributos de datos (algo como 'data-uvas-id') como identificadores únicos para dejar el id libre para algunos scripts de frontend.
Me gusta esta idea 💯
Gracias por informar de esto, @quentin-bettoum.
El problema con HTML elements ids incrementados en diferentes páginas cargadas en projectData parece ser una condición de carrera o un problema de gestión de estado. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.
Qué probar:
- Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);
2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos
3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
Es seguro interactuar con el componente aquí
});
Recomendaciones de siguientes pasos:
- Prueba con la última versión de GrapesJS si no lo has hecho
- Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
- Incluir errores de GrapesJS, de navegador y de consola en tu informe
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #5584
el evento "storage:end:load" no se activa cuando todos los componentes están montados en el lienzo
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v91 Enlace de demo reproducible ht...
Issue #4848
El contenido de los componentes se establece en cadena vacía tras la edición en línea
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Firefox v91.4.1 Enlace de demo reproducib...
Issue #3794
RTE Texto superpuesto en un componente de texto básico cuando el ancho y la altura son el 100% del lienzo
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión 93.0.4577.82 (Versión oficial) (6...
Issue #5379
Las modificaciones de clase de los componentes no se detectan automáticamente
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Chrome Versión 116Enlace de demo reproducib...
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.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.