With improvements to TinyMCE over the last 6 months, and the introduction of the Upload API last year, our latest release brings a much-requested improvement to TinyMCE. You can now drag and drop files from your local computer into the editor. We started with images, so let's take a look at what's new.
By configuring the Upload API, you will now see a new tab in the image dialog called "Upload".
This tab contains the upload functionality. Selecting or drag & dropping the image into the upload area will immediately upload a file (when the Upload API is configured correctly).
After the upload is complete, the user will be automatically returned to the General tab, with the source field information filled in.
When you configure the images_upload_url config option, the new tab will automatically appear. To add this functionality to your TinyMCE instance, read Get Started Uploading Images in our docs. You'll also find the File and Image Upload configuration docs useful.
This functionality is now available in the TinyMCE Community branch (version 4.6.5), and you’ll need to download the SDK. If you're a Tiny Cloud user, it is available in our dev channel. Update your tinymce
script like this:
<script src="https://cloud.tinymce.com/dev/tinymce.min.js"></script>
Example config
<!DOCTYPE html>
<html>
<head>
<script src="https://cloud.tinymce.com/dev/tinymce.min.js"></script>
<script>
tinymce.init(
{
selector:'textarea',
images_upload_url : ‘youruploadscript.php’
});</script>
</head>
<body>
<textarea>Next, sign up for the Tiny Cloud plan that's right for you!</textarea>
</body>
</html>
See the changelog for the full list of updates and fixes in the 4.6.5 release.
We are contemplating adding this feature to the Link dialog so that you can upload and link to files, not just images. If you want to provide feedback on this feature, add a comment to the feature request in our Community.
If you would also like to manage your files as well as images, you might want to look at MoxieManager, where you can upload and manage files either locally or in cloud solutions like Amazon S3.
If you think you found a bug, please visit the TinyMCE Github project and submit a bug report.