Image Editing

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

liveDemo::edit-image[]

partial$misc/admon-svg-not-supported.adoc

partial$misc/plugin-compatibility-uploadcare-image.adoc :!includedSection:

Cloud Installation

The Image Editing plugin is provided with all subscriptions to {cloudname}, 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'
});

partial$misc/bundling-guide-link.adoc

Self-hosted Installation

To enable the {productname} Image Editing plugin:

Add image to the toolbar list and image editimage to the plugins list.
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/'
});