Serverless File Uploads for TinyMCE
6 Minutes to Integrate

TinyMCE is a powerful WYSIWYG editor powering 100M sites on the web. Integrating Uploadcare enables serverless file and image upload via File Uploader that adapts to your app’s flow and design.

Every file uploaded via File Uploader gets instantly cached on our CDN and swiftly and reliably delivered across 130+ countries.

This guide covers integrating File Uploader into TinyMCE 4+ in 6 minutes. Here’s a basic demo of what you’ll get.

Step 1. Get Uploadcare Account

First, you will need an Uploadcare account. In case you don’t have it, Sign Up for one, it’s free. Then, navigate to your dashboard to create a new project or obtain Public API Key for an existing one.

If you’re going to allow non-image uploads in your TinyMCE, add billing info in your account settings.

Step 2. Prepare Your TinyMCE Installation

The second step is about installing TinyMCE. It’s quick: update your page with the following elements:

<!DOCTYPE html>
<html>
<head>
  <script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
  <script>
  tinymce.init({
    selector: '#mytextarea'
  });
  
</script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

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

Step 3. Add File Uploader

Now that we’ve got TinyMCE let’s integrate Uploadcare. The HTML snippet above can serve as a good starting point.

Download the latest plugin archive from the Releases page of our repo. Extract the downloaded archive to the plugin directory of your TinyMCE installation or any other target location.

And the last thing is to update settings applied on TinyMCE init:

tinymce.init({
    selector: '#mytextarea',
    plugins: 'uploadcare',
    toolbar: 'uploadcare',
    external_plugins: {
      uploadcare: '/path/to/uploadcare/plugin.js',
    },
    uploadcare_public_key: 'YOUR_PUBLIC_KEY',
});

Make sure to replace YOUR_PUBLIC_KEY in the above snippet with the Public API Key you discovered in the first step of this guide. Check if external_plugins is a valid path for your TinyMCE installation.

Save your page and open it in your browser. The widget is there and ready to receive uploads.

TinyMCE Widget Installed

Conclusion

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

For further reading, take a look at:

In case you have any questions, feel free to post those around our community area.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.