如何在Angular NG QUILL中禁用Quill JS拖放且保留图片格式？

嘿，这个需求我之前刚好折腾过，给你分享个靠谱的解决方案——核心思路是直接操作Quill原生实例来阻止拖放事件，同时不改动图片模块的配置：

步骤1：获取Quill原生实例 #

首先得在组件里拿到NG Quill封装的原生Quill对象，我们可以通过模板引用变量+ViewChild来实现：

模板代码： #

<quill-editor 
  #quillEditor 
  [(ngModel)]="editorContent" 
  [modules]="quillConfig"
></quill-editor>

组件代码： #

先导入必要的依赖：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { QuillEditorComponent } from 'ng-quill';

然后通过ViewChild获取编辑器实例：

@Component({
  // 你的组件元数据（选择器、模板路径等）
})
export class YourEditorComponent implements AfterViewInit {
  @ViewChild('quillEditor') quillEditor!: QuillEditorComponent;
  editorContent = '';
  
  // 确保工具栏保留图片按钮
  quillConfig = {
    toolbar: [
      ['bold', 'italic'],
      ['image'] // 这个一定要保留，才能继续使用图片插入功能
    ]
  };

  ngAfterViewInit(): void {
    this.disableDragAndDrop();
  }
}

步骤2：禁用拖放功能 #

在ngAfterViewInit钩子中，我们给Quill编辑器的根元素添加drop和dragover事件监听，直接阻止默认行为和事件传播，这样就能彻底禁用拖放：

private disableDragAndDrop(): void {
  const quillInstance = this.quillEditor.quillEditor;
  if (!quillInstance) return;

  // 阻止拖放落地的默认行为
  quillInstance.root.addEventListener('drop', (event: DragEvent) => {
    event.preventDefault();
    event.stopPropagation();
  });

  // 阻止拖放悬浮时的默认提示行为
  quillInstance.root.addEventListener('dragover', (event: DragEvent) => {
    event.preventDefault();
    event.stopPropagation();
  });
}

方案说明 #

• 我们只是拦截了拖放相关的浏览器事件，并没有修改Quill的图片模块配置，所以工具栏的图片插入按钮依然能正常唤起文件选择器插入图片；
• 直接操作原生Quill实例，避开了NG Quill封装层的限制，不需要额外修改组件源码，兼容性也更好。

测试一下：现在拖放文本或图片到编辑器里都会被拦截，但点击工具栏的图片按钮，依然能正常插入图片，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Ke Vin