如何在角度 5 中禁用在 ngx-quill 中粘贴图像/视频答案

【问题标题】：How to disable pasting image/video in ngx-quill in agular 5如何在角度 5 中禁用在 ngx-quill 中粘贴图像/视频
【发布时间】：2020-08-28 11:01:14
【问题描述】：

我正在使用羽毛笔编辑器，它工作正常，但问题是当粘贴包含图像的文本时，它也将它粘贴到我不想要的 textarea 中。我怎么能禁用它？我尝试了以下链接中给出的格式选项，但没有用。 https://github.com/quilljs/quill/issues/1108 以下是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)">

这是我在 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'
  ]

};

我尝试了 5.2.0 和 6.2.0 版本

有什么想法吗？注意：给定链接上提到了一个 hack，但我希望有一个适当的解决方案

【问题讨论】：

标签： angular text-editor quill ngx-quill

【解决方案1】：

很抱歉这个迟到的答案，但为了避免将图像粘贴到鹅毛笔编辑器中，您可以添加一个不会改变编辑器的图像处理程序。但是要在粘贴图像时调用处理程序，您需要 quill-image-drop-and-paste 模块。

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

现在在您的编辑器配置中，添加处理程序引用

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

现在在处理程序中

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

【讨论】：