鹅毛笔富文本编辑器:如何将用于文件输入的按钮附加到工具栏并嵌入到编辑器

时间:2020-10-04 20:13:56

标签: javascript node.js 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();
});

1 个答案:

答案 0 :(得分:0)

我通过在NPM中使用一个名为 multer 的程序包解决了该问题,其余的工作在服务器中完成