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 jQuery File Uploader that adapts to your app’s flow and design.

Please note that this guide is not updated to support our latest File Uploader.

Every file uploaded via the uploading widget gets instantly cached on our CDN and swiftly and reliably delivered across 130+ countries.

This guide covers integrating the 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:

1<!DOCTYPE html>
2<html>
3<head>
4  <script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
5  <script>
6  tinymce.init({
7    selector: '#mytextarea'
8  });
9  </script>
10</head>
11
12<body>
13<h1>TinyMCE Quick Start Guide</h1>
14  <form method="post">
15    <textarea id="mytextarea">Hello, World!</textarea>
16  </form>
17</body>
18</html>

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

Step 3. Add the 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:

1tinymce.init({
2    selector: '#mytextarea',
3    plugins: 'uploadcare',
4    toolbar: 'uploadcare',
5    external_plugins: {
6      uploadcare: '/path/to/uploadcare/plugin.js',
7    },
8    uploadcare_public_key: 'YOUR_PUBLIC_KEY',
9});

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.

TinyMCE uploading widget installed

Conclusion

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

For further reading, take a look at: