Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
grapesjs-aviary
Advanced tools
Readme
Add the Aviary Image Editor on Image Components in GrapesJS
gjs-aviary
image-editor
Open the Image Editorkey
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' 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 applyconfig
[default: {}]
Aviary's configuration objectnpm 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
FAQs
Add Aviary Image Editor
The npm package grapesjs-aviary receives a total of 2,530 weekly downloads. As such, grapesjs-aviary popularity was classified as popular.
We found that grapesjs-aviary demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.