在 ngx-quill 编辑器中附加多个图像

Question

我在我的 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();
          }     
        },
      },

我不确定我错过了什么。如果有人可以指导我，那就太好了。

Answer 1

这是我的配置，它正在工作，让我们尝试一下^^

handlers: {
            image: function imageHandler() {
              const input = document.createElement('input');
              input.setAttribute('type', 'file');
              input.setAttribute('accept', 'image/*');
              input.setAttribute('multiple', '');
              input.click();

              input.onchange = () => {
                const files = input.files;
                if (files) {
                  [].forEach.call(files, (file: File) => {
                    const reader = new FileReader();
                    reader.onload = () => {
                      const range = this['quill'].getSelection(true);
                      this['quill'].insertEmbed(
                        range.index,
                        'image',
                        reader?.result?.toString()
                      );
                    };
                    reader.readAsDataURL(file);
                  });
                }
              };
            },
          }