search

Ju99ernaut / grapesjs-template-manager

Template and page manager for grapesjs
MIT License
82 stars 36 forks source link

Uncaught TypeError: #7

Closed FranklinsHand closed 3 years ago

FranklinsHand commented 3 years ago

I am working on getting the template manager set up (props btw, tool looks really cool), but I am running into a few issues.

I am on GrapesjsV.17.2, and running everything in the browser. Whenever I use any of the template manager panel buttons, I get the following errors corresponding to their respective button presses.

Uncaught TypeError: t.loadAll is not a function Uncaught TypeError: e.Storage.getCurrentStorage(...).setIsTemplate is not a function Uncaught TypeError: e.Storage.getCurrentStorage(...).delete is not a function

This is my code currently index.html 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Multi pages POC</title>
  <link rel='stylesheet' href='https://unpkg.com/grapesjs@0.17.2-rc.1/dist/css/grapes.min.css'><link rel="stylesheet" href="./style.css">
  <link href="https://unpkg.com/grapesjs-template-manager/dist/grapesjs-template-manager.min.css" rel="stylesheet">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="app-wrap">
  <div class="editor-wrap">
     <div id="gjs"></div>
  </div>
</div>
<!-- partial -->
  <script src='https://unpkg.com/grapesjs@0.17.2-rc.1/dist/grapes.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue@2'></script>
<script src='https://unpkg.com/grapesjs-blocks-basic@0.1.8/dist/grapesjs-blocks-basic.min.js'></script>
<script src='https://unpkg.com/grapesjs-indexeddb@0.1.1/dist/grapesjs-indexeddb.min.js'></script>
<script src="https://unpkg.com/grapesjs-template-manager"></script>
<script  src="./script.js"></script>

</body>
</html>

script.js

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  storageManager: {
    id: 'gjs-',             // Prefix identifier that will be used on parameters
    type: 'local',          // Type of the storage
    fromElement: true,   //used for tempalate manager
    autosave: 1,         // Store data automatically
    autoload: 1,         // Autoload stored data on init
    stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
    // ONLY FOR LOCAL STORAGE
    // If enabled, checks if browser supports Local Storage
    checkLocal: 1,

  },
  plugins: ['gjs-blocks-basic', 'grapesjs-template-manager'],
});

//https://github.com/Ju99ernaut/grapesjs-template-manager
const pn = editor.Panels;
const panelOpts = pn.addPanel({
  id: 'options'
});
panelOpts.get('buttons').add([{
  attributes: {
    title: 'Open Templates'
  },
  className: 'fa fa-file-o',
  command: 'open-templates',//Open modal
  id: 'open-templates'
}, {
  attributes: {
    title: 'Save As Template'
  },
  className: 'fa fa-archive',
  command: 'save-as-template',//Save page as template
  id: 'save-as-template'
}, {
  attributes: {
    title: 'Delete Template'
  },
  className: 'fa fa-trash-o',
  command: 'delete-template',//Delete open page or template
  id: 'delete-templates'
}, {
  attributes: {
    title: 'Take Screenshot'
  },
  className: 'fa fa-camera',
  command: 'take-screenshot',//Take an image of the canvas
  id: 'take-screenshot'
}]);

//https://github.com/artf/grapesjs/issues/122#issuecomment-313989326
//https://github.com/artf/grapesjs/issues/122#issuecomment-314737681
// add save button
pn.addButton('options', [{
  id: 'save-db',
  className: 'fa fa-floppy-o',
  command: 'save-db',
  attributes: {title: 'Save DB'}
}]);

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

It's probably something obvious, but if it's not I'll be more than happy to help troubleshoot.

Ju99ernaut commented 3 years ago

Grapesjs' built in storages don't work with this plugin, here's the list of supported storage types and how to setup https://github.com/Ju99ernaut/grapesjs-template-manager#localindexeddb

In your case just change type: 'local' to type: 'indexeddb'

FranklinsHand commented 3 years ago 
  container: '#gjs',
  height: '100%',
  storageManager: {
    id: 'gjs-',             // Prefix identifier that will be used on parameters
    type: 'indexeddb',          // Type of the storage
    fromElement: true,   //used for tempalate manager
    autosave: 0,         // Store data automatically
    autoload: 1,         // Autoload stored data on init
    stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
  },

I switched to indexeddb and made sure indexeddb is working. I am still getting the same errors.

Ju99ernaut commented 3 years ago

I'm not sure what's wrong on your end, your configuration works fine on my end, anyways the errors you're getting indicate that whichever storage you're using doesn't have the loadAll method, which is available in the indexeddb version that comes built in https://github.com/Ju99ernaut/grapesjs-template-manager/blob/master/src/storage/indexeddb.js