Disable dragging images on TinyMCE 4

Question

How I can disable dragging images on TinyMCE 4? I use jQuery:

jQuery('#tinymce img').on('dragstart', function(event) {
    event.preventDefault();
});

but it not working...

Answer 1

Paste Plugin

I find some better solution to this. You can just use the paste_block_drop option from paste plugin like

tinymce.init({
    plugins: 'paste image',
    paste_block_drop: true
)};

And what this option does is simply Enables you to block drag/drop from/to the editor and inside it.

NB: Tested on version 4.7.4 though I didn't find it in their current(when I am answering) paste plugin documentation, Rather I found it in their archive documentation for version 4.3.12

PowerPaste Plugin

And if you are using Power Paste Plugin you can use the powerpaste_block_drop: true option instead that will disable all drag and dropping content into the editor. You will find documentation about this here (thanks to @Kurt from the comment)

Answer 2

Use the tinymce configuration parameter setup and use a handler for this:

    setup: function(editor) {
        editor.on('init', function(event) {

        $(editor.getBody().parentNode).bind('dragover dragenter dragend drag drop', function(e) {
            e.stopPropagation();
            e.preventDefault();
        });

       $(editor.getDoc()).bind('draggesture', function(e) {
           e.stopPropagation();
           e.preventDefault();

       });
    });
  }