[SOLVED] Prevent drag and drop in SCEditor (MyBB) with Firefox

Prevent drag and drop in SCEditor (MyBB) with Firefox

I have a MyBB forum which includes by default SCEditor as WYSIWYG editor.

SCEditor is not designed for drag and drop, so with IE, Safari and Chrome, if you try to drag an image into the field, the entire page is replaced by the image (that's OK for me).

But with Firefox the image fits in the field, which suggests that the message will be displayed with it, but in the end the picture is translated as base64 witch is not compatible with bbcode. The image is not displayed and there is a big pile of code instead.

Being able to do a drag and drop that work would be nice but I don't want to store images in base64 so I would just like to prevent Firefox to drop pictures in this field. I don't need drag and drop at all so it could be completely disabled. Maybe with jquery ?

Sorry, I can't give access to the forum but you can see demo of SCEditor here : https://www.sceditor.com

Solution

If you don't allow drag and drop anywhere on the page (I'm assuming there isn't anywhere else you can drop files) you could add this JS to prevent it:

function preventDefault(e) { e.preventDefault() }

// Prevent drag drop on page
document.body.addEventListener('dragover', preventDefault);
document.body.addEventListener('drop', preventDefault);

// Prevent drag drop inside editor
if (window.MyBBEditor && MyBBEditor.getBody) {
    instance.getBody().addEventListener('dragover', preventDefault);
    instance.getBody().addEventListener('drop', preventDefault);
}

You'll need to make sure it's called after the editor has been created.