Image Optimizer Powered by Uploadcare plugin

This plugin is only available for paid TinyMCE subscriptions.
This feature is only available for TinyMCE 7.6.0 and later.

Overview

The Image Optimizer plugin offers a range of powerful features for image hosting, serving, and editing. These include responsive image delivery, automatic image format selection, automatic compression, and non-destructive image transformations and adjustments, all powered by Uploadcare.

Key benefits

  • Improve page loading speed and save on bandwidth by serving images in the optimal size, format, and compression based on the visitor’s browser and device.

  • Ditch the image editor and adjust images right inside TinyMCE with non-destructive transformations and adjustments. Change your mind any time!

  • Stay safe and compliant with secure uploads, built in malware protection, and unsafe content detection

  • Enterprise-ready scalable cloud storage provided by Uploadcare, delivered through its lightning-fast global CDN, and compliant with SOC2 and GDPR standards.

Interactive example

  • TinyMCE

  • HTML

  • JS

<textarea id="uploadcare">
<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>
<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",
    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'
    ],
    a11y_advanced_options: true,
    toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | 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;}
    `
  });

Basic setup

To add the Image Optimizer Powered by Uploadcare plugin to the editor, include uploadcare in the plugins option in the editor configuration.

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

The Image Optimizer Powered by Uploadcare 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.

Image Operations

Below is an overview of the features provided by the Image Optimizer Powered by Uploadcare plugin for image optimization:

Feature Operation Icon Description

Align

align-left.svg

Provides alignment options for the image or element.

Align Left

align-left.svg

Aligns the image to the left.

Align Centre

align-center.svg

Centers the image.

Align Right

align-right.svg

Aligns the image to the right.

Transform

transform-image.svg

Allows users to apply transformations to the image:

Rotate Left

rotate-left.svg

Rotates the image counterclockwise (left).

Rotate Right

rotate-right.svg

Rotates the image clockwise (right).

Flip Vertically

flip-vertically.svg

Flips the image vertically.

Flip Horizontally

flip-horizontally.svg

Flips the image horizontally.

Resize

resize.svg

Changes the size of the image.

Adjust

adjustments.svg

Provides tools for adjusting image properties:

Brightness

brightness.svg

Adjusts the image brightness.

Contrast

contrast.svg

Adjusts the image contrast.

Exposure

exposure.svg

Adjusts the image exposure.

Gamma

gamma.svg

Adjusts the image gamma.

Vibrance

vibrance.svg

Adjusts the image vibrance.

Saturation

saturation.svg

Adjusts the image saturation.

Warmth

warmth.svg

Adjusts the image warmth.

Grayscale

grayscale.svg

Converts the image to grayscale.

Invert Colors

invert.svg

Inverts the image colors.

Sharpen

sharpen.svg

Sharpens the image.

Blur

blur.svg

Blurs the image.

Filters

auto-image-enhancement.svg

Provides tools for applying filters to the image.

Alt Text

alt-text.svg

Adds alternative text to describe the image for accessibility purposes.

Decorative Image

image-decorative.svg

Marks the image as decorative, indicating it doesn’t require alternative text for accessibility.

This icon will only appear when the a11y_advanced_options configuration option is enabled.

Caption

caption.svg

Adds a caption below the image for additional context.

Revert

revert.svg

Restores the image to its original state by undoing all edits.

Options

The following configuration options affect the behavior of the Image Optimizer Powered by Uploadcare 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 Image Optimizer Powered by Uploadcare, Tiny recommends trying the starter project on GitHub to set up Image Optimizer Powered by Uploadcare 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 Image Optimizer Powered by Uploadcare 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_srcset_steps

Specifies an array of numeric values representing the widths used to generate the srcset attribute for responsive images. This enables browsers to select the most suitable resolution based on the device’s display and network conditions.

Customize this array to include only the widths required for your application. Reducing the number of resolutions can improve processing speed, while adding specific sizes can accommodate unique layout needs.

Type: Array

Default: [100, 200, 300, 500, 750, 1000, 1250, 1500, 2000, 2500, 3000]

Example: Generated srcset Attribute with Custom Widths

When an image is uploaded, its original width is used to create a srcset attribute with downscaled images for the defined widths. For instance, if the image width is 780 pixels and uploadcare_srcset_steps is set to [100, 200, 300, 500, 750], the resulting srcset will look like this:

Example: Responsive 780px Image with Custom Widths in srcset
<img
  style="width: min(780px, 100%); aspect-ratio: 780 / 780;"
  src="https://ucarecdn.com/{image-uid}/-/preview/"
  sizes="(min-width: 780px) 780px, 100vw"
  srcset="
      https://ucarecdn.com/{image-uid}/-/resize/100x/ 100w,
      https://ucarecdn.com/{image-uid}/-/resize/200x/ 200w,
      https://ucarecdn.com/{image-uid}/-/resize/300x/ 300w,
      https://ucarecdn.com/{image-uid}/-/resize/500x/ 500w,
      https://ucarecdn.com/{image-uid}/-/resize/750x/ 750w,
      https://ucarecdn.com/{image-uid}/-/preview/ 780w
  ">

This ensures the browser selects the optimal image size based on the viewport and device characteristics, enhancing performance and user experience. On devices with narrower viewports, smaller images (e.g., 100w or 200w) will be prioritized, reducing bandwidth usage.

Example: Customizing uploadcare_srcset_steps

To customize the array, update the configuration as shown below:

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_srcset_steps: [100, 200, 300, 500, 750],
});

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_filters

The uploadcare_filters option defines the list of image filters available when using the Image Optimizer Powered by Uploadcare plugin. Each filter applies a stylized image effect consistent with the visual design of the content and can be configured with an amount value to control its intensity. Filters enhance images by applying consistent styling, improving overall quality, and boosting user engagement.

Each filter is defined as an object with the following properties:

{
  name: 'filterName', // Required: name of the filter to apply
  amount: number, // Optional: strength of the filter (default = 100)
  label: 'string' // Optional: custom name to display in the UI
}

  • name: A predefined filter identifier (e.g., adaris, zevcen, galen).

  • amount: The intensity of the filter effect, ranging from -100 to 200:

    • 0: No effect (image stays original).

    • 0 to 100: Gradually increases filter strength.

    • 100: Default intensity (as the filter is designed).

    • >100: Exaggerates the effect.

    • <0: Inverts the filter effect (produces a "negative" version).

  • label: Optional display name for the filter in your UI. If omitted, it defaults to the name.

Example: Setting uploadcare_filters

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

  // Define available Uploadcare image filters and their intensity levels
  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'
  ]
});

The { name: 'none' } option adds a "No filter" or "Remove filter" choice to the list of available filters. This allows end users to remove any applied filter. If this option is not included, users will not have a way to remove a filter once it’s been applied.

  • Filter names must be selected from the supported set:

    • adaris, briaril, calarel, carris, cynarel, cyren, elmet, elonni, enzana, erydark, fenralan, ferand, galen, gavin, gethriel, iorill, iothari, iselva, jadis, lavra, misiara, namala, nerion, nethari, pamaya, sarnar, sedis, sewen, sorahel, sorlen, tarian, thellassan, varriel, varven, vevera, virkas, yedis, yllara, zatvel, zevcen.

  • If the amount is not set, it defaults to 100.

  • Some filters may behave unpredictably outside the 0–100 range.

  • Applying negative amount values inverts the filter, useful for creative effects.

Uploadcare Filter Previews

Each image below represents a filter applied to the same source image.

adaris briaril calarel carris

adaris

briaril

calarel

carris

cynarel

cyren

elmet

elonni

cynarel

cyren

elmet

elonni

enzana

erydark

fenralan

ferand

enzana

erydark

fenralan

ferand

galen

gavin

gethriel

iorill

galen

gavin

gethriel

iorill

iothari

iselva

jadis

lavra

iothari

iselva

jadis

lavra

misiara

namala

nerion

nethari

misiara

namala

nerion

nethari

pamaya

sarnar

sedis

sewen

pamaya

sarnar

sedis

sewen

sorahel

sorlen

tarian

thellassan

sorahel

sorlen

tarian

thellassan

varriel

varven

vevera

virkas

varriel

varven

vevera

virkas

yedis

yllara

zatvel

zevcen

yedis

yllara

zatvel

zevcen

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 Image 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 without alternative text or the role="presentation" attribute.

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 Image Optimizer Powered by Uploadcare 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 Image Optimizer Powered by Uploadcare 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: