如何创建粗体和斜体文本等.例如stackoverflow

Question

我该如何在我的网站上创建一个像stackoverflow这样的带有粗体文本和斜体文本以及其他类似定制的发布机制？现在，我的php数据库有下面的帖子表：

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
)

我有文件和文本的东西，但我不知道如何存储粗体/普通文本。

我将如何接受这些输入？目前，我有这样的代码来从前端收集信息，然后将其放入数据库：

html代码：

<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>

我的javascript代码：

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);
}
}
}

}

然后我只需要一些基本的php-sql查询来插入所有内容。我不知道如何做到这一点，我也不知道如何像stackoverflow那样发布图像。他们会创建另一行，列出所有图像描述吗？谢谢你的回答！我知道这是一个很长的问题！

Answer 1

用于在SO上设置此处格式的标记语言称为Markdown。

有各种不同的JS库可以将markdown文本转换为HTML，然后可以将其插入到所需的元素中。

下面是一个使用标记的例子。

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>