TinyMCE Native Integration for Serverless File Uploads

Please note this guide is for TinyMCE’s feature and not for our File Uploader.

TinyMCE is a leading WYSIWYG editor that powers 100M sites on the web. TinyMCE provides a native integration to Uploadcare via its Media Optimizer feature.

Every image uploaded via Media Optimizer is instantly cached on our CDN and swiftly and reliably delivered across 130+ countries. This improves front-end performance for your app users, and cuts down development time. With Media Optimizer, developers don’t have to waste time writing code for image configuration and responsiveness. It’s built in!

This guide covers configuring the Media Optimizer widget in the latest version of TinyMCE.

You can see a demo of TinyMCE’s Media Optimizer, as well as advanced configuration instructions, here.

TinyMCE’s integration currently only supports uploading of images. The integration will expand in 2025 to support video and other types of file uploads.

Get a TinyMCE Account

To use Media Optimizer in TinyMCE, you will need a TinyMCE subscription that includes the feature. Contact the TinyMCE sales team to set up an account with Media Optimizer access. Your subscription will include an Uploadcare account*, and access to a separate Uploadcare admin portal.

While it’s currently only available through sales-assisted subscriptions, Media Optimizer will be available to TinyMCE self-service customers in 2025.

* If you already have an Uploadcare account, the TinyMCE sales team can help you connect that account to your TinyMCE account.

Find your API Keys

Uploadcare API

Once you have access to your Uploadcare Dashboard, create a new project or select an existing one that you want to use with TinyMCE.

Find the Public API Key for your selected project.

TinyMCE API

To find your TinyMCE API key, log in to your TinyMCE customer portal.

Then click Integrate TinyMCE to find your TinyMCE API key.

Prepare Your TinyMCE Installation

To install a basic TinyMCE setup in your application, update your index.html file with the following code:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
5 </head>
6 <body>
7     <textarea>
8     <h1>The genus <em>Zostera</em> is critical for life in the ocean</h1>
9 <p>The genus <em>Zostera</em>, or eelgrass, plays a vital role in marine ecosystems, thriving in shallow coastal waters on sandy or muddy substrates. These seagrasses perform underwater photosynthesis, forming the foundation of complex food webs and serving as crucial habitats for marine life. <em>Zostera</em> beds offer nursery grounds for juvenile fish and invertebrates, bolstering biodiversity. Additionally, their extensive root systems stabilize shorelines by trapping sediment, mitigating erosion, and sequestering carbon more efficiently than terrestrial forests, contributing to climate change mitigation.</p>
10 <p>Beyond their structural and ecological contributions, <em>Zostera</em> supports symbiotic relationships with various organisms. Epiphytic algae and microorganisms colonize its leaves, while small invertebrates feed on these epiphytes and find shelter among the seagrass blades. These interactions create a balanced and thriving habitat.</p>
11 <blockquote>
12 <p><em>Zostera</em> supports symbiotic relationships with various organisms</p>
13 </blockquote>
14 <p>Despite their importance, <em>Zostera</em> populations face threats from pollution, physical disturbances, and climate change. Conservation efforts are essential to ensure the survival of these critical ecosystems and the benefits they provide.</p>
15 </textarea>
16   <script>
17     tinymce.init({
18       selector: 'textarea',
19       plugins: 'lists link image table code help wordcount',
20       toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | outdent indent'
21 });
22   </script>
23 </body>
24 </html>

If you’re up to learning more, check out the Tiny Quick Start.

You’ll need to replace no-api-key in the TinyMCE URL with a real API key. You can get one for free with a 14-day trial of TinyMCE today.

Configure Media Optimizer

Now let’s configure Uploadcare for TinyMCE. The code below is required to activate the Media Optimizer plugin:

1 tinymce.init({
2   selector: 'textarea',
3   plugins: 'uploadcare',
4   toolbar: 'uploadcare',
5   uploadcare_public_key: 'YOUR-PUBLIC-KEY'
6 });

Make sure to replace YOUR_PUBLIC_KEY in the above snippet with your Uploadcare Public API Key.

Your complete TinyMCE code snippet should now read:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
5 </head>
6 <body>
7     <textarea>
8     <h1>The genus <em>Zostera</em> is critical for life in the ocean</h1>
9 <p>The genus <em>Zostera</em>, or eelgrass, plays a vital role in marine ecosystems, thriving in shallow coastal waters on sandy or muddy substrates. These seagrasses perform underwater photosynthesis, forming the foundation of complex food webs and serving as crucial habitats for marine life. <em>Zostera</em> beds offer nursery grounds for juvenile fish and invertebrates, bolstering biodiversity. Additionally, their extensive root systems stabilize shorelines by trapping sediment, mitigating erosion, and sequestering carbon more efficiently than terrestrial forests, contributing to climate change mitigation.</p>
10 <p>Beyond their structural and ecological contributions, <em>Zostera</em> supports symbiotic relationships with various organisms. Epiphytic algae and microorganisms colonize its leaves, while small invertebrates feed on these epiphytes and find shelter among the seagrass blades. These interactions create a balanced and thriving habitat.</p>
11 <blockquote>
12 <p><em>Zostera</em> supports symbiotic relationships with various organisms</p>
13 </blockquote>
14 <p>Despite their importance, <em>Zostera</em> populations face threats from pollution, physical disturbances, and climate change. Conservation efforts are essential to ensure the survival of these critical ecosystems and the benefits they provide.</p></textarea>
15   <script>
16     tinymce.init({
17   selector: 'textarea',
18   plugins: 'uploadcare lists link image table code help wordcount',
19   toolbar: 'uploadcare | undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | outdent indent',
20   uploadcare_public_key: 'YOUR-PUBLIC-KEY'
21 });
22   </script>
23 </body>
24 </html>

Save your page and open it in your browser. Now you can save images directly from TinyMCE into your Uploadcare account!

The Media Optimizer feature works with Uploadcare to automatically compress images and generate responsive versions suitable for any display and needed resolution. Once it’s integrated with TinyMCE, it will look like this:

Conclusion

Good job, you’ve just enabled serverless image uploading and optimization in your TinyMCE editor 🙂

Now your users can quickly drag and drop images from their local files or import from a URL, and immediately adjust the pictures to fit their needs. With Media Optimizer, over a dozen image enhancement tools are already available to users, along with their image which is cached in our CDN upon upload. No need to write code for responsiveness or compression. It’s that easy!

For further reading, take a look at:

TinyMCE Media Optimizer documentation
Other Uploadcare integrations