[英]How can I render html tags in an express and ejs blogging application?
I am working on a blogging application with Express , EJS and MongoDB.我正在使用Express 、 EJS和 MongoDB 开发博客应用程序。
In my posts.js
controller I have:在我的
posts.js
控制器中,我有:
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
});
}
});
};
The singlepost.ejs view has the code: singlepost.ejs 视图具有以下代码:
<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>
It works fine as long as the entry in the posts collection does not contain HTML tags:只要posts集合中的条目不包含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."}
But when it does contain HTML tags:但是当它确实包含 HTML 标签时:
{ "_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>"}
the singlepost
view renders HTML in the browser : singlepost
视图在浏览器中呈现 HTML:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
In AngularJS the problem would be easely solved with ng-bind-html
, but I'm not using AngularJS in this project.在 AngularJS 中,使用
ng-bind-html
可以轻松解决这个问题,但我没有在这个项目中使用 AngularJS。
So, how can I fix this bug in EJS ?那么,我该如何修复EJS 中的这个错误?
You use the following code:您使用以下代码:
Post.findById(id).then(post=> res. render('singlepost', {post:post})). catch (err=>console.log(err));
Then you log any post property然后你记录任何帖子属性
I have solved the problem by replacing <%= post.full_text %>
with <%- post.full_text %>
( =
with -
).我通过用
<%= post.full_text %>
<%- post.full_text %>
( =
with -
) 替换<%= post.full_text %>
解决了这个问题。
The singlepost
view now is like so: singlepost
视图现在是这样的:
<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>
<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.
但是通过直接渲染标签来做到这一点是不可能的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.