Image Editing

This plugin is only available for paid TinyMCE subscriptions.

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

In previous versions of TinyMCE, the Image Editing plugin was provided as an open source plugin known as the Image Tools plugin.

Interactive example

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="edit-image">
  <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 Editing 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/tinymce/6/">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#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 }'
});
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 Editing plugin is provided with all subscriptions to Tiny Cloud, 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

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

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 and editimage_proxy_service_url options as required.

Basic self-hosted setup

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

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

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

Type: Array

Default value: []

Example: editimage_cors_hosts

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

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

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.

editimage_proxy is not required when enabling this plugin via Tiny Cloud. If using the self-hosted Java proxy service provided as part of Paid TinyMCE subscriptions, use the editimage_proxy_service_url option instead.

Type: String

Example: using editimage_proxy

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 Install Server-side Components guide for details on configuring the self-hosted Java proxy service.

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

Type: String

Example: using editimage_proxy_service_url

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.

Possible values:

  • rotateleft

  • rotateright

  • flipv

  • fliph

  • editimage

  • imageoptions

Type: String

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

Example: using editimage_toolbar

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

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:

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
tinymce.activeEditor.execCommand('mceEditImage');
tinymce.activeEditor.execCommand('mceImageRotateRight');
tinymce.activeEditor.execCommand('mceImageRotateLeft');
tinymce.activeEditor.execCommand('mceImageFlipVertical');
tinymce.activeEditor.execCommand('mceImageFlipHorizontal');