Quill rich text editor: How to Attach a button for file input to toolbar and embed to the editor

Question

How can i attach a custom file input (multiple) to quill toolbar, read the file and pass it to the quill editor?

if i try to create and read the file or files, i just messed up everything.

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

JS File

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

I'm trying to send the Mail to a backend built with 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的包解决了这个问题，它在服务器中完成其余的工作