Image Tools plugin

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

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="image-tools">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128" /></p>
  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>
  <h2><img style="float: right; padding: 0 0 10px 10px;" title="Tiny Husky" src="//www.tiny.cloud/docs/images/tiny-husky.jpg" alt="Tiny Husky" height="320" width="304" /></h2>
  <h2>Image Tools Plugin feature<br>Click on the image to get started</h2>

  <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>
  <h2>A simple table to play with</h2>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>
  <p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>

  <h2>Finally ...</h2>
  <p>Don&#39;t forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p>
  <p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.</p>
</textarea>
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 }'
});
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, 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

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

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

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

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.
imagetools_cors_hosts is not required when enabling this plugin via Tiny Cloud.

Type: String[]

Default Value: []

Example: imagetools_cors_hosts

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

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

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 also includes a proxy service written in Java. Check the Install Server-side Components guide for details.

imagetools_proxy is not required when enabling this plugin via Tiny Cloud.

Type: String

Example: Using imagetools_proxy

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
// 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

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