Add the Aviary Image Editor on Image Components in GrapesJS

Demo

• 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

• npm i grapesjs-aviary

<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>

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

BSD 3-Clause