No se puede renderizar el html/css de GrapesJS al ver la página en el frontend v0.14.50

He creado una página y quiero renderizarla en frontend; la estrategia que he implementado es guardar mi objeto HTML y JSON y en frontend pasar ambos. Luego inicializo GrapesJS y establezco su estilo al JSON que obtuve de la base de datos, y luego obtengo el CSS de ese objeto.

al renderizar el editor

'''js var editor = grapesjs.init({ // ... Configuraciones }) editor.setStyle(JSON.parse([json array de base de datos])) editor.setComponent ([texto HTML de la página de la base de datos])

**al renderizar el frontend**

'''js
var editor = grapesjs.init({
// ... Configuraciones
})
editor.setStyle(JSON.parse([json array de base de datos]))
var styles = editor.getCss()
crear elemento de estilo
poner estilos en style.innerHTML
Estilo de adicción al cuerpo o a la cabeza

Hice lo mismo usando editor con CMS y funciona genial, pero de alguna manera no puedo cargar el CSS completo desde JSON en el frontend.

Si lo estoy haciendo mal, por favor corrígeme.

Gracias

Así debería verse y mostrarse al usar el editor. Renderiza el CSS correcto en el navegador en el que he usado el editor, pero los resultados son diferentes si intento usar de incógnito

! captura de pantalla 2019-01-23 a las 5:48 35 am

Esto es lo que voy a conseguir ! captura de pantalla 2019-01-23 a las 5:53 00 am

Este es mi JSON guardado, que obtengo con getStyle y lo uso con setStyle

'''json [{ "selectores": [], "selectorsAdd": "", "estilo": {}, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [], "selectorsAdd": "*", "estilo": { "tamaño de caja": "caja de borde" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [], "selectorsAdd": "body", "estilo": { "margen": "0" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "fila", "etiqueta": "fila", "tipo": 1, "activo": cierto, "Privado": 1, "protegido": falso }], "selectorsAdd": "", "estilo": { "pantalla": "flex", "justificar-contenido": "arranque flexible", "alinear-ítems": "estirar", "flex-wrap": "nowrap", "relleno": "10px" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "célula", "etiqueta": "célula", "tipo": 1, "activo": cierto, "Privado": 1, "protegido": falso }], "selectorsAdd": "", "estilo": { "altura mínima": "75px", "flex-grow": "1", "Base flexible": "100%" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "c2645", "etiqueta": "c2645", "tipo": 1, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "tamaño de fuente": "36px", "text-align": "center", "color": "#ffffff", "familia de fuentes": "Arial, Helvetica, sans-serif", "peso-fuente": "400" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "i9gw", "etiqueta": "i9gw", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "color de fondo": "rgba(247, 136, 47, 1)", "acolchado": "10px 35px 10px 35px" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "IS35K", "sello": "is35k", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px 10px 10px 10px", "color": "#ffffff", "familia de fuentes": "Arial, Helvetica, sans-serif", "tamaño de fuente": "16px", "alineación de texto": "justificar" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "ixx6b", "sello": "ixx6b", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "acolchado": "10px 35px 10px 35px", "color de fondo": "#FF9C43" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "ieqt4", "etiqueta": "ieqt4", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "tamaño de fuente": "36px", "color": "#ffffff", "familia de fuentes": "Arial, Helvetica, sans-serif", "text-align": "center" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "izj0n", "sello": "izj0n", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "familia de fuentes": "Arial, Helvetica, sans-serif", "tamaño de fuente": "20px", "color": "#ffffff", "text-align": "center", "font-weight": "700" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "Ir9zk", "sello": "ir9zk", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "pantalla": "bloque en línea", "relleno": "5px", "min-height": "50px", "min-width": "50px", "decoración de texto": "ninguna" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "IIHGL", "sello": "iihgl", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "text-align": "center" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "iconos materiales", "etiqueta": "iconos materiales", "tipo": 1, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "tamaño de fuente": "60px", "color": "#ffffff", "text-align": "center" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "iconos materiales", "etiqueta": "iconos materiales", "tipo": 1, "activo": cierto, "Privado": falso, "protegido": falso }, { "Nombre": "MD-60", "Etiqueta": "MD-60", "tipo": 1, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "color": "#ffffff", "text-align": "center" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "ISQ9C", "sello": "isq9c", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "familia de fuentes": "Arial, Helvetica, sans-serif", "tamaño de fuente": "24px", "color": "#ffffff", "text-align": "center" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "iht1i", "sello": "iht1i", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "familia de fuentes": "Arial, Helvetica, sans-serif", "color": "#ffffff", "alineación de texto": "justificar" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "iwpz2", "etiqueta": "iwpz2", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "pantalla": "bloque en línea", "relleno": "5px", "min-height": "50px", "min-width": "50px", "color": "#ffffff", "decoración de texto": "ninguna" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "iwas3", "sello": "iwas3", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "text-align": "center" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "iy30b", "sello": "iy30b", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "color": "#ffffff", "text-align": "center", "decoración de texto": "ninguna", "tamaño de fuente": "60px" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "iyw2f", "sello": "iyw2f", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "tamaño de fuente": "24px", "color": "#ffffff", "text-align": "center", "familia tipo": "Arial, Helvetica, sans-serif" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "io9ql", "sello": "io9ql", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "familia de fuentes": "Arial, Helvetica, sans-serif", "color": "#ffffff", "alineación de texto": "justificar" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "imheb", "etiqueta": "imheb", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "pantalla": "bloque en línea", "relleno": "5px", "min-height": "50px", "min-width": "50px", "color": "#ffffff", "decoración de texto": "ninguna" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "i0kz6", "sello": "i0kz6", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "text-align": "center" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "ikwpc", "sello": "ikwpc", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "tamaño de fuente": "60px", "color": "#ffffff", "text-align": "center" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "i2673", "etiqueta": "i2673", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "familia de fuentes": "Arial, Helvetica, sans-serif", "tamaño de fuente": "24px", "color": "#ffffff", "text-align": "center" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "igkln", "sello": "igkln", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "color": "#ffffff", "alineación de texto": "justificar", "familia tipo": "Arial, Helvetica, sans-serif" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "iqpjf", "sello": "iqpjf", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "pantalla": "bloque en línea", "relleno": "5px", "min-height": "50px", "min-width": "50px", "color": "#ffffff", "decoración de texto": "ninguna" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "iwhrv", "sello": "iwhrv", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "text-align": "center" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "Ifid", "etiqueta": "IfII", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "color": "#ffffff", "familia de fuentes": "Arial, Helvetica, sans-serif", "tamaño de fuente": "24px", "text-align": "center" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "IP6EEC", "etiqueta": "IP6EEC", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "color": "#ffffff", "alineación de texto": "justificar", "familia tipo": "Arial, Helvetica, sans-serif" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "i0kw6f", "etiqueta": "i0kW6f", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "acolchado": "10px 35px 10px 35px", "color de fondo": "#FFB158" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "IUU2F3", "etiqueta": "IUU2F3", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "color": "negro", "radio de frontera": "50% 50% 50% 50%", "ancho": "100%" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "i7thxq", "sello": "i7thxq", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "base flexible": "33,33%", "display": "block" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "ih7lnk", "sello": "ih7lnk", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "familia de fuentes": "Arial, Helvetica, sans-serif", "tamaño de fuente": "24px", "color": "#ffffff" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "Nombre": "ihwhwh", "sello": "ihwhwh", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "familia de fuentes": "Arial, Helvetica, sans-serif", "color": "#ffffff", "alineación de texto": "justificar" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "irb7x9", "etiqueta": "irb7x9", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "familia de fuentes": "Arial, Helvetica, sans-serif", "color": "#ffffff", "alineación de texto": "justificar" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "iha9vx", "sello": "iha9vx", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "familia de fuentes": "Arial, Helvetica, sans-serif", "color": "#ffffff" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "iio6xw", "etiqueta": "iio6xw", "tipo": 2, "activo": cierto, "Privado": falso, "protegido": falso }], "selectorsAdd": "", "estilo": { "relleno": "10px", "color": "#fcfcfc", "text-align": "derecha", "familia tipo": "Arial, Helvetica, sans-serif" }, "mediaText": "", "state": "", "estilizado": Cierto, "atRuleType": "", "singleAtRule": 0, "importante": 0 }, { "selectores": [{ "nombre": "fila", "etiqueta": "fila", "tipo": 1, "activo": cierto, "Privado": 1, "protegido": falso }], "selectorsAdd": "", "estilo": { "Envoltura flexible": "Envoltura" }, "mediaText": "(ancho máximo: 768px)", "state": "", "estilizado": Cierto, "atRuleType": "media", "singleAtRule": 0, "importante": 0 }]