How would I create a post mechanism on my website like stackoverflow with bold text and italic text and other customization like that? Right now my php database has this table for posts :
CREATE TABLE `community_posts` (
community_contents_id int AUTO_INCREMENT PRIMARY KEY,
user_id int,
community_id int,
unique_id int,
date_time DATETIME,
numberoflikes int,
numberofdislikes int,
title varchar(50),
post varchar(3000),
pic_or_vid varchar(1000),
filetype varchar(40),
FOREIGN KEY (community_id)
REFERENCES communities(community_id)
ON DELETE cascade
)
I have stuff for files and text, but I don’t know how I would store the bold/normal text.
And how would I take in those inputs? For the moment I have this code to collect the information from the frontend and then put it in the database :
html code :
<div class="post-community-title">
<h1 class="post-form-title">Post in this community:</h1>
<div class="white-form-div">
<div class="post-form">
<input class="post-title" id="title" type="text" name="post-title" placeholder="Title">
<div class="post-content-display">
<textarea class="post-content" id="post" type="text" name="post-content" placeholder="Create a post"></textarea>
<label class="label" for="file" class="file_upload_btn"><i class="fa fa-paperclip" aria-hidden="true"></i></label>
</div>
<input class="post-file" id="file" type="file" onclick="check()" name="post-file">
<input class="post-button" type="button" name="Post" onclick="postIncoming()" value="Post">
</div>
</div>
</div>
my javascript code :
function postIncoming() {
title = document.getElementById('title').value;
post = document.getElementById('post').value;
filePath = document.getElementById("file").value;
console.log(title);
console.log(post);
console.log(filePath);
community_id = document.getElementById('community_id').innerHTML;
if (title == "") {
alert("You must add a title to your post!");
}
var allowedExtensions =
/(.jpg|.jpeg|.png|.mp4|.mov|.JPG|.JPEG|.PNG|.MP4|.MOV)$/i;
if (post.length > 4000) {
alert("Sorry, this is too long. Your post has to be less than 4000 characters long!");
} else if (title.length > 50) {
alert("Sorry, this is too long. Your title has to be less than 50 characters long!");
} else {
if (title != "" && post != "" && filePath == "") {
community_id = document.getElementById('community_id').innerHTML;
var fd = new FormData();
fd.append("sending", true);
fd.append("title", title);
fd.append("post", post);
fd.append("community_id", community_id);
fd.append("textPost", true);
var xhr = new XMLHttpRequest();
community_id = document.getElementById('community_id').innerHTML;
var fullurl = '../backend/communitybackend.php';
xhr.open('POST', fullurl, true);
xhr.onload = function() {
if (this.status == 200) {
console.log(this.responseText);
findposts();
document.getElementById('title').value = "";
document.getElementById('post').value = "";
document.getElementById('file').value = "";
if (this.responseText == "") {
alert("Sorry, you must wait 15 mins before posting again!");
} else if (this.responseText == "Sorry, you must wait 15 mins before posting again!") {
alert(this.responseText);
} else if (this.responseText == "You must join the community if want to post in it!") {
alert(this.responseText);
}
};
};
xhr.send(fd);
} else if (title != "" && post != "" && filePath != "") {
community_id = document.getElementById('community_id').innerHTML;
x = document.getElementById('file');
file = x.files[0];
fsize = file.size;
filePath = document.getElementById("file").value;
var filesize = Math.round((fsize/1000));
if (filesize > 20000) {
alert("This file is too big, it must be 20MB or less to be posted");
} else if (!allowedExtensions.exec(filePath)) {
alert("This file is of the wrong exetension, please send a .jpg, .jpeg, .png, .mp4, .mov");
} else {
var fd = new FormData();
fd.append("sending", true);
fd.append("title", title);
fd.append("post", post);
fd.append("file", file);
fd.append("community_id", community_id);
fd.append("textFilePost", true);
var xhr = new XMLHttpRequest();
community_id = document.getElementById('community_id').innerHTML;
var fullurl = '../backend/communitybackend.php';
xhr.open('POST', fullurl, true);
xhr.onload = function() {
if (this.status == 200) {
console.log(this.responseText);
findposts();
document.getElementById('title').value = "";
document.getElementById('post').value = "";
document.getElementById('file').value = "";
if (this.responseText == "") {
alert("Sorry, you must wait 15 mins before posting again!");
} else if (this.responseText == "Sorry, you must wait 15 mins before posting again!") {
alert(this.responseText);
} else if (this.responseText == "You must join the community if want to post in it!") {
alert(this.responseText);
}
};
};
xhr.send(fd);
}
} else if (title != "" && post == "" && filePath != "") {
community_id = document.getElementById('community_id').innerHTML;
x = document.getElementById('file');
file = x.files[0];
fsize = file.size;
filePath = document.getElementById("file").value;
var filesize = Math.round((fsize/1000));
if (filesize > 20000) {
alert("This file is too big, it must be 20MB or less to be posted");
} else if (!allowedExtensions.exec(filePath)) {
alert("This file is of the wrong exetension, please send a .jpg, .jpeg, .png, .mp4, .mov");
} else {
var fd = new FormData();
fd.append("sending", true);
fd.append("title", title);
fd.append("post", post);
fd.append("file", file);
fd.append("community_id", community_id);
fd.append("filePost", true);
var xhr = new XMLHttpRequest();
community_id = document.getElementById('community_id').innerHTML;
var fullurl = '../backend/communitybackend.php';
xhr.open('POST', fullurl, true);
xhr.onload = function() {
if (this.status == 200) {
console.log(this.responseText);
findposts();
document.getElementById('title').value = "";
document.getElementById('post').value = "";
document.getElementById('file').value = "";
if (this.responseText == "") {
alert("Sorry, you must wait 15 mins before posting again!");
} else if (this.responseText == "Sorry, you must wait 15 mins before posting again!") {
alert(this.responseText);
} else if (this.responseText == "You must join the community if want to post in it!") {
alert(this.responseText);
}
};
};
xhr.send(fd);
}
}
}
}
Then I just have some basic php sql query to insert everything. I don’t know how to do this, and I also don’t know how to do the post images like stackoverflow does it. Do they create another row with a list of all the image descriptions? Thanks for answering! I know this is a long question!
Advertisement
Answer
The markup language used to set the formatting here on SO is called Markdown.
There is a variety of different JS libraries that can convert markdown text into HTML, which then can be inserted into your desired elements.
Here is an example using markedjs.
let markdownText = "# This is a markdown Textn## It isn- easy to formatn- even with JSnn__This example uses [markedjs](https://github.com/markedjs/marked)__"
let htmlText = marked(markdownText); // Here goes the lib to work
document.getElementById('Markdown').innerHTML = htmlText;<head> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> </head> <body> <div id="Markdown"> </div> </body>