1

Topic: Disable drag/drop facility

Hi,

is there anyway to disable to drag/drop in TinyMCE?

I.e. I have images on my page but don't want visitors to be able to drag those images or anything else into the html editor.

Cheers,
Matt

2

Re: Disable drag/drop facility

I've noticed other people have asked similar questions regarding disabling drag & drop in TinyMCE, but no one appears to have answered this. Any support on this matter would be great! Thanks.

3

Re: Disable drag/drop facility

Is there a reason why some images are allowed to be moved around and others are not? .jpg vs .gif? size? Any answer would help greatly:)

4

Re: Disable drag/drop facility

Drag and drop is fine for content within the TinyMCE Editor, however content outside is not.

I've also noticed you also can drag stuff from other browser windows into TinyMCE. I really want to be able to disable this. Cheers.

5

Re: Disable drag/drop facility

Hi!

I guess that drag&drop is a browser feature (if not a feature of the OS itself) which cannot be disabled. You can't do anything about it neither in TinyMCE nor in any other Javascript-based editor out there.

Sorry to dissapoint you!

Greetings from Germany,

Felix Riesterer.

Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)

6

Re: Disable drag/drop facility

Is it possible to have hooks in TinyMCE to reject the drop?

7

Re: Disable drag/drop facility

In case you didn't get it the first time...

Felix Riesterer wrote:

You can't do anything about it neither in TinyMCE nor in any other Javascript-based editor out there.

Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)

8

Re: Disable drag/drop facility

Felix Riesterer wrote:

In case you didn't get it the first time...

Felix Riesterer wrote:

You can't do anything about it neither in TinyMCE nor in any other Javascript-based editor out there.

Well ... I used Xinha before, and this RTF editor can do it !
BTW. I changed to TinyMCE while Xinha did not work for me.

9

Re: Disable drag/drop facility

I guess you could disable all drag/dropping by blocking the drop event with something like.

tinymce.dom.Event.add(ed.getDoc(), 'drop', function(e) {
   return tinymce.dom.Event.cancel(e);
});

Best regards,
Spocke - Main developer of TinyMCE

10

Re: Disable drag/drop facility

hi!

I inserted  the following code in one of my plugins:

tinymce.dom.Event.add(ed.getDoc(), 'dragdrop', function(e) {
alert("dragdrop");               
return tinymce.dom.Event.cancel(e);
});

this handler capture event and i can see alert, but only when element have been moved already.
And tinymce.dom.Event.cancel(e), i.e.  e.preventDefault() - doesn't cancel this moving

I need a solution only for FF, can anybody help me?
sorry for my bad english

11

Re: Disable drag/drop facility

You are on track. Check the gecko manuals on what events there is I think there is a few others you might try to block.

Best regards,
Spocke - Main developer of TinyMCE

12

Re: Disable drag/drop facility

Hi,

I inserted the code from above into my plugin, but I don't even get the alert message.  Is there a better example of this?

BTW, I'm using 3.0rc1.

Thanks

13

Re: Disable drag/drop facility

If you're using jquery:

$(element).mousedown(function(e) { 
     if(e.preventDefault) {
           e.preventDefault();
     }
   });

Where 'element' is of course the selector for the images on your page you will not allow to drag. I solved this that way, not on the tinymce side, to avoid at least images from the cms being dragged somewhere.

14

Re: Disable drag/drop facility

At the fear of sounding stupid, where would I put Spocke's code?
I have tried in the TinyMCE.js file, in the TinyMCE declaration on page, and I've also put it inside one of the plugins, all to no avail.

I would like to disable all drag and drop functions, but don't know where to do this.

Actually, to be honest, I would love to cause the following action, when a drop is detected, the Paste From Word dialog appears, but I guess that's asking for too much!  You see, if I use the "Paste from Word" everything is fine.  But if the user drags from Word, then all the MS formatting is preserved sad  I want to force a Paste From Word option. I've tried using the onchange_callback but this risks an infinite loop.

15

Re: Disable drag/drop facility

I have tried this code, but had no success:

var edMouseDown = false;
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    plugins : "imagemanager,safari,table,advimage,advlink,iespell,spellchecker,preview,media,searchreplace,print,contextmenu,paste,paste2,fullscreen,noneditable,visualchars,xhtmlxtras,template,imagemanager",
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,cut,copy,pasteword,|,iespell,spellchecker,search,replace,formatselect",
    theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,insertimage,cleanup,code,|,visualchars,nonbreaking,template,pagebreak",
    theme_advanced_buttons3 : "tablecontrols,|,visualaid,|,sub,sup,|,charmap,iespell,|,print,|,fullscreen",
    spellchecker_languages : "+English=en",
    spellchecker_rpc_url:"includes/tinymce/spellchecker/rpc.php",    
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

    
    invalid_elements : "style,span,script,xml,div",
    onchange_callback : "myCustomOnChangeHandler",
    
    setup : function(ed) {
        ed.onMouseDown.add(function(e) { edMouseDown = true; });
        ed.onMouseUp.add(function(e) { edMouseDown = false; });
        ed.onInit.add(function(ed, o) {
            tinymce.dom.Event.add(ed.getBody().parentNode, 'dragdrop', function(e) { edMouseDown = false; });
        });

        // watch for drag attempts
        var evt = (tinymce.isIE) ? 'dragenter' : 'dragover'; // IE allows dragdrop reject on dragenter (more efficient)
        ed.onInit.add(function(ed, o) {
            // use parentNode to go above editor content, to cover entire editor area
            tinymce.dom.Event.add(ed.getBody().parentNode, evt, function (e) {
                if (!edMouseDown) {
                    // disallow drop
                    return tinymce.dom.Event.cancel(e);
                }
            });
        });        
        
    }    
});

16

Re: Disable drag/drop facility

Ok, I'm able to get the code to prevent dragging and dropping text and images from the same HTML page into the TinyMCE window, but I cannot prevent the same action dragging from Word to TinyMCE which leads me to think that this is a system function which JS cannot control and therefore is impossible with TinyMCE.

Last edited by stevenmc (2009-09-24 19:30:31)

17

Re: Disable drag/drop facility

Ok, I have managed to create a solution to my problem.
Problem: When dragging from Microsoft Word into TinyMCE, formatting is preserved in MS Word format, even if you don't want that.

Solution:  This solution invokes the PasteFromWord dialog box which you drop your contents into rather than the TinyMCE window. Excellent!

function myCustomOnChangeHandler(){
    pasteFromWordCounter = 0;
}

var pasteFromWordCounter = 0;
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    plugins : "imagemanager,safari,table,advimage,advlink,iespell,spellchecker,preview,media,searchreplace,print,contextmenu,paste,paste2,fullscreen,noneditable,visualchars,xhtmlxtras,template,imagemanager",
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,cut,copy,pasteword,|,iespell,spellchecker,search,replace,formatselect",
    theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,insertimage,cleanup,code,|,visualchars,nonbreaking,template,pagebreak",
    theme_advanced_buttons3 : "tablecontrols,|,visualaid,|,sub,sup,|,charmap,iespell,|,print,|,fullscreen",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    paste_convert_middot_lists:true,    
    onchange_callback : "myCustomOnChangeHandler",
    
    setup : function(ed) {
        ed.onInit.add(function(ed) {
            if (tinymce.isIE) {
                tinymce.dom.Event.add(ed.getBody(), "dragenter", function(e) {
                    return tinymce.dom.Event.cancel(e);
                });
            } else {
                tinymce.dom.Event.add(ed.getBody().parentNode, "dragover", function(e) {
                    tinymce.dom.Event.cancel(e);
                    if (pasteFromWordCounter<=0){
                        alert("Follow instructions carefully!\n\nKeep the left mouse button pressed\nPress spacebar\nRelease your left mouse button in the textbox area provided.");
                        window.setTimeout('tinyMCE.selectedInstance.execCommand("mcePasteWord",true)', 1);  //this was mcePasteText for some reason
                        pasteFromWordCounter++;
                    }
                });    
            }
        });
    }
});

Thanks to ashtonium with http://tinymce.moxiecode.com/punbb/view … hp?id=6886

18

Re: Disable drag/drop facility

since this is the first google result for this issue i thought I'd add this (since it took me a day to find it)

there is now an option in the paste plugin called 'paste_block_drop' (http://wiki.moxiecode.com/index.php/Tin … gins/paste)
just set that to true and no more drag and drop!

19

Re: Disable drag/drop facility

sheff wrote:

since this is the first google result for this issue i thought I'd add this (since it took me a day to find it)

there is now an option in the paste plugin called 'paste_block_drop' (http://wiki.moxiecode.com/index.php/Tin … gins/paste)
just set that to true and no more drag and drop!

I used paste_block_drop and it works for preventing drag and drop from browser to browser, which is great.  But is there a way to disable drag and drop an image from the local file system?  When you do that, it creates an image object with src of base64 string and length can be few MB big!

This only happens on Firefox...

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRIAAD/4SNrRXhpZgAATU0AKgAAABAAA....." />

20

Re: Disable drag/drop facility

This is a firefox specific issue.  It is reproducible with other popular WYSIWYG editors as well - CKEditor, etc.

I've started a bugzilla ticket for it - please go and leave a comment there if you would prefer to see this "feature" disabled by default.

https://bugzilla.mozilla.org/show_bug.cgi?id=729587

21

Re: Disable drag/drop facility

I also have the same problem here.
I have people dragging in images from their local machine and then issues get posted to the server where the url is meaningless.
I thought I could get around this with by enforcing that the urls start with http or www.
I tried using the valid_elements tag with "img[src<http*]" but the * only works on the element or argument.    If we could simply add a startsWith option to this, it may provide a good solution?

I also tried using the onchange_callback to write a function that checks for a vailid url but it does not seem to fire on the paste or drag.

I think a lot of people are looking for a solution here, so this is just an entry with some more possible ideas that were close to working but not quite there.

22

Re: Disable drag/drop facility

Inside the _addEvents function section of tiny_mce.js modify/add the following piece of code:

if (tinymce.isGecko) {
    Event.add(t.getDoc(), 'DOMNodeInserted', function(e) {
        var v;
        e = e.target;

        if (e.nodeName === "IMG"){ 
            if (e.src.match(/.*?data:image.*?;base64/g)) {
                imgParent = e.parentNode;
                imgParent.removeChild(e);
            }
        }                    

        if (e.nodeType === 1 && e.nodeName === 'IMG' && (v = e.getAttribute('mce_src')))
            e.src = t.documentBaseURI.toAbsolute(v);
    });
}

This will delete the image tag as soon as it's placed inside the editor.

Last edited by arvind (2012-07-10 10:02:50)

23

Re: Disable drag/drop facility

If anyone still looking for the solution to this kind of problem. I would suggest use this code, cause it works fine in most cases. I only have a suggestion to modify it a bit.

After the lot of tests of performance i figure out that match method running on huge string becomes very slow, and sometimes cause browser (not responding) state.

 e.src.match(/.*?data:image.*?;base64/g) 

My suggestion is to substring the e.src firstly so match operation could run much more quicker then before.

var img_src = e.src.substring(0, 30);
if (img_src.match(/.*?data:image.*?;base64/g)) {
  imgParent = e.parentNode;
  imgParent.removeChild(e);
}

Hope it will be useful for somebody.



arvind wrote:

Inside the _addEvents function section of tiny_mce.js modify/add the following piece of code:

if (tinymce.isGecko) {
    Event.add(t.getDoc(), 'DOMNodeInserted', function(e) {
        var v;
        e = e.target;

        if (e.nodeName === "IMG"){ 
            if (e.src.match(/.*?data:image.*?;base64/g)) {
                imgParent = e.parentNode;
                imgParent.removeChild(e);
            }
        }                    

        if (e.nodeType === 1 && e.nodeName === 'IMG' && (v = e.getAttribute('mce_src')))
            e.src = t.documentBaseURI.toAbsolute(v);
    });
}

This will delete the image tag as soon as it's placed inside the editor.

Last edited by VS (2013-07-18 11:30:58)

24

Re: Disable drag/drop facility

This works:

add the following css rule to your images in your css, havent tested IE but ff and chrome both respect and enforce it

pointer-events:none;

Last edited by jipd (2014-03-27 03:58:18)