GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.36k stars 4.05k forks source link

Help loading FireStore data #2860

Closed MarlonV123 closed 4 years ago

MarlonV123 commented 4 years ago

It helps with FireStore, since I've managed to save to the Firestore database, now I'd like to know how can I load those values from the database and display them as a template. I am new and I need help, sorry for the bad, this is my code.

The data I use is from an example, so it doesn't matter much if others see it

var editor = grapesjs.init({
      height: '100%',
      showOffsets: 1,
      noticeOnUnload: 0,
      storageManager: { type: 'firestore',
                      id: 'gjs-',             // Prefix identifier that will be used on parameters
                      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
                    },
        container: '#gjs',
        fromElement: true,

        plugins: ['grapesjs-firestore'],
        pluginsOpts: {
          'grapesjs-firestore': {
            docId: 'someID',
            apiKey: 'AIzaSyDbc1HECiWstp_T8zW-etJEdH84THUlIYg',
            authDomain: 'radarsystem-edit-land.firebaseapp.com',
            projectId: 'radarsystem-edit-land',
            collectionName: 'template',
          }
        }
      });
            // 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('Load template ', e);
      });
      editor.on('storage:store', function(e) {
        console.log('Save template', e);
      });
      editor.on('storage:error', function(e) {
        console.log('Error template ', e);
      });
      window.editor = editor;
artf commented 4 years ago

You can enable autoload: true, or you can load data programmatically by calling editor.load()