grapesjs-uppy
v2.0.0
Published
Grapesjs Uppy
Downloads
107
Readme
Grapesjs Uppy
Uppy file uploader for grapesjs
.WIP
Add companion to use other image sources other than local. At the moment only tus is supported for file uploads
Screenshot:
HTML
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<link href="https://unpkg.com/grapesjs-uppy/dist/grapesjs-uppy.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs-uppy"></script>
<div id="gjs"></div>
JS
const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: false,
plugins: ['grapesjs-uppy'],
});
CSS
body, html {
margin: 0;
height: 100%;
}
Summary
- Plugin name:
grapesjs-uppy
Options
| Option | Description | Default |
|-|-|-
| btnEl
| Custom button element which triggers Uppy modal |
|
| btnText
| Text for the button in case the custom one is not provided | Add images
|
| theme
| Uppy's filepicker theme | dark
|
| uppyOpts
| Uppy's options | {...}
|
| dashboardOpts
| Uppy's dashboard options | {...}
|
| companionUrl
| Uppy companion url | https://companion.uppy.io
|
| endpoint
| Tus endpoint url | https://tusd.tusdemo.net/files/
|
| onComplete
| On complete upload callback | console.log('successful files:', assets)
|
| onFailed
| On failed upload callback | console.log('failed files:', assets)
|
| googledrive
| Use plugin | false
|
| dropbox
| Use plugin | false
|
| instagram
| Use plugin | false
|
| facebook
| Use plugin | false
|
| onedrive
| Use plugin | false
|
| unsplash
| Use plugin | false
|
| webcam
| Use plugin | true
|
| screencapture
| Use plugin | true
|
Download
- CDN
https://unpkg.com/grapesjs-uppy
- NPM
npm i grapesjs-uppy
- GIT
git clone https://github.com/Ju99ernaut/grapesjs-uppy.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-uppy/dist/grapesjs-uppy.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-uppy.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container: '#gjs',
// ...
plugins: ['grapesjs-uppy'],
pluginsOpts: {
'grapesjs-uppy': { /* options */ }
}
});
</script>
Modern javascript
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-uppy';
import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-uppy/dist/grapesjs-uppy.min.css';
const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
pluginsOpts: {
[plugin]: { /* options */ }
}
// or
plugins: [
editor => plugin(editor, { /* options */ }),
],
});
Development
Clone the repository
$ git clone https://github.com/Ju99ernaut/grapesjs-uppy.git
$ cd grapesjs-uppy
Install dependencies
$ npm i
Build css
$ npm run build:css
Start the dev server
$ npm start
Build the source
$ npm run build
License
MIT