Media Optimizer

The Media Optimizer plugin provides comprehensive media management capabilities for TinyMCE, supporting both image and video optimization, upload, and processing through the Uploadcare service.

Overview

The Media Optimizer plugin extends TinyMCE with powerful media handling features that allow users to upload, process, and embed both images and videos directly within the editor. The plugin leverages Uploadcare’s infrastructure to provide real-time media processing, responsive delivery, and advanced optimization capabilities.

Key benefits

  • Upload and optimize both images and videos directly within the editor

  • Real-time media optimization and compression

  • Responsive media delivery with automatic format selection

  • Advanced image filtering and video player customization

  • Drag-and-drop media upload with file selection and URL input

  • Non-destructive transformations and adjustments

  • Enterprise-ready cloud storage with global CDN delivery

  • Built-in security with malware protection and content detection

Interactive example

  • TinyMCE

  • HTML

  • JS

<textarea id="uploadcare-full-feature">
    <h1>Discover Your Dream Home on Mallorca: Where Paradise Meets Investment</h1>
    <p><span style="color: #4e5c73;">Mallorca, the jewel of the Mediterranean, is not just a place of beauty&mdash;it&rsquo;s a smart investment. With property values consistently on the rise, now is the perfect time to secure your piece of this sun-soaked paradise.&nbsp;</span></p>
    
    <figure class="image"><img style="width: min(2048px, 100%); aspect-ratio: 2048 / 718;" src="https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/preview/" sizes="(min-width: 2048px) 2048px, 100vw" srcset="https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/100x/ 100w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/200x/ 200w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/300x/ 300w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/500x/ 500w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/750x/ 750w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/2000x/ 2000w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/preview/ 2048w" alt="Mallorca">
    <figcaption>Michael Heuser on <a href="https://unsplash.com/@gum_meee">Unsplash</a></figcaption>
    </figure>
    
    <p>Let us show you why Mallorca should be your next home&mdash;and introduce you to an exquisite villa that could soon be yours.</p>
    
    <h2>Experience Mallorca in Motion</h2>
    <p>Watch this stunning video showcasing the beauty and lifestyle that awaits you on this Mediterranean paradise:</p>
    <p><uc-video uuid="83fd9f98-1939-4d99-b5e3-85563f89f5fb" class="tox-uc-video" contenteditable="false" controls="true" /></p>
    <p><em>Feel the warmth of the Mediterranean sun, hear the gentle waves, and imagine yourself surrounded by the peaceful ambiance of this island paradise as you relax in your dream home.</em></p>
    <blockquote><em>"The Mallorca real estate market has grown by an impressive 8% annually over the past five years,"</em> &mdash; Elena Alvarez, Market Analyst at Mediterranean Realty Insights.</blockquote>
    <p>According to recent market data, Mallorca&rsquo;s property values have experienced steady growth, with an average&nbsp;<a href="tiny.cloud">increase of 8% annually over the past five years</a>. This consistent appreciation, coupled with a thriving rental market, makes it an ideal destination for investors seeking both luxury and financial returns.&nbsp;</p>
    <h2>Explore Our Featured Villa: The Epitome of Luxury&nbsp;</h2>
    <p>Located in one of Mallorca&rsquo;s most exclusive areas, this exquisite villa offers breathtaking views and modern design. Every detail has been meticulously crafted to provide the ultimate in comfort and elegance.</p>
    <figure class="image"><img style="width: min(2048px, 100%); aspect-ratio: 2048 / 1148;" src="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/" sizes="(min-width: 2048px) 2048px, 100vw" srcset="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/100x/ 100w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/200x/ 200w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/300x/ 300w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/500x/ 500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/750x/ 750w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/2000x/ 2000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/ 2048w" alt="luxury wooden house interior">
    <figcaption>Designed by <a href="https://www.freepik.com/">Freepik</a></figcaption>
    </figure>
    <ul>
    <li><strong>5 luxurious bedrooms</strong> with private en-suite bathrooms</li>
    <li><strong>Infinity pool</strong> with panoramic Mediterranean views</li>
    <li><strong>Spacious terrace</strong> for outdoor dining and entertainment</li>
    <li><strong>Private garden</strong> with lush landscaping</li>
    <li><strong>Cutting-edge smart home system&nbsp;</strong><strong>&nbsp;</strong></li>
    </ul>
    <figure class="image"><img style="width: min(2000px, 100%); aspect-ratio: 2000 / 1121;" src="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/" sizes="(min-width: 2000px) 2000px, 100vw" srcset="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/100x/ 100w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/200x/ 200w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/300x/ 300w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/500x/ 500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/750x/ 750w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/ 2000w" alt="beautiful kitchen interior design">
    <figcaption>Designed by <a href="https://www.freepik.com/">Freepik</a></figcaption>
    </figure>
    <p>Step inside, and you&rsquo;ll find bright, open living spaces that blend seamlessly with the outdoors, creating a harmonious living environment that&rsquo;s both relaxing and inspiring.</p>
    <p>Owning a villa in Mallorca means more than just having a home&mdash;it means living a life of luxury and adventure. From exploring charming villages to dining at world-class restaurants and sailing the turquoise waters, every day is a new experience.</p>
    <h2>Make This Dream a Reality</h2>
    <p>Don&rsquo;t miss the opportunity to own a piece of paradise. <a href="tiny.cloud">Contact us today</a> to schedule a private tour of this exceptional villa and explore other exclusive properties on the island.</p> 
    </textarea>
tinymce.init({
  selector: "textarea#uploadcare-full-feature",
  plugins: [ "uploadcare", "code", "link", "preview", "lists" ],
  uploadcare_public_key: '<your-public-key>',
  uploadcare_filters: [
    { name: 'none' }, // No filter applied
    { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris'
    { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade'
    { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base'
    { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light'
    { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard'
    { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense'
    { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost'
    { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus'
    { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast'
    { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch'
    { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood'
  ],
  // Video configuration
  uploadcare_video_properties: {
    autoplay: false,
    controls: true,
    loop: false,
    muted: true,
    preload: 'metadata',
    poster: 'https://placehold.co/600x400',
    width: 640,
    height: 360,
    showLogo: false
  },
  a11y_advanced_options: true,
  toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview",
  height: 700,	
  content_style: `
    body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }
    h1 { font-size: 1.5em; }
        h2 { font-size: 1.17em; }
    h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
    p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
    p { line-height: 1.6; margin: 0; } 
    p + p { margin-top: 1rem; }
    a { color: #2b70e3; }
    blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
    figcaption {font-size: 0.875em;}
    uc-video { display: block; margin: 1rem 0; }
  `
});

Quick start

To add the Media Optimizer plugin to the editor, include uploadcare in the plugins option in the editor configuration.

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare uploadcare-video',
  uploadcare_public_key: '<your-public-key>', // Required for Uploadcare integration
  uploadcare_resources: 'uploadcare/uploadcare', // Required when Media Optimizer addon is bundled with TinyMCE
  // uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({
  //   signature: 'sig',
  //   expire: 123
  // }), // Recommended option for secure uploads
});

Features

For a complete guide to the features provided by the Media Optimizer plugin, see the following pages:

Image

Image optimization options, including image filtering, resizing, and adjusting.

Video

Video optimization options, including video player customization, resizing, and adjusting.

Options

The following configuration options affect the behavior of the Media Optimizer plugin:

uploadcare_public_key

Defines the public API key required to authenticate and interact with the Uploadcare API. This key identifies your account and ensures that uploads and operations are associated with your project. Without setting this key, the Uploadcare integration will not function.

This option is mandatory for using Uploadcare.

Type: String

Example: Setting uploadcare_public_key

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
});

uploadcare_signed_upload_auth_provider

Specifies a function used to generate secure signatures for authenticated requests to Uploadcare. This function is required when enabling Uploadcare’s signed uploads feature, which ensures that only authorized users can upload files using your uploadcare_public_key. The function should return a Promise that resolves with an object containing the signature and expiration timestamp.

Use this option to enforce secure uploads, preventing unauthorized users from uploading files via your application.

For more information on Uploadcare Signed Uploads, refer to the official documentation at Uploadcare Signed Uploads.

Type: Function

Example: Setting uploadcare_signed_upload_auth_provider

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_signed_upload_auth_provider: (publicKey) => Promise.resolve({
    signature: 'sig',
    expire: 123
  }),
});
Starter Project

To get started quickly and understand how Uploadcare Signed Uploads integrates with TinyMCE Media Optimizer, Tiny recommends trying the starter project on GitHub to set up Media Optimizer with Signed Uploads. Clone the repository and follow the steps to set up the project. The link leads to the GitHub page for the starter project, where the source code is available for viewing: TinyMCE Media Optimizer Signed Uploads Starter Project.

Tiny recommends configuring the uploadcare_signed_upload_auth_provider option to secure uploads and prevent misuse of your Uploadcare uploadcare_public_key. This option is essential for applications requiring:

  • Prevention of unauthorized file uploads via your uploadcare_public_key.

  • Enforcement of secure upload practices for application integrity.

This option only secures unauthorized access to upload files to the uploadcare storage by verifying signatures during uploads.

For most integrations, enabling signed uploads by configuring this option ensures that only authorized uploads occur, reducing the risk of abuse and maintaining secure usage of your uploadcare_public_key.

uploadcare_cdn_base_url

Specifies the domain used for the Uploadcare service. This domain determines where your files are uploaded and accessed. By default, the plugin uses the Uploadcare CDN ucarecdn.com to host and deliver your files. If you use a custom domain, update this option to match your configuration.

Type: String

Default: https://ucarecdn.com/

Example: Customizing uploadcare_cdn_base_url

tinymce.init({
  selector: "textarea",
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_cdn_base_url: 'https://cdn.mydomain.com',
});

uploadcare_store_type

Specifies the storage type for uploaded files. Use this option to control whether files are stored temporarily or permanently, or allow Uploadcare to decide automatically based on your project settings.

  • auto: Defer the choice of storage behavior to the auto-store setting in the Uploadcare Dashboard.

  • temporary: Files are stored temporarily and removed after 24 hours.

  • permanent: Files are stored permanently in your Uploadcare account.

Select the appropriate value based on your application’s requirements, such as whether files should persist for long-term use or be available for a limited time.

Type: String

Default: permanent

Possible values: auto, temporary, permanent

Example: Using uploadcare_store_type

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_store_type: 'temporary',
});

uploadcare_resources

Specifies the base path where the Uploadcare plugin resources are served from. This option is primarily used when bundling TinyMCE with webpack or other bundlers, where the plugin needs to know where to load additional resources such as the ucvideo.min.js file for video functionality.

When TinyMCE is bundled, the Uploadcare plugin cannot automatically determine where its additional resources are located. This option tells the plugin where to find these resources by specifying the root path to the Uploadcare plugin directory.

Type: String

Default: undefined

Possible values: A string that points to the root path of the Uploadcare plugin directory.

This option is only required when using the Media Optimizer as a paid "addon" and bundling TinyMCE with webpack or similar bundling tools.
Example: Setting uploadcare_resources
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare uploadcare-video',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_resources: 'uploadcare/uploadcare', // Points to the uploadcare plugin directory
  license_key: '<your-license-key>'
});

Complete Bundled Setup Example

For a complete example of setting up TinyMCE with the Uploadcare addon, see the bundled setup example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TinyMCE with Uploadcare Addon</title>
    <script src="path/to/tinymce/tinymce.min.js"></script> <!-- points to the tinymce.min.js file in your project -->
    <script src="path/to/uploadcare/uploadcare/plugin.min.js"></script> <!-- points to the uploadcare plugin.min.js file in your project -->
</head>
<body>
    <textarea>Welcome to TinyMCE with Uploadcare!</textarea>
    <script>
        tinymce.init({
          selector: 'textarea',
          plugins: [
            "uploadcare"
          ],
          toolbar: "uploadcare uploadcare-video",
          uploadcare_resources: 'path/to/uploadcare/uploadcare', // points to the uploadcare plugin directory
          uploadcare_public_key: '<your-public-key>',
          license_key: '<your-license-key>'
        });
    </script>
</body>
</html>

Resource Structure

When using uploadcare_resources, ensure your directory structure follows this pattern:

Example directory structure:
project/
├── uploadcare/
│  └── uploadcare/
│     ├── js/
│     │   └── ucvideo.min.js
│     ├── css/
│     │   └── uc-video.css
│     └── plugin.min.js
└── tinymce/
    └── tinymce.min.js

The plugin will automatically append the necessary subpaths (e.g., /js/ucvideo.min.js) to the base path you specify.

a11y_advanced_options

This option affects the functionality of:

Setting a11y_advanced_options to true:

  • Adds the Image is decorative option to the Insert/Edit Image dialog, allowing users to specify that an image is decorative and does not require alternative text for accessibility purposes.

  • Adds the Decorative image button to Media Optimizer’s Alt text context toolbar, allowing users to specify that an image is decorative and does not require alternative text for accessibility purposes.

  • Adds the Image is decorative option to the Accessibility Checker error dialog for images that need to be marked as decorative.

If a11ychecker_allow_decorative_images is not explicitly set, the value defined in a11y_advanced_options will be used.

Type: Boolean

Default value: false

Possible values: true, false

Example: using a11y_advanced_options

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  a11y_advanced_options: true,
});

Toolbar buttons

The Media Optimizer plugin provides the following toolbar buttons:

Identifier Description

uploadcare

Inserts an image placeholder element. This placeholder supports image uploads via drag-and-drop, file selection, or by providing a URL.

These toolbar buttons can be added to the editor using:

The Media Optimizer plugin provides the following menu items:

Identifier Description

uploadcare

Inserts an image placeholder element. This placeholder supports image uploads via drag-and-drop, file selection, or by providing a URL.

These menu items can be added to the editor using:

The Media Optimizer plugin overrides the Quickbar quickimage toolbar item. To ensure a better user experience and to avoid having two image buttons configure quickbars_insert_toolbar to omit the quickimage toolbar item.