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

Pages	Page settings

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

Name		Name	Last commit message	Last commit date
Latest commit History 162 Commits
src		src
.gitignore		.gitignore
.npmignore		.npmignore
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Grapesjs Project Manager

HTML

JS

CSS

Summary

Options

Local/IndexedDB

Firestore

Remote/REST-API

Download

Usage

Development

License

About

Releases

Packages

Contributors 3

Languages

License

Ju99ernaut/grapesjs-template-manager

Folders and files

Latest commit

History

Repository files navigation

Grapesjs Project Manager

HTML

JS

CSS

Summary

Options

Local/IndexedDB

Firestore

Remote/REST-API

Download

Usage

Development

License

About

Topics

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Languages

Packages