One-Click Quick Action Plugins

Adding new functionality to the web editor is easy with plugins provided by external packages. Some of these are simple to integrate and just require a single button to be added to the editor. We call them "quick actions."

You just need to install the NPM package and add the plugin to the editor. The business logic and button components are automatically registered, and all that’s left to do is to add the one-click quick actions to the editor.

Quick Action: Background Removal#

The background removal plugin is a great example of a one-click quick action. It allows you to remove the background of an image with a single click. After adding the plugin, you won't see any immediate change to the editor. You will need to define where to place this feature.

import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';

[...]

// Adding this plugin will automatically register user interface components
cesdk.addPlugin(BackgroundRemovalPlugin());

// Prepend it to the canvas menu ...
cesdk.ui.setCanvasMenuOrder([
  'ly.img.background-removal.canvasMenu'
  ...cesdk.ui.getCanvasMenuOrder(),
]);

// ... or the inspector bar
cesdk.ui.setInspectorBar([
  'ly.img.background-removal.inspectorBar'
  ...cesdk.ui.getInspectorBar(),
]);

Quick Action: Vectorizer#

For the vectorizer plugin, the process is exactly the same. Simply install and add the plugin, then use the component Ids to extend the user interface.

import VectorizerPlugin from '@imgly/plugin-vectorizer-web';

[...]

// Adding this plugin will automatically register user interface components
cesdk.addPlugin(VectorizerPlugin());

// Prepend it to the canvas menu ...
cesdk.ui.setCanvasMenuOrder([
  'ly.img.vectorizer.canvasMenu'
  ...cesdk.ui.getCanvasMenuOrder(),
]);

// ... or the inspector bar
cesdk.ui.setInspectorBar([
  'ly.img.vectorizer.inspectorBar'
  ...cesdk.ui.getInspectorBar(),
]);