Los dos métodos que necesitas
GrapesJS expone la página actual como cadenas: editor.getHtml() para
marcado y editor.getCss() para estilos. Todo lo demás — lleno
documentos, descargas, ZIPs — se basa en estos dos.
1. Leer HTML y CSS
const html = editor.getHtml();
const css = editor.getCss();2. Elaborar un documento completo
const doc = `<!doctype html>
<html>
<head><meta charset="utf-8"><style>${css}</style></head>
<body>${html}</body>
</html>`;
// Store `doc`, or render it server-side.3. Mostrar un modal de exportación
// Built-in: opens a modal with the current HTML/CSS for copy-paste.
editor.runCommand('export-template');4. Descargar un ZIP (index.html + style.css)
import grapesjs from 'grapesjs';
import exportPlugin from 'grapesjs-plugin-export';
const editor = grapesjs.init({
container: '#gjs',
plugins: [exportPlugin],
pluginsOpts: { 'grapesjs-plugin-export': {} },
});
// Trigger the ZIP download:
editor.runCommand('gjs-export-zip');Consejo: controla qué CSS incluye
// e.g. include rules even for components not currently on the canvas
const css = editor.getCss({ keepUnusedStyles: true });Consejos
Haz coincidir la exportación con el destino. Para el correo electrónico, haz el CSS en línea (a través de una herramienta como juice, o compila con el preajuste MJML) porque la mayoría de los clientes ignoran <style> los bloques. Para plantillas reutilizables, pasa getCss({ keepUnusedStyles: true }) para que las reglas de los componentes que no estén actualmente en el lienzo sobrevivan. La exportación ZIP grapesjs-plugin-export es genial para la transferencia, pero para publicación programática léelas getHtml()/getCss() directamente y guárdalas. Sea cual sea el objetivo, limpia el marcado antes de publicarlo si el editor estaba abierto a usuarios no confiables.
Requisitos previos
Necesitas un editor GrapesJS en funcionamiento. Todo lo que hay a continuación se basa en dos métodos —
editor.getHtml() y editor.getCss() — que regresan las cadenas
puedes almacenar, renderizar o empaquetar.
Controla qué CSS está incluido
getCss() Acepta opciones. Mantén las reglas para componentes que no están actualmente en el
Canvas (útil para plantillas reutilizables), o pasa un alcance específico de componentes:
const css = editor.getCss({ keepUnusedStyles: true });Exportar para correo electrónico (CSS en línea)
La mayoría de los clientes de correo ignoran <style> los bloqueos, así que primero instala el CSS
envío — o bien compilar con el preajuste MJML, o ejecutar el HTML/CSS exportado a través de un
Inliner como juice:
import juice from 'juice';
const inlined = juice(`<style>${editor.getCss()}</style>${editor.getHtml()}`);Descarga un código postal
import exportPlugin from 'grapesjs-plugin-export';
const editor = grapesjs.init({ container: '#gjs', plugins: [exportPlugin] });
editor.runCommand('gjs-export-zip'); // index.html + style.cssPersiste la exportación de forma programática
Para publicar, lee las cadenas directamente y PUBLICALAS en tu backend en lugar de
Dependiendo de una descarga — Almacenar html, css, y la versión completa
project Así que la página se renderiza rápido y se vuelve a abrir en el editor.
Mejores prácticas
Empareja la exportación con el destino: CSS en línea para el correo electrónico, un documento completo para páginas independientes, columnas HTML/CSS separadas para un CMS. Sanitise exportaba el margen antes publicando si el editor estaba abierto a usuarios no confiables. Versiona tus proyectos almacenados para que Puedes revertir una mala edición.
Próximos pasos
Persiste la exportación a tu servidor con el Backend del Gestor de Almacenamiento Guía, o la exportación en un reutilizable Plugin personalizado. Explorar Plugins GrapesJS en GJS. Mercado.
Preguntas frecuentes
¿Cómo saco el HTML y el CSS de GrapesJS?
editor.getHtml() y editor.getCss() devolver el margen
y estilos como cuerdas.
¿Cómo puedo permitir que los usuarios descarguen un código ZIP?
Añade grapesjs-plugin-export y ejecuta el
gjs-export-zip Comando para descargar un index.html Plus style.css.
¿GetCss solo incluye estilos usados?
Por defecto, devuelve los estilos gestionados de la página actual; Opciones de aprobación como
keepUnusedStyles para cambiar eso.