Quill 富文本編輯器：如何將文件輸入按鈕附加到工具欄並嵌入到編輯器

Question

如何將自定義文件輸入（多個）附加到 quill 工具欄，讀取文件並將其傳遞給 quill 編輯器？

如果我嘗試創建和讀取一個或多個文件，我只會搞砸一切。

<div class="w-md"> /* my own style */
   <div id="toolbar"></div>
   <div id="editor"></div>
</div>

JS文件

let quill = new Quill('#editor', {
  modules: {
    toolbar: options,
  },
  theme: 'snow',
});

我正在嘗試將郵件發送到使用 nodejs 構建的后端

// getIds function is a custom function i created myself to get Ids

const sendMail = () => {
  const email = getIds('email').value;
  const subject = getIds('subject').value;
  const myBtn = getIds('btn');

  // Get the file or files, read the files and pass it to content's id

  const htmlFormat = quill.root.innerHTML;
  const content = (getIds('content').value = htmlFormat);
  const data = {
      email,
      subject,
      content,
 };

     myBtn.disabled = true;

     axios
      .post('/send', data, {
       headers: {
          'Content-Type': 'application/json',
        },
      })
      .then((res) => {
          myBtn.disabled = false;
          form.reset();
          quill.setContents([{ insert: '\n' }]);
          M.toast({ html: 'Email Sent!', classes: '' });
          console.log(res);
      })
   .catch((err) => {
      myBtn.disabled = false;
      M.toast({ html: `Error: ${err.message}` });
       console.log(err);
    });
 };

 form.addEventListener('submit', (e) => {
   e.preventDefault();
   sendMail();
});

Answer 1

我通過在 NPM 中使用一個名為multer的包解決了這個問題，它在服務器中完成其余的工作