Skip to content

Ju99ernaut/grapesjs-template-manager

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Grapesjs Project Manager

Requires GrapesJS v0.19.4 or higher.

Project, template and page manager for grapesjs. This version makes use of the PageManager and has different plugin and package name, the previous version which doesn't make use of the PageManager can be found here.

Project Project settings
Screenshot (224) Screenshot (226)
Pages Page settings
Screenshot (225) Screenshot (227)

HTML

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<link href="https://unpkg.com/grapesjs-project-manager/dist/grapesjs-project-manager.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-project-manager"></script>

<div id="gjs"></div>

JS

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  fromElement: true,
  pageManager: true, // This should be set to true
  storageManager:  {
    type: 'indexeddb',
    // ...
  },
  plugins: ['grapesjs-project-manager'],
});

// Running commands from panels
const pn = editor.Panels;
pn.addButton('options', {
    id: 'open-templates',
    className: 'fa fa-folder-o',
    attributes: {
        title: 'Open projects and templates'
    },
    command: 'open-templates', //Open modal 
});
pn.addButton('views', {
    id: 'open-pages',
    className: 'fa fa-file-o',
    attributes: {
        title: 'Take Screenshot'
    },
    command: 'open-pages',
    togglable: false
});

CSS

body, html {
  margin: 0;
  height: 100%;
}

Summary

  • Plugin name: grapesjs-project-manager
  • Commands
    • open-templates
    • open-pages
    • open-settings
    • get-uuidv4
    • take-screenshot
    • save-as-template
    • delete-template
  • Storages
    • indexeddb
    • firestore
    • rest-api

Options

Option Description Default
dbName Database name gjs
objectStoreName Collection name templates
loadFirst Load first template in storage true
customLoad Use custom onload function(skips default onload steps), (ed, cs) => ... false
components Default components since fromElement is not supported undefined
style Default style since fromElement is not supported undefined
indexeddbVersion IndexedDB schema version 5
onDelete On successful template deletion Function(Check source)
onDeleteAsync Handle promise from storage delete Function(Check source)
onUpdateAsync Handle promise from storage update Function(Check source)
onScreenshotAsync Handle promise from screenshot Function(Check source)
onScreenShotError On error capturing screenshot Function(Check source)
onThumbnail Handle thumbnail data Function(Check source)
quality Generated screenshot quality .01
mdlTitle Modal title Project Manager
apiKey Firebase API key
authDomain Firebase Auth domain
projectId Cloud Firestore project ID
firebaseConfig Extra firebase app credentials {}
enableOffline Enable Firestore support for offline data persistence true
settings Firestore database settings { timestampsInSnapshots: true }
uuidInPath Add uuid as path parameter on store for rest-api(useful for validation) true
size Display estimated project sizes true
currentPageOpen Send feedback when open is clicked on current page check source
ì18n I18n object containing language more info {}
  • Setting loadFirst to false prevents overwritting the contents of the editor with the contents of the first template in storage.
  • Only use options for Firebase when using Cloud Firestore storage.
  • dbName and indexeddbVersion only apply to indexddb storage.
  • objectStoreName acts as collection name for both firestore and indexeddb.
  • When uuidInPath is set to false the store request will be http://endpoint/store/ instead of http://endpoint/store/{uuid}

Local/IndexedDB

window.editor = grapesjs.init({
  container: '#gjs',
  // ...
  pageManager: true,
  storageManager:  {
    type: 'indexeddb'
  },
  plugins: ['grapesjs-project-manager'],
  pluginsOpts: {
    'grapesjs-project-manager': { /* Options */ }
  }
});

Firestore

Tested on firebase v8+. Firebase v9+ not yet supported.

Configure firestore access rules for your app. Add libraries to head of document:

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js"></script>

Add credentials:

window.editor = grapesjs.init({
  container: '#gjs',
  // ...
  pageManager: true,
  storageManager:  {
    type: 'firestore'
  },
  plugins: ['grapesjs-project-manager'],
  pluginsOpts: {
    'grapesjs-project-manager': { 
      // Firebase API key
      apiKey: 'FIREBASE_API_KEY',
      // Firebase Auth domain
      authDomain: 'app-id-00a00.firebaseapp.com',
      // Cloud Firestore project ID
      projectId: 'app-id-00a00',
    }
  }
});

Remote/REST-API

Example backend https://github.com/Ju99ernaut/gjs-api

window.editor = grapesjs.init({
  container: '#gjs',
  // ...
  pageManager: true,
  storageManager:  {
    type: 'rest-api',
    // the URIs below can be the same depending on your API design 
    options: {
      remote: {
        urlStore: 'https://endpoint/store/',// POST
        urlLoad: 'https://endpoint/load/',// GET
        urlDelete: 'https://endpoint/delete/',// DELETE
        // ...
      }
    }
  },
  plugins: ['grapesjs-project-manager'],
  pluginsOpts: {
    'grapesjs-project-manager': { /* options */ }
  }
});

The backend schema can be something like:

GET https://api/templates/ load all templates

Returns

[
    {
      "id": "UUIDv4",
      "name": "Page name",
      "template": false,
      "thumbnail": "",
      "description": "No description",
      "assets": "[]",
      "pages": "[]",
      "styles": "[]",
      "updated_at": ""
    }
]

POST https://api/templates/{idx: UUIDv4} store or update template

Expects

{
  "id": "UUIDv4",
  "name": "Page name",
  "template": false,
  "thumbnail": "",
  "description": "No description",
  "assets": "[]",
  "pages": "[]",
  "styles": "[]",
  "updated_at": ""
}

GET https://api/templates/{idx: UUIDv4} load template

Returns

{
  "id": "UUIDv4",
  "name": "Page name",
  "template": false,
  "thumbnail": "",
  "description": "No description",
  "assets": "[]",
  "pages": "[]",
  "styles": "[]",
  "updated_at": ""
}

DELETE https://api/templates/{idx: UUIDv4} delete template

Which would have the following setup:

window.editor = grapesjs.init({
  container: '#gjs',
  // ...
  storageManager:  {
    type: 'rest-api',
    // the URIs below can be the same depending on your API design 
    options:{
      remote:{
        urlStore: 'https://api/templates/',// POST
        urlLoad: 'https://api/templates/',// GET
        urlDelete: 'https://api/templates/',// DELETE
      }
    }
  },
  plugins: ['grapesjs-template-manager'],
  pluginsOpts: {
    'grapesjs-template-manager': { /* options */ }
  }
});

All the fields are generated from the editor so you just need to setup your API to receive and return data in that format. I'd recommend you check the network tab so you get a more accurate format for the payloads.

Download

  • CDN
    • https://unpkg.com/grapesjs-project-manager
  • NPM
    • npm i grapesjs-project-manager
  • GIT
    • git clone https://github.com/Ju99ernaut/grapesjs-template-manager.git

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/grapesjs-project-manager/dist/grapesjs-project-manager.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-project-manager.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      pageManager: true,
      storageManager:  {
        type: 'indexeddb',
        // ...
      },
      plugins: ['grapesjs-project-manager'],
      pluginsOpts: {
        'grapesjs-project-manager': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-project-manager';
import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-project-manager/dist/grapesjs-project-manager.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  pageManager: true,
  storageManager:  {
    type: 'indexeddb',
    // ...
  },
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/Ju99ernaut/grapesjs-template-manager.git
$ cd grapesjs-template-manager

Install dependencies

$ npm i

Build css or watch scss

$ npm run build:css

OR

$ npm run watch:scss

Start the dev server

$ npm start

Build the source

$ npm run build

License

MIT