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 的包解决了这个问题，它在服务器中完成了剩下的工作

Quill 富文本编辑器：如何将文件输入按钮附加到工具栏并嵌入到编辑器中

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

javascript

node.js

quill