Por favor, ayudad con plantillas de importación y exportación
Como mínimo, necesitas comandos para guardar las plantillas y abrir un modal que muestre las plantillas guardadas, y para gestionar la carga de una plantilla en el editor. Para guardar una plantilla usando almacenamiento local puedes usar algo como '''js Let plantilla = ""; Usa esto para establecer el nombre de la pla...
Lee la respuesta completa abajo ↓Pregunta
Buenos días, por favor. Necesito ayuda para crear plantillas y luego cargarlas, realmente no puedo hacer nada, quiero poder guardar plantillas y luego cargarlas, llevo días sin intentarlo, soy nuevo en programación, he seguido todo al pie de la letra, y realmente lo único que me falta son las plantillas, por favor, si podéis ayudarme, Te estaré muy agradecido.
' const LandingPage = { HTML: '<!DOCTYPE HTML<html></head>><body><h1>test message</h1></body></html>', CSS: nulo, componentes: nulo, estilo: nulo, };
const editor = grapesjs.init({ componentes: Landing Page.components || LandingPage.html, Quizá queramos hacer la misma comprobación para los estilos estilo: Página de Aterrizaje.estilo || LandingPage.css, Offsets: 1, avisoOnUnload: 0, Contenedor: '#gjs', Altura: '100%', dragMode: 'absoluto', fromElement: cierto, permitenScripts: 1, storageManager: { id: 'gjs-', // Identificador de prefijo que se usará dentro del almacenamiento y carga tipo: 'local', // Tipo de almacenamiento autoguardado: falso, // Almacenar datos automáticamente autoload: false, // Autoload los datos almacenados en init stepsBeforeSave: 1, // Si el autoguardado está activado, indica cuántos cambios son necesarios antes de que se active el método de almacenamiento storeComponents: true, // Activar/Desactivar el almacenamiento de componentes en formato JSON storeStyles: true, // Activar/Desactivar el almacenamiento de reglas en formato JSON storeHtml: true, // Activar/Desactivar el almacenamiento de componentes como cadena HTML storeCss: true, // Activar/Desactivar el almacenamiento de reglas como cadena CSS urlStore: '/plant', urlLoad: '/plant', params: {}, // Para valores personalizados en peticiones }, Plugins: ['GJS-preset-webpage', 'grapesjs-tui-image-editor', 'gjs-component-countdown', 'grapesjs-lory-slider', 'grapesjs-tabs', 'grapesjs-tooltip', 'grapesjs-custom-code', 'gjs-social', 'gjs-modal', 'grapesjs-typed',], pluginsOpts: { 'gjs-preset-webpage': {}, 'grapesjs-tui-image-editor': { algunos: 'valor' }, 'gjs-component-countdown': {}, 'grapesjs-lory-slider': {}, 'grapesjs-tabs': {}, 'grapesjs-tooltip': { algunos: 'valor' }, 'grapesjs-custom-code': {},
'gjs-social': {},
'gjs-modal': { 'includeExternalLinks' : true },
'grapesjs-typed': {},
}
});
Añadir el botón
editor. Panels.addButton('options', [{
id: 'guardar-db',
claseNombre: 'fa fa-floppy-o icon-blank',
Comandamiento: 'guardar-db',
atributos: {título: 'Guardar la base de datos'}
}]);
Añadir el comando
editor. Commands.add
('save-db', {
run: function(editor, sender)
{
sender & & sender.set('active'); Apaga el botón
editor.store();
}
});
editor.on('storage:load', function(e) { console.log('Load', e);});
editor.on('storage:store', function(e) { console.log('Stored ', e);});
`
No sé qué hacer para crear un botón donde se muestren las plantillas creadas o dónde se guarden o cualquier cosa :( Quiero que todo esté localmente en mi ordenadorRespuestas (1)
Como mínimo, necesitas comandos para guardar las plantillas y abrir un modal que muestre las plantillas guardadas, y para gestionar la carga de una plantilla en el editor.
Para guardar una plantilla usando almacenamiento local puedes usar algo como '''js Let plantilla = ""; Usa esto para establecer el nombre de la plantilla, podrías poner este valor para escuchar un campo de entrada
editor. Commands.add('save-template', { run: function(editor, sender) { sender & & sender.set('active'); Apaga el botón sea components = editor.getComponents(); let style = editor.getStyle() let templateData = { componentes: componentes, Estilo: Estilo }; localStorage.setItem(plantilla, JSON.stringify(temlateData)); } });
>Para abrir un modal con las plantillas que puedes usar
'''js
const modal = editor. modal;
cmd.add('open-templates-modal', {
run: function(editor, sender)
{
sender & & sender.set('active'); Apaga el botón
modal.setTitle('<div>Elegir plantilla</div>');
modal.setContent(/*Coloca tus plantillas aquí*/);
modal.open();
modal.getModel().once('change:open', function () {
Haz cosas antes de que se abra modal
});
}
});
Para cargar una plantilla puedes usar algo como '''js dado que cada plantilla está representada por un elemento con la clase gjs-plantilla document.getElementsByClassName('gjs-template').addEventListener('click', e => { Dado que cada elemento que representa una plantilla tiene un atributo de datos que es su clave en el almacenamiento local let templateData = JSON.parse(localStorage.loadItem(e.currentTarget.dataset.name)); editor.setComponents(templateData.components); editor.setStyle(templateData.style); modal.close(); });
Ahora solo tienes que encontrar una forma de hacer la representación visual de las plantillas, es decir, lo que va en 'modal.setContent'.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2361
Las imágenes no se muestran por correo electrónico
Mi equipo y yo usamos grapesjs para crear plantillas de correo y las estamos almacenando en un bucket AWS S3. Hemos enviado un correo elect...
Issue #2540
[Pregunta] Empezando
Soy diseñador, quiero probar con GrapeJS. Tengo entendido que puedo usar GrapeJS localmente, similar a WordPress. Conozco Commandline y seg...
Issue #2776
[PREGUNTA] ¿Es posible usar grapejs para documentos imprimibles?
Hola, tengo la necesidad de crear un editor de plantillas de arrastrar y soltar para una aplicación de escritorio, para generar informes bo...
Issue #2001
No se puede acceder a la aplicación en la red LAN
Hola @artf, ¿Podrías ayudarme aquí, por favor? No puedo acceder a esta aplicación en la red LAN, ¿podrías ayudarme con qué hacer para que e...
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
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.