Comment soumettre des formulaires avec QuillJs et body-parser?

Question

Je suis nouveau à Nodejs (et le codage, en général). J'essaie de construire un petit système de gestion de contenu. Je veux que mes utilisateurs finaux potentiels puissent styliser leur contenu (gras, italique, hyperlien, etc ...) avant de soumettre un article sur mon blog en cliquant sur un bouton. Type de genre la barre d'outils que je vois sur Stackoverflow que je tape ce

Voici ce que je suis arrivé à ce jour après avoir lu le guide de 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. 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 fichier

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

      }); 
     } 
    }); 

}); 

Je vérifie la base de données après avoir cliqué sur soumettre. Le champ "title" fonctionne bien. Mais rien n'est ajouté dans le champ "body". Donc, il me semble qu'il me manque quelques pièces. J'apprécierais toute aide. Cela ne me dérangerait pas si quelqu'un ajoutait simplement les parties manquantes dans mon code et j'apprendrais de leurs pas plus tard.

P.S. Je n'ai pas de diplôme en CS. Apprendre seul. Donc, gardez vos réponses en termes simples autant que possible

Answer 1

Nevermind, je l'ai compris!

J'ai changé le script pour cela et il a fait l'affaire pour moi. La fonction est appelée lorsque le formulaire est soumis

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