Serverless File Uploads for TinyMCE6 Minutes to Integrate
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
- Step 2. Prepare Your TinyMCE Installation
- Step 3. Add File Uploader
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.
The second step is about installing TinyMCE. It’s quick: update your page with the following elements:
<h1>TinyMCE Quick Start Guide</h1>
<textarea id="mytextarea">Hello, World!</textarea>
If you’re up to learning more, check out the Tiny Quick Start.
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:
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.
Good job, you’ve just enabled serverless file and image uploads 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 Libraries and Integrations.
In case you have any questions, feel free to post those around our community area.