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

taor4pac  于 12个月前  发布在  Angular
关注(0)|答案(1)|浏览(131)

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

字符串
我不知道我错过了什么。如果有人能在这里指导我就太好了。

2w3rbyxf

2w3rbyxf1#

这是我的配置,它的工作,让我们试试这个^^

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);
                  });
                }
              };
            },
          }

字符串

相关问题