How can I create bold and italic text etc… Like stackoverflow?

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!

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>