Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
TinyMCE 4.6.5

New local upload simplifies adding images to TinyMCE

Joakim Lindkvist

August 6th, 2017

Written by

Joakim Lindkvist
Joakim Lindkvist

Category

News & Updates

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.

MediaImages
Joakim Lindkvist
byJoakim Lindkvist

Cofounder of TinyMCE and product owner. Joakim lives in Umeå, Sweden.

Related Articles

  • Laptop and phone.
    News & Updates

    Editable Discontent

    by Team Tiny in News & Updates
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor