Add html to mongodb

Question

I'm making a blog website and I want to save the blog posts in mongodb but I want the posts should be able to have anchor tags and some styles, how do I do it?

Answer 1

Don't save html tags, if you want to add a simple blog just add the information like title, content, url for images, etc, for example:

/*create and save a little blog*/

const myBlog={
title:"Main title",
articles:[
{
title:"article title",
content:"some content"
}
]
}

db.blogs.insertOne(myBlog);

/*getting and print blog*/

const blogFromMDB=db.blogs.find({title:"Main title"})

//the operation correspond to the following sql statement

//SELECT * FROM blogs WHERE title="Main title"

//then you can do the following

function printBlog( blogJSON ){
const {title, articles} = blogJSON;

const blog= document.createElement("main");

blog.innerHTML=`<h1 class="title">${title}</h1>`;

document.body.appendChild(blog);

}

printBlog( BlogFromMDB )

//it will be display "Main title", you can add a for loop to append articles. It's just a little example you can also use react js to make it easier

Answer 2

Moshie Seidenfeld I don't have much experience saving html in mdb, but here's a solutions that I thought:

steps:

1-save the html document as a string in mdb.

2.get the HTML string from DB.

3.parse the HTML string:

const parser =new DOMParser();

const htmlDoc = parser.parseFromString(textHTML, "text/html");

4. Append the HTML document:

document.write(htmlDoc);

Answer 3

<%- include("partials/header"); -%>

<h1>Compose</h1>
<p>remember to add spaces after all TEXT inputs</p>
<form class="" action="/compose" method="post">
<div class="form-group">
<label >Topic</label>
<input class="form-control" type="text" name="postTopic" required>
<label>Title</label>
<input class="form-control" type="text" name="postTitle" autocomplete="off" required>
<label >Img Url</label>
<input class="form-control" type="text" name="postImg" autocomplete="off">
<!-- 1st -->
<label>Content1</label>
<textarea class="form-control" name="postBody1" rows="5" cols="30"></textarea>
<label >Link Url1</label>
<input class="form-control" type="text" name="postLink1" autocomplete="off">
<label >Link to1</label>
<input class="form-control" type="text" name="postLinkTo1" autocomplete="off">

<!-- another -->
<label>Content</label>
<textarea class="form-control" name="postBody2" rows="5" cols="30"></textarea>
<label >Link Url2</label>
<input class="form-control" type="text" name="postLink2" autocomplete="off">
<label >Link to2</label>
<input class="form-control" type="text" name="postLinkTo2" autocomplete="off">

<!-- another -->
<label>Content3</label>
<textarea class="form-control" name="postBody3" rows="5" cols="30"></textarea>
<label >Link Url3</label>
<input class="form-control" type="text" name="postLink3" autocomplete="off">
<label >Link to3</label>
<input class="form-control" type="text" name="postLinkTo3" autocomplete="off">

<!-- another -->
<label>Content4</label>
<textarea class="form-control" name="postBody4" rows="5" cols="30"></textarea>
<label >Link Url4</label>
<input class="form-control" type="text" name="postLink4" autocomplete="off">
<label >Link to4</label>

Answer 4

like this?