Start trial
Plans & PricingContact Us
Log InStart For Free

New local upload simplifies adding images to TinyMCE

August 6th, 2017

1 min read

TinyMCE 4.6.5

Written by

Joakim Lindkvist

Category

World of WYSIWYG

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
byJoakim Lindkvist

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

Related Articles

  • World of WYSIWYGDec 23rd, 2024

    10 Best Open Source WYSIWYG Editors

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.