Je travaille sur une application de blog avec Express , EJS et MongoDB.
Dans mon contrôleur posts.js
j'ai:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
La vue singlepost.ejs a le code:
{ "_id" : ObjectId("5e317594fa749d9229bab271"), "title" : "Post One", "short_description" : "Dolor sit amet.", "full_text" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"}
Cela fonctionne bien tant que l'entrée dans la collection d'articles ne contient pas de balises HTML:
{ "_id" : ObjectId("5e3063dbfa749d9229bab26f"), "title" : "Post One", "short_description" : "Lorem ipsum dolor sit amet.", "full_text" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}
Mais quand cela le fait em> contiennent des balises HTML:
<header class="masthead" style="background-image: url('assets/images/home-bg.jpg')"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="site-heading"> <h1><%= post.title %></h1> <span class="subheading"><%= post.short_description %></span> </div> </div> </div> </div> </header> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <%= post.full_text %> </div> </div> </div>
la vue singlepost
rend le HTML dans le navigateur :
exports.getSinglePost = (req, res) => { let id = req.params.id; Post.findById(id, function(err, post){ if(err){ console.log('Error: ', err); } else { res.render('singlepost', { website_name: 'MEAN Blog', post: post }); } }); };
Dans AngularJS, le problème serait facilement résolu avec ng-bind-html
, mais je n'utilise pas AngularJS dans ce projet.
Alors, comment puis-je corriger ce bogue dans EJS?
3 Réponses :
<p><%- post._id %></p> I think you can do something like this instead of what you are currently doing. But doing it by directly rendering tags won't be possible.
Vous utilisez le code suivant:
Post.findById(id).then(post=> res. render('singlepost', {post:post})). catch (err=>console.log(err));
Ensuite, vous enregistrez toute propriété de publication
J'ai résolu le problème en remplaçant
par
( =
avec -
).
La vue singlepost
est maintenant comme ceci:
<header class="masthead" style="background-image: url('assets/images/home-bg.jpg')"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="site-heading"> <h1><%= post.title %></h1> <span class="subheading"><%= post.short_description %></span> </div> </div> </div> </div> </header> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <%- post.full_text %> </div> </div> </div>
vérifiez cette réponse stackoverflow.com/questions/51407713/ejs-rendering-html