鹅毛笔工具栏多个图像选择

Question

我只能使用工具栏图像选择按钮选择一张图像。 使用图像放置模块，我可以一次放置许多图像，但想知道有什么方法可以使用工具栏图像选择按钮在单选中选择多个图像（使用图像处理程序..？）谢谢

Answer 1

正在寻找有关此问题的答案，但没有找到任何直接的答案，因此请考虑我使用 quill API 文档中的

addHandler

和

insertEmbed

方法的工作解决方案。阅读内联评论以了解更多详细信息。此外，通过这种方法，您可以创建上传图像逻辑或任何其他您想要的中间件处理。

//
// Init Quill
const quill = new Quill('#quill', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['image']
    ]
  }
});

//
// Add handler for Image
const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', function() {
  //
  // Most of this code taken from
  // Quill library iself, from image
  // isertion part
  //
  const _this3 = this;
  let fileInput = this.container.querySelector('input.ql-image[type=file]');
  if (fileInput == null) {
    fileInput = document.createElement('input');
    fileInput.setAttribute('type', 'file');
    //
    // Adding line below with multiple
    // to allow selecting multiple images
    fileInput.setAttribute('multiple', 'multiple');
    //
    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
    fileInput.classList.add('ql-image');
    fileInput.addEventListener('change', function () {
      if (fileInput.files != null && fileInput.files[0] != null) {
        //
        // Adding loop to process each
        // selected image
        for(let i = 0; i < fileInput.files.length; i++) {
          const reader = new FileReader();
          reader.onload = function (e) {
            const range = _this3.quill.getSelection(true);
            //
            // After getting base64 we need
            // insertEmbed method to paste
            // our data as image.
            //
            // TIP: for those who was searching
            // the way to upload images instead of
            // inserting base64 - here at this point
            // you can achive this by your own logic
            // and pasting resulting link instead of
            // base64 (e.target.result)
            quill.insertEmbed(range.index, 'image', e.target.result);
            //
            // After pasting image, put cursor
            // straight after insertion with
            // range.index + 1
            quill.setSelection(range.index + 1, 'image', Quill.sources.SILENT);
            fileInput.value = "";
          };
          reader.readAsDataURL(fileInput.files[i]);
        }
      }
    });
    this.container.appendChild(fileInput);
  }
  fileInput.click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<div id="quill"></div>

Answer 2

let toolbarOptions = {
  container: [
    ['image', 'link'],
    ['clean'],
    ['bold', 'underline', 'strike'],
    [{'color': []}, {'size':[]}],
    [{'align': []}],
  ],
  handlers: {
    image: handleQuillImage,
  }
};
function getFileDataUrl (file) {
  return new Promise((resolve) => {
    const fileReader = new FileReader();
    fileReader.onload = (e) => resolve(fileReader.result);
    fileReader.readAsDataURL(file);
  });
}
function handleQuillImage(value) {
  const quillInstance = this;
  let fileInput = quillInstance.container.querySelector('input.ql-image[type=file]');
  if (fileInput == null) {
    fileInput = document.createElement('input');
    fileInput.setAttribute('type', 'file');
    fileInput.setAttribute('multiple', 'multiple');
    fileInput.setAttribute('accept', 'image/jpg, image/jpeg, image/png, image/gif');
    fileInput.classList.add('ql-image');

    fileInput.onchange = async function() {
      if (fileInput.files == null) return;
      if (fileInput.files[0] == null) return;
      let files =  [...fileInput.files];
      let fileResults = await Promise.all(files.map(file => getFileDataUrl(file)));

      fileResults.forEach(fileResult => {
        const range = quillInstance.quill.getSelection(true);
        quillInstance.quill.insertEmbed(range.index, 'image', fileResult);
        quillInstance.quill.setSelection(range.index+1, 'image', Quill.sources.SILENT);
      });
    }
    quillInstance.container.appendChild(fileInput);
  }
  fileInput.click();
  quillInstance.quill.focus();
}

let quillOptions = {
  theme: 'snow',
  placeholder: '내용을 입력해 주세요.',
  modules: {
    toolbar: toolbarOptions,
  },
}

let quill = new Quill('#editor', quillOptions);

谢谢！