Cargando 'component' y 'styles' desde 'pageManager'

Una cosa molesta es que el editor está preinstalando los estilos predeterminados que aparecen a continuación, que al guardar los estilos tienen numerosos duplicados:

* {
  Tamaño de caja: caja de borde;
}
cuerpo {
  marje: 0;
}

Edito: Mirando la documentación finalmente conseguí encontrar 'protectedCss' y cuando está en vacío detiene que los estilos estén prepuestos.

Hola @mapsmarketing actualmente GrapesJS no puede importar correctamente documentos HTML como cadena, así que el analizador salta elementos como 'html', 'head', 'body' y solo devuelve lo que está analizado dentro del 'body'; una solución que podrías hacer ahora mismo es pasar un componente como objeto '''js component: { Atributos: { ID: 'IGNT' }, componentes: '<div class="mi-el">¡Mundo de prueba!</div>', },

En cuanto a los estilos, es el problema del analizador CSSOM predeterminado del navegador, por favor consulta este [plugin](https://github.com/GrapesJS/parser-postcss)

Hola @artf,

He encontrado una forma de conseguir correctamente los atributos del 'cuerpo' junto con los estilos guardados mediante el siguiente método:

const pageManager = editor. Páginas;
const page = pageManager.get('my-page-id').toJSON();
const component = pageManager.get('my-page-id').getMainComponent();
page.styles = editor.getCss({ component });

He notado que tu Page.toJSON muestra todo lo de la página especificada. Sin embargo, no parece que los 'estilos' sean correctamente (siempre está configurado como indefinido para mí), así que recupero los estilos de la página activa a través del editor y sobrescribo los que están en JSON. Creo que los 'estilos' no se establecen debido a la comprobación de 'if (!props.frames)' que tienes en Page.ts

A continuación se muestra un ejemplo de cómo estoy cargando en HTML. Estoy usando 'frames' porque 'component' no funciona con la estructura proporcionada. Estoy cargando los estilos sin usar el plugin de analizador y parece que se carga sin problemas.

const pageJSON = {...}; Contiene los 'marcos' y 'estilos'
const editor = grapesjs.init({
    pageManager: {
        páginas: [
            {
                id: 'mi-id-página',
                frames: pageJSON.frames,
                estilos: pageJSON.styles,
            }
        ]
    }
});

También noté que la función PageManager.select no actualiza los estilos al cambiar entre páginas, lo que me obliga a ejecutar: 'editor.setStyle(pageJSON.styles);'

Gracias por informar de esto, @mapsmarketing.

Buena pregunta sobre Cargar 'component' y 'styles' desde 'pageManager'. El enfoque recomendado con StyleManager es usar la API orientada a eventos.

Empieza aquí:

1. Consulta la documentación de GrapesJS de tu módulo específico
2. Busca el método del oyente de eventos 'on()'
3. La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));

**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!