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

我是Nodejs（和编码，一般）的新手。我正在尝试构建一个小型内容管理系统。我希望我的潜在最终用户能够在点击按钮向博客提交帖子之前对其内容进行样式设置（粗体，斜体，超链接等）。那种类型的工具栏，我就＃1看到，因为我打字这个如何使用QuillJs和body-parser提交表单？

这是我读奎尔的指南后走到这一步：

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'); 
       } 

      }); 
     } 
    }); 

});

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

因此，它看起来像我缺少几件。我将不胜感激任何帮助。我不介意如果有人在我的代码中简单地添加缺少的部分，我将在稍后学习他们的步骤。

P.S.我没有CS学位。学习我自己。所以，尽可能地以外行人的话来说，尽可能地保持你的反应

来源

2017-10-20 Slyknight

没关系，我想通了！

我改变了脚本到这个，它为我做了诡计。该功能在提交表格时调用

<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>

来源

2017-10-23 14:26:11 Slyknight

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

回答

相关问题