如何使用QuillJs和body-parser提交表单？

我是Nodejs的新手（通常是编码）。 我正在尝试构build一个小型的内容pipe理系统。 我希望我的潜在最终用户能够通过单击button将post提交到我的博客之前，对其内容进行样式设置（粗体，斜体，超级链接等）。 这种types的工具栏，我看到在Stackoverflow，因为我input这个

这是我阅读奎尔的指南后到目前为止：

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>

app.js文件 

 var app = require('express')(), mongoose = require('mongoose'), Blog = require('./model/blog'), bodyParser = require('body-parser'); mongoose.connect("mongodb://localhost/quill_demo", {useMongoClient:true}); app.set('view engine','ejs'); //EJS WILL BE THE DEFAULT FILE THAT DISPLAYS THE FRONT-END DATA app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended:true})); // retrieve text from submitted forms from the EJS files. //Add new blog to the database app.post('/blog', function(req, res){ var myPost = { title:req.body.title, body: req.body.body }; Blog.create(myPost, function(err, newBlog){ if(err){ console.log(err); } else { console.log("New Blog has been added"); newBlog.save(function(err, savedBlog){ if(err){ console.log(err); }else { console.log(savedBlog); res.redirect('/blog'); } }); } }); });

点击提交后我检查数据库。 “标题”字段工作正常。 但是在“身体”领域没有增加任何东西。

所以，看起来我缺less了几件。 我将不胜感激任何帮助。 我不介意如果有人简单地在我的代码中添加缺less的部分，我会在以后的步骤中学习。

PS我没有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>
Interesting Posts