'node.js markdown blog : when edit blog'a article have blank space
the tutorial video: https://www.youtube.com/watch?v=1NrHkjlWVhM&t=2693s
github: https://github.com/godzillalogan/markdownblog
my blog: https://gentle-inlet-86339.herokuapp.com/
I have a blog in node.js and framework express.js, i use the way of the the tutorial video to install the markdown blog. but have a problem.
original the article in my blog
but when every time I edit the article
It always has blank space in front of every paragraph.
I don't know if it's my way of store the article is wrong or using HTML textarea has problem.
thank you for your help
edit articles in routes/modules/admin.js:
//edit article
router.put('/articles/:id', upload.single('image'), async (req, res)=>{
try{
const _id = req.params.id
const { title,description,markdown,category } = req.body
const { file } = req // 把檔案取出來
const article = await Article.findOne({ _id})
if (file){
// const filePath = await imgurFileHandler(file) // 把檔案傳到 file-helper 處理
imgur.setClientID(IMGUR_CLIENT_ID)
imgur.upload(file.path,async (err, img) =>{
// Article.update({...req.body, image: file ? img.data.link: article.image})
article.title = title
article.description = description
article.markdown = markdown
article.category = category
article.image = img.data.link
await article.save()
})
}else{
article.title = title
article.description = description
article.markdown = markdown
article.category = category
await article.save()
}
res.redirect('/admin/articles')
}catch(e){
console.log(e)
res.redirect(`/admin/articles`)
}
// const {title,description,markdown} = req.body //和new一樣才能將markdown轉成html
// Article.create({...req.body})
// res.redirect('/')
})
views/edit:
<div class="container">
<div class="row grid">
<div>
<nav class="userSidebar fixed mt-3">
<div class="buttonList mt-5">
<div class="navItem index d-flex mb-4">
<div class="icon d-flex align-items-center color-blue">
<i class="fas fa-home my-auto"></i>
</div>
<a href="/admin/articles" class="btn">
<span class="fs-5 fw-bolder color-blue">文章清單</span>
</a>
</div>
<div class="navItem userProfile d-flex mb-4">
<div class="icon d-flex align-items-center">
<i class="fas fa-users"></i>
</div>
<a href="/admin/users" class="btn">
<span class="fs-5 fw-bolder">使用者列表</span>
</a>
</div>
<div class="navItem userProfile d-flex mb-4">
<div class="icon d-flex align-items-center">
<i class="fas fa-users"></i>
</div>
<a href="/admin/categories" class="btn">
<span class="fs-5 fw-bolder">種類列表</span>
</a>
</div>
<a href="/admin/logout" class="btn">
<span class="fs-5 fw-bolder">登出</span>
</a>
</div>
</nav>
</div>
<div>
<h1 class="mb-4">Edit Article</h1>
<form action="/admin/articles/{{article._id}}?_method=PUT" method="POST" enctype="multipart/form-data">
{{>formFields}}
</form>
</div>
</div>
</div>
views/partials/formFields.hbs:
<div class="form-group mb-3">
<label for="title">Title</label>
<input require value="{{article.title}}" type="text" name="title" id="title" class="form-control">
</div>
<div class="form-row mb-3">
<label class="form-label" for="image">Image</label>
<input class="form-control" type="file" class="form-control-file" id="image" name="image">
</div>
<div class="form-group mb-3">
<label for="category">category</label>
<select name="category" id="category" class="form-control">
{{#each categories}}
<option value="{{this.categoryEnName}}"
{{#ifCond this.categoryName ../article.category}}
selected
{{/ifCond}}>
{{this.categoryName}}
</option>
{{/each}}
</select>
</div>
<div class="form-group mb-3">
<label for="title">Description</label>
<textarea name="description" id="description" class="form-control">{{article.description}}</textarea>
</div>
<div class="form-group">
<label for="markdown">Markdown</label>
<textarea required name="markdown" id="markdown" class="form-control" rows="15" cols="80">{{article.markdown}}</textarea>
</div>
<a href="/admin/articles" class="btn btn-secondary mt-3">Cancel</a>
<button type="submit" class="btn btn-primary mt-3">Save</button>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
