title: Is it posible to have multiple grapesjs instances on the same page?
body: <p>I am using Boostrap 4 Tabs. On each tab, I have an instance of grapesjs.
  One is using the webpage plugin: </p>
  
  <pre><code>const productEditor = grapesjs.init({
              container: '#gjs',
              fromElement: 1,
              showOffsets: 1,
              allowScripts: 1,
              plugins: ['gjs-preset-webpage'],
              pluginsOpts: {
                  'gjs-preset-webpage': {
                      // ... other options
                  }
              },
              storageManager: {
                  id: 'gjs-',
                  type: 'remote',
                  autosave: false,
                  autoload: true,
                  stepsBeforeSave: 3,
                  urlStore: '',
                  urlLoad: '',
                  contentTypeJson: true
              },
              canvas: {},
          });
  </code></pre>
  
  <p>the other tab uses the newsletter plugin</p>
  
  <pre><code>const newsletterEditor = grapesjs.init({
              container: '#newsletter-gjs',
              fromElement: 1,
              showOffsets: 1,
              allowScripts: 1,
              plugins: ['gjs-preset-newsletter'],
              pluginsOpts: {
                  'gjs-preset-newsletter': {
                      modalTitleImport: 'Import template',
                      // ... other options
                  }
              },
              storageManager: {
                  id: 'gjs-',
                  type: 'remote',
                  autosave: false,
                  autoload: true,
                  stepsBeforeSave: 3,
                  urlStore:'',
                  urlLoad: '',
                  contentTypeJson: true
              },
              canvas: {},
          });
  </code></pre>
  
  <p>What I am noticing that the <code>productEditor</code> is working properly. For example, I can click the "text center" button and all is well. On the second tab, the "text center" button doesn't work. </p>
  
  <p>I think it is not working because the system is seeing the first instance of grapesjs and ignoring the second. Is there a proper way to initialize multiple grapesjs instances on the same page?</p>
  
  <p>Thank you for any suggestions!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I thought about doing something like this:</p>
  
  <pre><code>$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
      const $activeTab = $(event.target); // newly activated tab
      const previousTab = event.relatedTarget; // previous active tab
  
              if ($activeTab[0].hash === '#tab-2') {
                  console.log('product tab is active');
              }
  
              if ($activeTab[0].hash === '#tab-3') {
                  console.log('newsletter tab is active');
              }
          });
  </code></pre>
  
  <p>That way I could check which tab was open, then destroy or init whichever tab was currently active. </p>