Javascript 如何使用QuillJs和body解析器提交表单？

我对Nodejs（和编码，一般来说）是新手。我正在尝试构建一个小型内容管理系统。我希望我的潜在最终用户能够在点击一个按钮向我的博客提交文章之前，为他们的内容（粗体、斜体、超链接等）设置样式。当我输入这个时，我在Stackoverflow上看到的工具条类型

<style>
#editor {
  height: 300px;
}

</style>

<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

 <form action = '/blog' method = 'POST'>
  <!-- Create the editor container -->
  <input type = 'text' name = 'title' placeholder = 'title'>
  <label for="body">About me</label>
  <input name="body" type="hidden">
  <div id="editor">
     <p>I am at my wit's end. Stackoverflow is my last hope</p>
  </div>
    <button type="submit">Submit</button>

 </form>


<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });

  var form = document.querySelector('form');
  form.onsubmit = function() {
    console.log("hey")
    // Populate hidden form on submit
    var body = document.querySelector('input[name=body]');
    body.value = JSON.stringify(quill.getContents());

    console.log("Submitted", $(form).serialize(), $(form).serializeArray());

  };

</script> 

以下是我在阅读了奎尔的指南后得到的信息：

form.ejs

<style>
#editor {
  height: 300px;
}

</style>

<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

 <form action = '/blog' method = 'POST'>
  <!-- Create the editor container -->
  <input type = 'text' name = 'title' placeholder = 'title'>
  <label for="body">About me</label>
  <input name="body" type="hidden">
  <div id="editor">
     <p>I am at my wit's end. Stackoverflow is my last hope</p>
  </div>
    <button type="submit">Submit</button>

 </form>


<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });

  var form = document.querySelector('form');
  form.onsubmit = function() {
    console.log("hey")
    // Populate hidden form on submit
    var body = document.querySelector('input[name=body]');
    body.value = JSON.stringify(quill.getContents());

    console.log("Submitted", $(form).serialize(), $(form).serializeArray());

  };

</script> 

我在点击提交后检查数据库。“标题”字段工作正常。但是在“body”字段中没有添加任何内容

看来我少了几块。我将感谢任何帮助。如果有人只是简单地在我的代码中添加缺少的部分，我不会介意，稍后我将从他们的步骤中学习

---

另外，我没有CS学位。我自己学习。所以，尽量用外行的话来回答你的问题

没关系，我想出来了

我把剧本改成了这个，它帮了我的忙。提交表单时调用该函数

<script>
  var editor = new Quill('#editor', {
      modules: { toolbar: "#toolbar" },
      theme: 'snow'
  });


  function formatField(){
    var editor = document.querySelector(".ql-editor").contentEditable = false;
    var clipboard = document.querySelector(".ql-clipboard").contentEditable = false;
    var bar = document.querySelector("input[type=text]").type="hidden"
    var p = document.querySelector("#editor");
    var myInput = document.querySelector("input[name=about]");
    myInput.value = p.innerHTML;
  }


</script> 

变量编辑器=新羽毛笔（“#编辑器”{
模块：{toolbar:#toolbar}，
主题：“雪”
});
函数formatField（）{
var editor=document.querySelector（“.ql editor”）.contentEditable=false；
var clipboard=document.querySelector（“.ql clipboard”）.contentEditable=false；
var bar=document.querySelector（“输入[type=text]”）。type=“隐藏”
var p=document.querySelector（“编辑器”）；
var myInput=document.querySelector（“输入[name=about]”）；
myInput.value=p.innerHTML；
}

非常感谢，这帮助我了解了发生的事情。我在onsubmit函数中使用了一种更短的方法，我写了这行代码，其中laHidden是隐藏的输入

laHidden.value=document.querySelector（“.ql编辑器”）.innerHTML