Import and export templates help please

Question

Good morning, please I need help to create templates and then load them, I really cannot do anything, I want to be able to save templates, later load them, I have been days without trying, I am new to programming I have followed everything to the letter , and really the only thing that I am missing are the templates please if you can help me, I will be very grateful to you.

const LandingPage = { html:<!DOCTYPE HTML><html></head><body><h1>test message</h1></body></html>`, css: null, components: null, style: null, };

  const editor = grapesjs.init({
    components: LandingPage.components || LandingPage.html,
    // We might want to make the same check for styles
    style: LandingPage.style || LandingPage.css,
    showOffsets: 1,
    noticeOnUnload: 0,
    container: '#gjs',
    height: '100%',
    dragMode: 'absolute',
    fromElement: true,
    allowScripts: 1,
    storageManager: {
      id: 'gjs-',             // Prefix identifier that will be used inside storing and loading
      type: 'local',          // Type of the storage
      autosave: false,         // Store data automatically
      autoload: false,         // Autoload stored data on init
      stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
      storeComponents: true,  // Enable/Disable storing of components in JSON format
      storeStyles: true,      // Enable/Disable storing of rules in JSON format
      storeHtml: true,        // Enable/Disable storing of components as HTML string
      storeCss: true,         // Enable/Disable storing of rules as CSS string
      urlStore: '/plant',
      urlLoad: '/plant',
      params: {},   // For custom values on requests
    },
    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': { some: 'value' },
      'gjs-component-countdown': {},
      'grapesjs-lory-slider': {},
      'grapesjs-tabs': {},
      'grapesjs-tooltip': { some: 'value' },
      'grapesjs-custom-code': {},

Code SnippetTEXT

'gjs-social': {},
          'gjs-modal': { 'includeExternalLinks' : true },
          'grapesjs-typed': {},
        }
      });

      // Add the button
      editor.Panels.addButton('options', [{
        id: 'save-db',
        className: 'fa fa-floppy-o icon-blank',
        command: 'save-db',
        attributes: {title: 'Save DB'}
      }]);

      // Add the command
      editor.Commands.add
      ('save-db', {
          run: function(editor, sender)
          {
            sender && sender.set('active'); // turn off the button
            editor.store();
          }
      });

      editor.on('storage:load', function(e) { console.log('Loaded ', e);});
      editor.on('storage:store', function(e) { console.log('Stored ', e);});
`

I don't know what to do to do to create a button where the created templates are displayed or where they are saved or anything :( I want everything to be locally on my computer

Answers (1)

Ju99ernaut• May 25, 20204 reactions

At the bare minimum you need commands for saving the templates and opening a modal that shows the saved templates, and to handle loading a template onto the editor.

To save a template using local storage you can use something like

let template = ""; //Use this to set the template name, you could set this value to listen to an input field

editor.Commands.add('save-template', {
   run: function(editor, sender)
   {
      sender && sender.set('active'); // turn off the button
      let components = editor.getComponents();
      let style = editor.getStyle()
      let templateData = {
         components: components,
         style: style
      };
      localStorage.setItem(template, JSON.stringify(temlateData));
   }
});

To open a modal with the templates you can use

const modal = editor.Modal;

cmd.add('open-templates-modal', {
   run: function(editor, sender)
   {
      sender && sender.set('active'); // turn off the button
      modal.setTitle('<div>Choose Template</div>');
      modal.setContent(/*Place your templates here*/);
      modal.open();
      modal.getModel().once('change:open', function () {
         //do stuff before modal open
      });
   }
});

To load a template you can use something like

//given that each template is represented by an element with class gjs-template 
document.getElementsByClassName('gjs-template').addEventListener('click', e => {
   //given that each element representing a template has a data attribute that is it's key in local storage
   let templateData = JSON.parse(localStorage.loadItem(e.currentTarget.dataset.name));
   editor.setComponents(templateData.components);
   editor.setStyle(templateData.style);
   modal.close();
});

All you have to do now is find a way of making the visual representation of the templates i.e. what goes in modal.setContent.

Import and export templates help please

Question

Answers (1)

Related Questions and Answers

How to trigger the 'Import Template (modal)' on page load

custom component save

Want to replace wrapper div

FEAT: Create the canvas from a URL

Paid Plugins That Match This Issue

Browse Plugin Categories