---
title: "Image Tools plugin"
description: "Image editing features for TinyMCE."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/editimage/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/editimage/index.md"
version: "5"
last_updated: "2024-04-16T01:50:26Z"
tokens: 1810
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/editimage/).
# Image Tools plugin

> **Important:** TinyMCE 5.10 will include the final release of the Image Tools plugin (`imagetools`) as an open source plugin. The Image Tools plugin will be removed from the open source bundle and be available as a premium plugin for TinyMCE 6.0.
Image Tools (`imagetools`) plugin adds a contextual editing toolbar to the images in the editor. If toolbar is not appearing on image click, it might be that you need to enable `imagetools_cors_hosts` or `imagetools_proxy` (see below).

## Interactive example

**Example**

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

> **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.

## Cloud Installation

The Image Tools 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 imagetools` 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 imagetools'
});
```

## Self-hosted Installation

To enable the TinyMCE Image Tools plugin:

1. Add 'image' to the 'toolbar' list and 'image imagetools' to the 'plugins' list
2. Enable `imagetools_cors_hosts` and `imagetools_proxy` options as needed

### Basic self-hosted setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image imagetools',
  imagetools_cors_hosts: ['mydomain.com', 'otherdomain.com'],
  imagetools_proxy: 'proxy.php'
});
```

## Options

### `imagetools_cors_hosts`

The Image Tools plugin cannot work with images from another domains 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 `imagetools_cors_hosts` option.

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

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

**Default Value:** `[]`

#### Example: `imagetools_cors_hosts`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'imagetools',
  plugins: 'image imagetools',
  imagetools_cors_hosts: [ 'mydomain.com', 'otherdomain.com' ]
});
```

### `imagetools_credentials_hosts`

This option can be used together with the `imagetools_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:** `String[]`

#### Example: Using `imagetools_credentials_hosts`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image imagetools',
  imagetools_cors_hosts: ['mydomain.com', 'otherdomain.com'],
  imagetools_credentials_hosts: ['mydomain.com', 'otherdomain.com']
});
```

### `imagetools_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 `imagetools_fetch_image`

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

### `imagetools_proxy`

This option can be used as a way of getting images across domains using a local server-side proxy. A proxy is basically a script, that will retrieve a remote image and pipe it back to TinyMCE, as if it was a local image. An example of such a proxy (written in PHP) can be found below.

[Paid TinyMCE subscriptions](/pricing) also includes a proxy service written in Java. Check the [Install Server-side Components](../introduction-to-premium-selfhosted-services/) guide for details.

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

#### Example: Using `imagetools_proxy`

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

#### Example of a PHP script for the image proxy

```php
<?php
// We recommend to extend this script with authentication logic
// so it can be used only by an authorized user
$validMimeTypes = array("image/gif", "image/jpeg", "image/png");

if (!isset($_GET["url"]) || !trim($_GET["url"])) {
    header("HTTP/1.0 500 Url parameter missing or empty.");
    return;
}

$scheme = parse_url($_GET["url"], PHP_URL_SCHEME);
if ($scheme === false || in_array($scheme, array("http", "https")) === false) {
    header("HTTP/1.0 500 Invalid protocol.");
    return;
}

$content = file_get_contents($_GET["url"]);
$info = getimagesizefromstring($content);

if ($info === false || in_array($info["mime"], $validMimeTypes) === false) {
    header("HTTP/1.0 500 Url doesn't seem to be a valid image.");
    return;
}

header('Content-Type:' . $info["mime"]);
echo $content;
?>
```

### `imagetools_toolbar`

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

**Possible Values:**

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

**Type:** `String`

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

#### Example: Using `imagetools_toolbar`

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