npm package: @scaleflex/widget-image-editor
Description: FilerobotImageEditor integration with Scaleflex
Latest version: 4.8.13

# `@scaleflex/widget-image-editor`

[![Plugins][plugins-image]](#plugins)
[![Website][filerobot-image]][sfx-url]
[![Version][filerobot-version]][version-url]
[![Scaleflex team][made-by-image]][sfx-url]
[![License][license-image]][license-url]
[![CodeSandbox][codeSandbox-image]][codeSandbox-url]


<div align='center'>
<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://assets.scaleflex.com/Corporate+Branding/%5B2025%5D+ALL+LOGOS+%2B+ICONS/SCALEFLEX/VXP+logo/Horizontal+White/VXP+logo+WHITE.png?vh=663932" width="140"/>
</div>

The image editor plugin provides different functionality for editing the image available in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core), gives you the possibility to add watermark, text, shapes, edit image by filters, orientations...etc.

It is required in case you need to have edit image, variants, exporting functionalities.

## Usage

### NPM

```bash
npm install --save @scaleflex/widget-image-editor
```

### Yarn

```bash
yarn add @scaleflex/widget-image-editor
```

then

```js
import ImageEditor from '@scaleflex/widget-image-editor'
...
...
...
scaleflexWidget.use(ImageEditor, propertiesObject)
```

### CDN

The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.ImageEditor`

```js
const ImageEditor = window.ScaleflexWidget.ImageEditor
...
...
...
scaleflexWidget.use(ImageEditor, propertiesObject)
```

### Plugin's styles

```js
import '@scaleflex/widget-core/dist/style.css'
import '@scaleflex/widget-image-editor/dist/style.css'
```

or if you prefer the minified version

```js
import '@scaleflex/widget-core/dist/style.min.css'
import '@scaleflex/widget-image-editor/dist/style.min.css'
```

> The plugin's css file should be imported after the [Core's css file](../core/#modules-styles) for having the styles shown correctly.

## Properties

### `locale`

<u>Type:</u> `object`.

<u>Default:</u> default locales inside `lib/defaultLocale.js`.

Customizing some of the translations or the language's strings and replace the default locale.

### `forceOpenOnImgAddedToUpload`

<u>Type:</u> `boolean`.

<u>Default:</u> `false`

Automatically open the image editor on adding a single image in upload panel. (Note: Upload panel must contain only 1 image).

Check the rest of the options available on [**filerobot-image-editor**](https://github.com/scaleflex/filerobot-image-editor#readme)

> Note: `filerobot` object property, would be overridden internally with your `container` property & SASS key generated through `securityTemplateId` property that are provided in [@scaleflex/widget-core](../core) and cloudimage.token property's value would be the same as `container` unless you provided another value.

<!-- Variables -->

[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-image-editor
[license-url]: https://opensource.org/licenses/MIT
[sfx-url]: https://www.scaleflex.com/
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-image-editor
[codeSandbox-url]: https://codesandbox.io/p/sandbox/scalelfex-widget-v4-sandbox-dtp6l3?file=%2Fsrc%2Findex.js

[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-image-editor?label=Version&style=for-the-badge&logo=npm