Angular项目中ngx-quill编辑器多图批量上传配置求助

我在Angular项目中使用ngx-quill编辑器，默认仅支持单次选择上传一张图片，希望配置实现批量上传多张图片。目前尝试了以下代码但未生效，寻求指导：

quillConfig = {
    modules: {
      toolbar: {
        container: [
          [{ header: [1, 2, false] }],
          [{ font: [] }],
          [{ header: 1 }, { header: 2 }],
          [{ list: 'ordered' }, { list: 'bullet' }],
          ['bold', 'italic', 'underline'],
          ['image', 'code-block', 'attachment'],
        ],
        handlers:{
          image: () => {
            let fileInput = document.createElement('input');
            fileInput.setAttribute('type', 'file');
            fileInput.setAttribute('multiple', 'multiple');
            fileInput.setAttribute('accept', 'image/*');
          
            fileInput.addEventListener('change', () => {
              const files = fileInput.files;
          
              if (files !== null) {
                for (let i = 0; i < files.length; i++) {
                  const reader = new FileReader();
                  const quill = new Quill('#editor'); 
          
                  reader.onload = (event) => {
                    const range = quill.getSelection(true);
                    quill.updateContents(new Delta()
                      .retain(range.index)
                      .delete(range.length)
                      .insert({ image: event.target!.result })
                    );
                  }
          
                  reader.readAsDataURL(files[i]);
                }
          
                fileInput.value = '';
              }
            });
            fileInput.click();
          }     
        },
      },

问题分析 #

你的代码存在三个核心问题导致批量上传失效：

• 每次循环都新建Quill实例new Quill('#editor')，这会创建一个全新的编辑器实例，而非操作当前页面正在使用的编辑器，因此图片无法插入到正确位置。
• FileReader是异步操作，循环中的选区(range)会因异步执行顺序混乱，最终可能只有最后一张图片能插入或位置错误。
• 未确保Delta正确导入，可能导致new Delta()执行报错。

修正后的实现代码 #

先通过ViewChild获取组件内的ngx-quill实例，再调整图片插入逻辑：

import { Component, ViewChild } from '@angular/core';
import { QuillEditorComponent } from 'ngx-quill';
import Delta from 'quill-delta';

@Component({
  // 你的组件元数据（如selector、templateUrl等）
})
export class YourEditorComponent {
  @ViewChild(QuillEditorComponent) quillEditor!: QuillEditorComponent;

  quillConfig = {
    modules: {
      toolbar: {
        container: [
          [{ header: [1, 2, false] }],
          [{ font: [] }],
          [{ header: 1 }, { header: 2 }],
          [{ list: 'ordered' }, { list: 'bullet' }],
          ['bold', 'italic', 'underline'],
          ['image', 'code-block', 'attachment'],
        ],
        handlers:{
          image: () => {
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.multiple = true;
            fileInput.accept = 'image/*';

            fileInput.addEventListener('change', () => {
              const files = fileInput.files;
              if (!files || files.length === 0) return;

              const quillInstance = this.quillEditor.quillInstance;
              let currentRange = quillInstance.getSelection(true);

              Array.from(files).forEach(file => {
                const reader = new FileReader();

                reader.onload = (event) => {
                  // 确保选区有效
                  if (!currentRange) currentRange = quillInstance.getSelection(true);
                  // 插入图片并换行
                  quillInstance.updateContents(
                    new Delta()
                      .retain(currentRange.index)
                      .insert({ image: event.target?.result })
                      .insert('\n')
                  );
                  // 更新选区到图片后方，避免后续图片覆盖
                  currentRange.index += 2;
                  quillInstance.setSelection(currentRange);
                };

                reader.readAsDataURL(file);
              });

              fileInput.value = '';
            });

            fileInput.click();
          }     
        },
      },
    },
    theme: 'snow'
  };
}

额外注意事项 #

1. 安装依赖：确保已安装quill-delta，执行命令：

npm install quill-delta

2. 模板绑定：在组件模板中正确绑定配置：

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

3. 响应式表单适配：如果使用响应式表单，替换ngModel为formControlName即可。

内容的提问来源于stack exchange，提问作者Trushil Patel