How to disable pasting image/video in ngx-quill in agular 5

Question

I am using quill editor, its working fine but the problem is that when pasting text which include images, its also pasted it in textarea which i dont want. how could I disable it? I tried format option given on the below link but no use. https://github.com/quilljs/quill/issues/1108 following is the html

<quill-editor #textArea [placeholder]="attribute.name"
            [formControl]="specsForm.controls[attribute.id].controls.value" [required]="attribute.isRequired"
            [readOnly]="isProductAttributeDefected || attribute.isReadOnly " [disableControl]="isProductAttributeDefected || attribute.isReadOnly"
            [maxLength]="attribute.maxLength" [modules]="editorConfig" (onEditorCreated)="editorInit($event, attribute.id, specsForm, false)">

and this is my config in ts

  public editorConfig: {
modules: {
    toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['code-block']
    ]
},
placeholder: 'Compose an epic...',
    theme: 'snow',  // or 'bubble'
  formats: [
      'background',
      'bold',
      'color',
      'font',
      'code',
      'italic',
      'link',
      'size',
      'strike',
      'script',
      'underline',
      'blockquote',
      'header',
      'indent',
      'list',
      'align',
      'direction',
      'code-block',
      'formula'
      // 'image'
      // 'video'
  ]

};

I tried version 5.2.0 and 6.2.0 both

any idea? Note: there is a hack mentioned on the given link but I would like to have a proper solution

Answer 1

Sorry for this late answer, but to avoid pasting of image in to quill editor, you can add an image handler that don't mutate the editor. But for the handler to be called on paste of image , you need quill-image-drop-and-paste module.

import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;
import QuillImageDropAndPaste from 'quill-image-drop-and-paste'
Quill.register('modules/imageDropAndPaste', QuillImageDropAndPaste);

Now in your editor config, add the handler reference

 editor_modules = {
   .....
imageDropAndPaste: {
      handler: this.imageHandler1
    }
............
}

Now in the handler

imageHandler1 = (imageDataUrl, type, imageData)=> {
   console.log('Eating your pasted image.')
}