Page.getMainComponent().view da información indefinida cuando se selecciona la página
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 = page.getMainFrame(); frame.once('loaded', () => { const rootEl = frame.getComponen...
Lee la respuesta completa abajo ↓Pregunta
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... });
Respuestas (3)
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 = page.getMainFrame();
frame.once('loaded', () => {
const rootEl = frame.getComponent().getEl();
console.log(rootEl.querySelector('section'));
});
});
Gracias, @artf.
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, proporciona:
- Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
- Tu GrapesJS número de versión
- Información sobre navegador y sistema operativo
- Cualquier mensaje de error de la consola del navegador
- Pasos para reproducir el problema
Lo que más ayuda:
- Ejemplo de código mínimo (no tu proyecto completo)
- Grabación de pantalla o captura de pantalla que muestra el problema
- Comportamiento esperado frente a comportamiento real claramente indicado
- Configuración GrapesJS que estás usando
Con estos detalles, los mantenedores pueden identificar y priorizar una solución mucho más rápido. El equipo de GrapesJS responde muy bien a los problemas bien documentados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3219
Añadir Tipo para bloque y css con nombre de clase
Hola @artf Estoy atascado en una cosa, quiero añadir un bloque en el que quiero añadir estilo con el nombre de la clase también Aquí está m...
Issue #3448
Aplicar una clase personalizada a un componente no parece funcionar
Estoy añadiendo una clase en un componente cuando no se cumplen ciertas condiciones, en este caso cuando no hay un conjunto de href. He vis...
Issue #3155
Adición de animaciones
Hola @artf quiero incluir animación en todos los bloques Aquí tienes un fragmento de código, pero no funciona. ¿Podrías ayudarme, por favor...
Issue #3446
No se pueden almacenar datos Token inesperado '-'
Por favor, ayudadme, quiero almacenar datos de GJS en mysql pero no consigo obtener ningún dato de frontend a back end Aquí es mi código: '...
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.