8

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 complicated, he just wants do drop the image and forget about it, as he's not going to use that image ever again.

Borgtex
  • 3,235
  • 1
  • 19
  • 28
  • Hi Borgtex. Did you find a solution? I am looking for something similar. – rassom Jul 12 '12 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 Jun 25 '14 at 05: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 Apr 26 '16 at 05: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 recommend responsivefilemanager.com fantastic tinymce plugin – chiliNUT Apr 27 '16 at 00:22
  • Current TinyMCE comes with such functionality: https://www.tinymce.com/docs/get-started/upload-images/ – jayarjo Dec 12 '16 at 19:50

1 Answers1

2

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.com/valums/file-uploader for drag and drop upload functionality, but I'm not sure how you would integrate it with TinyMCE.

Dave L.
  • 9,595
  • 7
  • 43
  • 69
  • no, encoding the image in base64 is not an option, as it can be shown in browsers that don't support it, also the images may be of any size. I've been trying to do it with valums file uploader with some success, but with my limited javascript knowledge and the lack of examples it's quite difficult to adapt it to my needs. – Borgtex Dec 14 '11 at 16:09