In this article I’d like to describe my new plugin for TinyMCE integration. The TinyMceEnhancements addon contains set of improvements for Optimizely TinyMCE integration. It focus on features related with images used in the HTML editor. Using this plugin you can modify the attributes of images, limit the size and set ALT text.


Managing image dimensions

When adding an image to the HTML editor, the TinyMCE automatically sets the height and width in attributes.

For example:

This means that the image is resized on the client to 300px x 175px, but the browser still returns the full-size image. In many cases, we would like to return the image at the size that is currently displayed on the screen.

TinyMceEnhancements set size

To solve this problem, you can use one of the popular plug-ins, such as Baaijte.Optimizely.ImageSharp.Web. With this plugin, after entering the width and height in querystring, the image in given dimensions is returned from the server.

Unfortunately TinyMCE only adds height and width as attributes. Using TinyMceEnhancements it is possible to change the way the editor works. To set the names of the querystring parameters used for height and width use ImageSizeSettings options:

From now on, when adding an image to the editor or changing image size, the querystring will also be changed:

Then Baaijte.Optimizely.ImageSharp.Web (or another plugin) will return the resized image.

Limiting image size

The TinyMceEnhancements plugin additionally allows you to limit the maximum size of images. This will prevent your images from becoming too large. To configure the maximum size of images, you need to configure the ImageRestrictions option:

Now, the image added to the TinyMCE cannot be larger than 300×200 pixels.

Adding custom attributes

Some plugins require additional query string parameters to be added. E.g. Baaijte.Optimizely.ImageSharp.Web will return images in webp format if the querystring contains format=webp.

To add static attributes to an image querystring using TinyMceEnhancements, configure StaticAttributes:

Using the code above, a format=webp querystring will be added to each image:

Set ALT text

Alt text attribute is very important, because it makes images more accessible for both people and search engines.

Of course TinyMCE allows to set ALT attribute, but it’s not mandatory.

The TinyMceEnhancements plugin can be configured to display a dialog box to enter ALT text when adding an image.

In addition, you can configure the default ALT text completed when the dialog is displayed. To add a default ALT text, configure the ImageAltTextSettings option:

When you add an image to the editor, the ALT text dialog with hint will be displayed.

TinyMceEnhancements set alt text

Configuring TinyMceEnhancements for specific properties

By default managing both image size and ALT text are enabled. It’s configurable using AddTinyMceEnhancements method:

You can also turn it on only for specific TinyMce instances, for example:

Plugin is available as Nuget package. You can check source code and report bugs on github