World is now on Opti ID! Learn more

Nicklas Israelsson
Jun 18, 2018
  618
(0 votes)

Episerver Image Tools in TinyMCE

EPiServer.CMS.TinyMce versions 2.3.0 and 2.4.0 bring two Image Tools features inside the XHTML editor.

Go to media (version 2.3.0)

Image gotomedia.PNG

This new button will make it easier for the editors to locate and navigate to the image that is included in the HTML property.

Additionally, after hovering it will show a tooltip with a full path to the image.

Drag & Drop from local disk (version 2.4.0)

It is possible to drag and drop an image from a local disk directly onto the editor.

An image preview will be shown immediately upon dropping while the image is being uploaded to the server.

All dropped images are automatically placed in the "For this page" or "For this block" folder. 

Please note that although it is technically possible to drag & drop multiple images at the same time, it does not work deterministically.

There is a bug reported in TinyMCE #4055 that EPiServer has already submitted a bugfix  to. The bug is still pending review.

 

The Image Tools are enabled by the default configuration, but they can be disabled.

To disable or re-enable the features, you should use the EnableImageTools/DisableImageTools methods available when you are configuring your properties:

context.Services.Configure<TinyMceConfiguration>(config =>
{
    ...
    // Disable the image tools
    config.For<ArticlePage>(t => t.MainBody)
        .DisableImageTools()
    ...
    // Enable the image tools for a property (if the property does not have it already)
    config.For<ArticlePage>(t => t.MainBody)
        .EnableImageTools();
     ...
}

The information about enabling and disabling the features is included in the SDK - Episerver Plugins.

Jun 18, 2018

Comments

Please login to comment.
Latest blogs
Make Global Assets Site- and Language-Aware at Indexing Time

I had a support case the other day with a question around search on global assets on a multisite. This is the result of that investigation. This co...

dada | Jun 26, 2025

The remote server returned an error: (400) Bad Request – when configuring Azure Storage for an older Optimizely CMS site

How to fix a strange issue that occurred when I moved editor-uploaded files for some old Optimizely CMS 11 solutions to Azure Storage.

Tomas Hensrud Gulla | Jun 26, 2025 |

Enable Opal AI for your Optimizely products

Learn how to enable Opal AI, and meet your infinite workforce.

Tomas Hensrud Gulla | Jun 25, 2025 |

Deploying to Optimizely Frontend Hosting: A Practical Guide

Optimizely Frontend Hosting is a cloud-based solution for deploying headless frontend applications - currently supporting only Next.js projects. It...

Szymon Uryga | Jun 25, 2025

World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |