Skip to content
This repository has been archived by the owner on Feb 11, 2022. It is now read-only.

GrapesJS/aviary

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GrapesJS Aviary

Add the Aviary Image Editor on Image Components in GrapesJS

Demo

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 temporarily
    • onApply [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' function
      onApply: 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 strategy
      getFilename: function(model) {
        var name = model.get('src').split('/').pop();
        return Date.now() + '_' + name.slice(-15);
      }
    • closeOnApply [default: true] Close the image editor on apply
    • config [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