grapesjs-aviary

WebJar for grapesjs-aviary

License	BSD 3-Clause
Categories	JavaScript Languages
GroupId	org.webjars.npm
ArtifactId	grapesjs-aviary
Last Version	0.1.2
Release Date	Dec 10, 2018
Type	jar
Description	grapesjs-aviary WebJar for grapesjs-aviary
Project URL	http://webjars.org
Source Code Management	https://github.com/artf/grapesjs-aviary

Download grapesjs-aviary

Filename	Size
grapesjs-aviary-0.1.2.pom
grapesjs-aviary-0.1.2.jar	9 KB
grapesjs-aviary-0.1.2-sources.jar	22 bytes
grapesjs-aviary-0.1.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/grapesjs-aviary/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>grapesjs-aviary</artifactId>
    <version>0.1.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/grapesjs-aviary/
implementation 'org.webjars.npm:grapesjs-aviary:0.1.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/grapesjs-aviary/
implementation ("org.webjars.npm:grapesjs-aviary:0.1.2")

Apache Buildr

'org.webjars.npm:grapesjs-aviary:jar:0.1.2'

Apache Ivy

<dependency org="org.webjars.npm" name="grapesjs-aviary" rev="0.1.2">
  <artifact name="grapesjs-aviary" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='grapesjs-aviary', version='0.1.2')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "grapesjs-aviary" % "0.1.2"

Leiningen

[org.webjars.npm/grapesjs-aviary "0.1.2"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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

Versions

Version
0.1.2 Dec 10, 2018