disable drag and drop image quill js

Question

How to disable drag and drop of quill js (angular NG QUILL) without disable the formats image?

look screen:

Answer 1

Had the same issue using "react-quill-with-table" due to a module called "uploader" enabled by default.

Fixed by overriding it:

class ByeByeUploader {}

Quill.register({
  "modules/uploader": ByeByeUploader
}, true);

Alternatively, it seems to provide a "handler" option which can be overridden to do nothing:

<ReactQuill
  modules={{
    uploader: {
      handler: ()=>{}
    }
  }}
...

Finally, if your issue is not coming from this module I suggest you set a DOM breakpoint on the quill container DIV for subtree modifications to get a better understanding

Answer 2

One way of doing this is by wrapping the editor in a div and preventing the default nature of drop event.

Here's an example...

<div onDrop={(e) => e.preventDefault()}>
  <ReactQuill {...props}/> //Your editor component
</div>

Answer 3

I had the same issue with Quill editor but I fixed the issue. Please see my code:

<div id="quill-editor" (dragover)="false"></div>

So if you put (dragover)="false" in your editor div, the problem will be solved.

Answer 4

Along with (dragover)="false" you can also add below code inside onEditorCreated(quill) event handler to disable copy-paste of images.

quill.clipboard.addMatcher('IMG', (node, delta) => {
       const Delta = Quill.import('delta');
       return new Delta().insert('');
})
quill.clipboard.addMatcher('PICTURE', (node, delta) => {
        const Delta = Quill.import('delta');
        return new Delta().insert('');
})

Sharing links to related threads,

https://github.com/quilljs/quill/issues/1108

Remove colors when pasting on ngx quill field

Answer 5

Disable default bahaviour of image using following html, javascript

$('img').on('dragstart', function(event) { event.preventDefault(); });

Answer 6

This is a browser behavior. Quill does nothing with this.

// 此处用于禁用拖拽事件
window.addEventListener('dragover', function(e) {
  e = e || event
  e.preventDefault()
}, false)
window.addEventListener('drop', function(e) {
  e = e || event
  e.preventDefault()
}, false)