如何使用 QuillJs 和 body-parser 提交表单?
How to submit forms with QuillJs and body-parser?
我是 Nodejs 的新手(一般来说是编码)。我正在尝试构建一个小型内容管理系统。我希望我的潜在最终用户能够在单击按钮将 post 提交到我的博客之前设置其内容的样式(粗体、斜体、超 link 等...)。有点像我在 Whosebug 上看到的工具栏,因为我正在输入这个
这是我在阅读 Quill 的指南后得到的结果:
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. Whosebug 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');
}
});
}
});
});
点击提交后我检查了数据库。 "title" 字段工作正常。但是 "body" 字段中没有添加任何内容。
看来我少了一些东西。我将不胜感激任何帮助。我不介意有人简单地在我的代码中添加缺失的部分,我稍后会从他们的步骤中学习。
P.S。我没有 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>
我是 Nodejs 的新手(一般来说是编码)。我正在尝试构建一个小型内容管理系统。我希望我的潜在最终用户能够在单击按钮将 post 提交到我的博客之前设置其内容的样式(粗体、斜体、超 link 等...)。有点像我在 Whosebug 上看到的工具栏,因为我正在输入这个
这是我在阅读 Quill 的指南后得到的结果:
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. Whosebug 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');
}
});
}
});
});
点击提交后我检查了数据库。 "title" 字段工作正常。但是 "body" 字段中没有添加任何内容。
看来我少了一些东西。我将不胜感激任何帮助。我不介意有人简单地在我的代码中添加缺失的部分,我稍后会从他们的步骤中学习。
P.S。我没有 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>