Grapesjs Firebase Storage
npm install grapesjs-firebase-storageWrapper for firebase storage. Files uploaded through asset manager will be added to your firebase app storage bucket.
html
`$3
`js
const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: false,
assetManager: {
embedAsBase64: 0, // Disable base64 encoding
},
plugins: ['grapesjs-firebase-storage'],
pluginsOpts: {
'grapesjs-firebase-storage': {
firebaseConfig: {
// ...
}
}
}
});
`$3
`css
body, html {
margin: 0;
height: 100%;
}
`
Summary
* Plugin name:
grapesjs-firebase-storage
* Commands
* get-firebase-assetsOptions
| Option | Description | Default |
|-|-|-
|
firebaseConfig | Firebase app credentials | {} |
| fileName | Firebase storage folder name | assets |
| onSnapshot | Upload progress snapshot | check source |
| onError | On upload error | check source |
| onComplete | On upload complete | check source |
| loadAll | Load all assets on editor load | 1 |
Usage in combination with firestore
Configure your firebase app access rules for firestore and storage.
Add Libraries to
head of document`js
`Initialize
grapesjs, with grapesjs-firebase-storage and grapesjs-template-manager plugins.`js
window.editor = grapesjs.init({
height: '100%',
container: '#gjs',
showOffsets: true,
fromElement: true,
noticeOnUnload: false,
storageManager: false,
assetManager: {
embedAsBase64: 0,
},
storageManager: {
type: 'firestore'
},
plugins: ['grapesjs-firebase-storage', 'grapesjs-template-manager'],
pluginsOpts: {
'grapesjs-firebase-storage': {
firebaseConfig: {
apiKey: "FIREBASE_API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
projectId: "PROJECT_ID",
databaseURL: "https://PROJECT_ID.firebaseio.com",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "MEASUREMENT_ID"
}
}
}
});// Optional: Add template manager buttons
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'
}]);
`
Download
* CDN
*
https://unpkg.com/grapesjs-firebase-storage
* NPM
* npm i grapesjs-firebase-storage
* GIT
* git clone https://github.com/Ju99ernaut/grapesjs-firebase-storage.gitUsage
Directly in the browser
`html
`Modern javascript
`js
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-firebase-storage';
import 'grapesjs/dist/css/grapes.min.css';const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
pluginsOpts: {
[plugin]: { / options / }
}
// or
plugins: [
editor => plugin(editor, { / options / }),
],
});
`Development
Clone the repository
`sh
$ git clone https://github.com/Ju99ernaut/grapesjs-firebase-storage.git
$ cd grapesjs-firebase-storage
`Install dependencies
`sh
$ npm i
`Start the dev server
`sh
$ npm start
`Build the source
`sh
$ npm run build
``MIT