grapesjs-aviary
v0.1.2
Published
Add Aviary Image Editor
Downloads
12,727
Maintainers
Readme
GrapesJS Aviary
Add the Aviary Image Editor on Image Components in GrapesJS
Summary
- Plugin name:
gjs-aviary
- Commands
image-editor
Open the Image Editor
- Options:
key
Aviary's API Key. The editor will work with any not empty string, images are just stored temporarilyonApply
[default: null]
By default, GrapesJS takes the modified image (hosted on AWS) and adds it to the Asset Manager. If you need some custom logic (eg. add watermark, upload the image on your servers) you can use custom 'onApply' functiononApply: function(url, filename, imageModel) { var newUrl = ...; editor.AssetManager.add({src: newUrl, name: filename}); imageModel.set('src', newURL); // Update the image component }
getFilename
[default: null]
Customize the naming strategygetFilename: function(model) { var name = model.get('src').split('/').pop(); return Date.now() + '_' + name.slice(-15); }
closeOnApply
[default: true]
Close the image editor on applyconfig
[default: {}]
Aviary's configuration object
Download
npm i grapesjs-aviary
Usage
<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="//feather.aviary.com/imaging/v3/editor.js"></script>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-aviary.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
plugins: ['gjs-aviary'],
pluginsOpts: {
'gjs-aviary': {/* ...options */}
}
});
</script>
Development
Clone the repository
$ git clone https://github.com/artf/grapesjs-aviary.git
$ cd grapesjs-aviary
Install it
$ npm i
The plugin relies on GrapesJS via peerDependencies
so you have to install it manually (without adding it to package.json)
$ npm i grapesjs --no-save
Start the dev server
$ npm start
License
BSD 3-Clause