Issue #2860💬 AnsweredOpened June 28, 2020by MarlonV1230 reactions

Help loading FireStore data

快速解答by artf

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

Read full answer below ↓

Question

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;

Answers (1)

artfJuly 5, 2020

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

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.