I'm looking for a tinymce plugin or an external jquery solution easy to integrate into tinymce that allows drag and drop image uploading and insertion in a tinymce textarea, either directly dropping the image in the textarea itself or in a defined "drop zone", something similar to the new media upload button in Wordpress or, even better, without showing any dialog.

I don't want extra functions like a gallery browser or image repository management, already tried several plugins that do that and the customer finds it too tedious and plicated, he just wants do drop the image and forget about it, as he's not going to use that image ever again.

I'm looking for a tinymce plugin or an external jquery solution easy to integrate into tinymce that allows drag and drop image uploading and insertion in a tinymce textarea, either directly dropping the image in the textarea itself or in a defined "drop zone", something similar to the new media upload button in Wordpress or, even better, without showing any dialog.

I don't want extra functions like a gallery browser or image repository management, already tried several plugins that do that and the customer finds it too tedious and plicated, he just wants do drop the image and forget about it, as he's not going to use that image ever again.

• javascript
• jquery
• drag-and-drop
• tinymce
• image-uploading

• Hi Borgtex. Did you find a solution? I am looking for something similar. – rassom Commented Jul 12, 2012 at 15:53
• 2 I had to do something like this. My solution was to submit the text, with the base64 images, to the server, and then server side, extract the base64 uris from the Dom, write them to a file, replace the SRC with the path to the newly created file, then submit the text to the database. – chiliNUT Commented Jun 25, 2014 at 5:49
• @chiliNUT That's an interesting solution. Did you have ongoing success with this? What about extremely large images, were there any issues there? – Manachi Commented Apr 26, 2016 at 5:45
• @Manachi since it's base 64 encoded, the upload size ends up being roughly 133% larger than the image. that said, it wasn't an issue for me, as the main use case was for images exported from photoshop at reasonable Web sizes (under 1mb). For large images, and really in general, I would remend responsivefilemanager. fantastic tinymce plugin – chiliNUT Commented Apr 27, 2016 at 0:22
• Current TinyMCE es with such functionality: tinymce./docs/get-started/upload-images – jayarjo Commented Dec 12, 2016 at 19:50

1 Answer 1

What browsers do you need to support?

Have you tried just dragging and dropping an image into a TinyMCE text area? It will encode the image in base64 and use that encoding as the value for the src attribute of the image tag. Since the customer is "not going to use that image ever again" that might be a temporary solution, especially if the images are very small like logos and the like.

Alternatively, many people have success with https://github./valums/file-uploader for drag and drop upload functionality, but I'm not sure how you would integrate it with TinyMCE.