Serverless File Uploads for TinyMCE

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

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

This guide covers integrating Uploading Widget 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>html

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

Step 3. Add Uploading Widget

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',
});html

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 Uploading Widget is there and ready to receive uploads.

Conclusion

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

For further reading, take a look at:

Configuration section of the integration repo readme.
Uploadcare In-Browser Image Editing options for File Uploader.
Other Uploadcare integrations.

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