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!

Taxdeductible

Answer 1

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
});

Poeticize

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? – Taxdeductible

Sure! here it is: tinymce.com/wiki.php/Configuration:paste_data_images – Brittaney

Btw, I've made some research to find it! – Brittaney

Awesome! You've just helped me out a lot. Thanks! – Taxdeductible

Thanks! Saved me a bunch of time. I've setup a fiddle with TinyMCE 4.2 if anyone wishes to experiment jsfiddle.net/nisanth074/uyc6yxzc – Wingo

Has @Taxdeductible 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. – Heidy

@Heidy 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 responsivefilemanager.com is a much better solution for us – Taxdeductible

is there some way for dropping an image to just insert a relative link to the image? – Chargeable

Answer 2

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,
});

Ivers

Thanks for pointing out the necessary paste plugin to be added, only now it works. – Sade