---
title: "Image Editor Module"
description: "The Jodit image editor for cropping and resizing images, opened programmatically and configured through the ImageEditorOptions interface."
metadata:
  - name: keywords
    content: "jodit, image editor, crop image, resize image, photo editing, imageeditor"
---
# Image editor

Photo editing is configured through the interface [ImageEditorOptions](../interfaces/types.ImageEditorOptions.html)

for example:

```js
const jodit = Jodit.make('#editor', {
  imageeditor: {
    closeAfterSave: true,
    crop: false,
    resize: true,
    width: 500
  }
});

jodit.imageeditor.open(
  'https://xdsoft.net/jodit/images/test.png',
  (name, data, success, failed) => {
    const img = jodit.node.c('img');
    img.setAttribute('src', 'https://xdsoft.net/jodit/images/test.png');
    if (box.action !== 'resize') {
      return failed(
        'Sorry it is work only in resize mode. For croping use FileBrowser'
      );
    }
    img.style.width = data.w;
    img.style.height = data.h;
    jodit.s.insertNode(img);
    success();
  }
);
```


## Classes

- [ImageEditor](../classes/image_editor.ImageEditor.html)

### openImageEditor()

**openImageEditor**(`this`, `href`, `name`, `path`, `source`, `onSuccess?`, `onFailed?`): [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<[`IDialog`](../interfaces/types.IDialog.html)\>

Defined in: [src/modules/image-editor/image-editor.ts:828](https://github.com/xdan/jodit/blob/main/src/modules/image-editor/image-editor.ts#L828)

Open Image Editor

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `this` | [`IViewWithToolbar`](../interfaces/types.IViewWithToolbar.html)\<[`IViewOptions`](../interfaces/types.IViewOptions.html)\> & `object` |
| `href` | `string` |
| `name` | `string` |
| `path` | `string` |
| `source` | `string` |
| `onSuccess?` | (`newPath?`) => `void` |
| `onFailed?` | (`error`) => `void` |

#### Returns

[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<[`IDialog`](../interfaces/types.IDialog.html)\>

***

### form()

**form**(`editor`, `o`): [`HTMLElement`](https://developer.mozilla.org/docs/Web/API/HTMLElement)

Defined in: [src/modules/image-editor/templates/form.ts:20](https://github.com/xdan/jodit/blob/main/src/modules/image-editor/templates/form.ts#L20)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `editor` | [`IViewBased`](../interfaces/types.IViewBased.html) |
| `o` | [`ImageEditorOptions`](../interfaces/types.ImageEditorOptions.html) |

#### Returns

[`HTMLElement`](https://developer.mozilla.org/docs/Web/API/HTMLElement)