---
title: "Image Editing"
description: "Image Editing features for TinyMCE."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/editimage/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/editimage/index.md"
version: "latest"
last_updated: "2026-06-15T05:48:02Z"
tokens: 2361
---
# Image Editing

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing/).
The Image Editing (`editimage`) plugin adds a contextual editing toolbar to images in the editor.

If the toolbar does not appear after clicking on an image, you may need to enable `editimage_cors_hosts` or `editimage_proxy_service_url` (see below).

## Interactive example

**Example**

```js
tinymce.init({
  selector: 'textarea#edit-image',
  height: 500,
  plugins: [
    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
    'insertdatetime', 'media', 'table', 'editimage', 'wordcount'
  ],
  toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

> **Note:** SVGs (Scalable Vector Graphics) are not supported in TinyMCE to protect our users and their end-users. SVGs can be used to perform both client-side and server-side attacks.

> **Warning:** **Plugin Compatibility Issues**
> 
> The [Media Optimizer Powered by Uploadcare](../uploadcare/) premium plugin cannot be configured together with the following plugins:
> 
> - [Image](../image/)
> - [Image Editing](#)
> **Recommended Solutions:**
> 
> For images:
> 
> - Configure either the [Image](../image/) and [Image Editing](#) plugins together, or
> - Configure the [Media Optimizer: Image](../uploadcare-image/) plugin as the sole image handler for all images.
> If all three plugins are enabled, editor notification: "Unable to initialize uploadcare due to the presence of incompatible plugins. Details are in the browser console." will be shown along with console error: "Unable to initialize uploadcare due to the presence of incompatible plugins: image, editimage".

## Cloud Installation

The Image Editing plugin is provided with all subscriptions to [Tiny Cloud](../editor-and-features/), including an automatically configured image proxy. Simply add `image` to the `toolbar` list and `image editimage` to the `plugins` list.

### Basic setup using Tiny Cloud

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image editimage'
});
```

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).

## Self-hosted Installation

To enable the TinyMCE Image Editing plugin:

1. Add `image` to the `toolbar` list and `image editimage` to the `plugins` list.
2. Enable [`editimage_cors_hosts`](#editimage_cors_hosts) and [`editimage_proxy_service_url`](#editimage_proxy_service_url) options as required.

### Basic self-hosted setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_cors_hosts: [ 'example.com', 'example.net' ],
  editimage_proxy_service_url: 'http://example.com/ephox-image-proxy/'
});
```

## Options

### `editimage_cors_hosts`

The Image Editing plugin cannot work with images from another domain due to security measures imposed by browsers on so called cross-origin HTTP requests. To overcome these constraints, Cross-Origin Resource Sharing (CORS) must be explicitly enabled on the specified domain(s) (for more information check [HTTP access control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)).

An array of supported domains for the images (with CORS enabled on them) can be supplied to TinyMCE via the `editimage_cors_hosts` option.

> **Note:** Each string in the array *must* be in the format of `example.com`. Do not include protocols (for example, `http://, https://`) or any trailing slashes in your domains.

> **Note:** `editimage_cors_hosts` is **not** required when enabling this plugin via [Tiny Cloud](../editor-and-features/).
**Type:** `Array`

**Default value:** `[]`

#### Example: `editimage_cors_hosts`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'editimage',
  plugins: 'image editimage',
  editimage_cors_hosts: [ 'example.com', 'example.net' ]
});
```

### `editimage_credentials_hosts`

This option can be used together with the `editimage_cors_hosts` option to allow credentials to be sent to the CORS host. This is not enabled by default since the server needs to have proper CORS headers to support this.

**Type:** `Array`

#### Example: using `editimage_credentials_hosts`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_cors_hosts: [ 'example.com', 'example.net' ],
  editimage_credentials_hosts: [ 'example.com', 'example.net' ]
});
```

### `editimage_fetch_image`

This option can be used to define a custom fetch function, which provides another way to access images in complex situations. The function will be passed the HTML element of the image to be fetched and should return a `Promise` containing a `Blob` representation of the image.

**Type:** `Function`

#### Example: using `editimage_fetch_image`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_fetch_image: (img) => new Promise((resolve) => {
    // Fetch the image and return a blob containing the image content
    ...
    resolve(new Blob(...));
  })
});
```

### `editimage_proxy`

This option can be used as a way of editing images across domains using a third-party local server-side proxy. A proxy is a script, that will retrieve a remote image and pipe it back to TinyMCE, as if it was an image hosted on the same domain.

> **Note:** `editimage_proxy` is **not** required when enabling this plugin via [Tiny Cloud](../editor-and-features/). If using the self-hosted Java proxy service provided as part of Paid TinyMCE subscriptions, use the [`editimage_proxy_service_url`](#editimage_proxy_service_url) option instead.
**Type:** `String`

#### Example: using `editimage_proxy`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'editimage',
  plugins: 'image editimage',
  editimage_proxy: 'proxy.php'
});
```

### `editimage_proxy_service_url`

This option configures the URL to the server-side proxy service which allows remote images hosted on different domains to be retrieved by the Image Editing plugin. If a proxy is not configured, then remote images may not be able to be edited. Check the [Deploy the TinyMCE image proxy server-side component using Docker](../individual-image-proxy-container/) guide for details on configuring the Docker container that you will get as a part of your [TinyMCE Enterprise subscription](/pricing/).

> **Note:** `editimage_proxy_service_url` is **not** required when enabling this plugin via [Tiny Cloud](../editor-and-features/).
**Type:** `String`

#### Example: using `editimage_proxy_service_url`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'image editimage',
  editimage_proxy_service_url: 'http://example.com/ephox-image-proxy/'
});
```

### `editimage_toolbar`

The exact selection of buttons that will appear on the contextual toolbar can be controlled via `editimage_toolbar` option.

**Type:** `String`

**Default value:** `'rotateleft rotateright | flipv fliph | editimage imageoptions'`

**Possible values:**

- `rotateleft`
- `rotateright`
- `flipv`
- `fliph`
- `editimage`
- `imageoptions`

#### Example: using `editimage_toolbar`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions'
});
```

### `editimage_upload_timeout`

This option can be used to configure how long an image upload should be allowed to take before timing out after editing an image. The value should be the amount of time in milliseconds before timing out.

**Type:** `Number`

**Default value:** `30000`

#### Example: using `editimage_upload_timeout`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_upload_timeout: 60000
});
```

### Toolbar buttons

The Image Editing plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `editimage` | Edits the current image in the image dialog. |
| `fliph` | Flips the current image horizontally. |
| `flipv` | Flips the current image vertically. |
| `imageoptions` | Opens the image options dialog. |
| `rotateleft` | Rotates the current image counterclockwise. |
| `rotateright` | Rotates the current image clockwise. |

These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Commands

The Image Editing plugin provides the following TinyMCE commands.

| Command | Description |
| --- | --- |
| mceEditImage | Opens the Image editing dialog. |
| mceImageRotateRight | Rotates the selected image 90 degrees clockwise. |
| mceImageRotateLeft | Rotates the selected image 90 degrees counterclockwise. |
| mceImageFlipVertical | Flips the selected image vertically. |
| mceImageFlipHorizontal | Flips the selected image horizontally. |

Examples
```js
tinymce.activeEditor.execCommand('mceEditImage');
tinymce.activeEditor.execCommand('mceImageRotateRight');
tinymce.activeEditor.execCommand('mceImageRotateLeft');
tinymce.activeEditor.execCommand('mceImageFlipVertical');
tinymce.activeEditor.execCommand('mceImageFlipHorizontal');
```