tinyMCE can no longer drag and drop images after upgrading from version 3 to version 4

Question

My website was using the version 3 of tiny mce. One feature it had was that a user could drag an image into the editor, and it would automatically convert it to a base64 data-uri and insert it into the editor. I have just upgraded to version 4, and this functionality seems to be completely gone.

AFAIK, it was not a plugin or anything controlling this, just part of the default functionality, because I was still able to do it when initializing with minimal options, like this:

  tinyMCE.init({mode: "none"});
  tinyMCE.execCommand('mceAddControl', false, 'selector');

Was this feature removed from version 4, or is there a way to turn it back on?

I really want to upgrade to 4, but this is the only thing stopping me, as the image feature is crucial for my application.

Thanks!

score 53 · Accepted Answer · answered Feb 03 '14 at 14:23

53

If you want to enable the image drag & drop feature you have to do it explicitly with the code below.

tinymce.init({
    ...
    paste_data_images: true
});

answered Feb 03 '14 at 14:23

Christophe Eblé

8,071
3
33
32

Of course... its always a simple 1 liner like that with tiny MCE, but I can never find anything in their docs. Can you please provide a link to that feature in the docs? – chiliNUT Feb 03 '14 at 14:44
3

Sure! here it is: http://www.tinymce.com/wiki.php/Configuration:paste_data_images – Christophe Eblé Feb 03 '14 at 14:46
1

Btw, I've made some research to find it! – Christophe Eblé Feb 03 '14 at 14:46
Awesome! You've just helped me out a lot. Thanks! – chiliNUT Feb 03 '14 at 14:50
3

Thanks! Saved me a bunch of time. I've setup a fiddle with TinyMCE 4.2 if anyone wishes to experiment https://jsfiddle.net/nisanth074/uyc6yxzc/ – nisanth074 Oct 13 '15 at 11:21
Has @chiliNUT or anyone actually implemented this as a solid working solution though? As I saw suggested in another thread, I'm guessing you could "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 But what if users drag in 3 images into the editor that are 150mb+ in size each? Also I noticed IE and Edge don't seem to support it. I would rather use TinyMCE if possible but am thinking I may need to switch to Redactor. – Manachi Apr 26 '16 at 06:13
@Manachi the other thread of mine that you are referring to, yes, I have implemented it and works just fine. For the 150MB thing, we have a max upload limit of around 15 MB. Having a CMS that allows 100MB+ image uploads seems silly to me, but I don't know your application. For the IE thing: It works in IE10, I assume IE11 and edge. Doesn't work in IE9- but we use a workaround for that. It is implemented in an older, but still active, CMS... Going forward, however, we have found that http://www.responsivefilemanager.com/ is a much better solution for us – chiliNUT Apr 26 '16 at 18:40
is there some way for dropping an image to just insert a relative link to the image? – Michael Mar 27 '19 at 18:52

score 10 · Answer 2 · edited Jun 18 '16 at 08:07

You have to add following property to enable drag and drop

tinymce.init({
            selector: "#imgedit",  // change this value according to your HTML
            plugins: "paste",
            menubar: "edit",
            toolbar: "paste",
            paste_data_images: true
});

and if you want to add drag and drop with insert url of image functionality then add below line of code

tinymce.init({
            selector: "#imgedit",  // change this value according to your HTML
            toolbar: "image,paste",
            plugins: "image,paste",
            menubar: "insert,edit",
            paste_data_images: true,
});

Thanks for pointing out the necessary `paste` plugin to be added, only now it works. — Avatar, Jul 10 '17 at 22:02

tinyMCE can no longer drag and drop images after upgrading from version 3 to version 4

2 Answers2