How to display text coming from mongodb (Mongoose) with line breaks correctly?

Asked

Viewed 60 times

-1

Good afternoon.
I’m a beginner and am implementing a blog using Nodejs + Express + Mongodb (Mongoose).
I realized that when I create a new post, the same one, when viewed, does not show line breaks (Enter) between paragraphs.

From what I saw, when submitting the post, this is stored correctly in the database. I mean, with line break markings. I’ve researched some possible solutions, but nothing I’ve done has worked.

Here is the form code where the post is created:

create edge.

    <div class="container">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <form action="/posts/store" method="POST" enctype="multipart/form-data">
                <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                        <label>Autor</label>
                        <input type="text" name="autor" placeholder="Autor" class="form-control">
                    </div>
                </div>

                <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                        <label>Título</label>
                        <input type="text" name="titulo" placeholder="Título" class="form-control">
                    </div>
                </div>

                <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                        <label>Descrição</label>
                        <input type="text" name="descricao" placeholder="Descrição" class="form-control">
                    </div>
                </div>

                <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                        <label>Conteúdo</label>
                        <textarea name="conteudo" placeholder="Conteúdo..." cols="30" rows="10" class="form-control"></textarea>
                    </div> 
                </div>

                <div class="form-group mt-3">
                    <input type="file" name="imagem" class="form-control-file">
                </div>

                <div class="form-group my-4 text-center">
                    <button class="btn btn-primary">Criar Postagem</button>
                </div>
            </form>
        </div>
    </div>
</div>

Here, the JS to save the post:

storePost.js

const path = require('path')

const Post = require('../database/models/Post')

module.exports = (req, res) => {
    if (req.files) {
        const {
            imagem
        } = req.files
        imagem.mv(path.resolve(__dirname, '..', 'public/posts', imagem.name), (error) => {
            Post.create({
                ...req.body,
                imagem: `/posts/${imagem.name}`
            }, (error, post) => {
                res.redirect('/');
            });
        })    
    } else {   
        Post.create({
            ...req.body, imagem: null }, (error, post) => {
                res.redirect('/');
        });
    }
 }

Here, an example saved in the comic:

{
    "_id": {
        "$oid": "5f36ef7b216f01117858a830"
    },
    "createdAt": {
        "$date": "2020-08-14T19:28:14.105Z"
    },
    "autor": "Marcílio",
    "titulo": "Teste",
    "descricao": "Teste",
    "conteudo": "Linha 1 (enter)\r\nLinha 2 (enter)\r\nLinha 3 (enter)",
    "imagem": null,
    "__v": 0
}

How the post is displayed:

Exibição do Post

1 answer

0


After a lot of searching and trying to manipulate the files coming from the database (remembering that when the document was saved in the bd, it was with the marks r n referring to line break) I got what I wanted applying in the div where the document would appear from the bd the following: style="white-space: pre-wrap". Thank you.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.