How to Add WYSIWYG Text Editor

Submitted by: 
Language: 
Visitors have accessed this post 656 times.

Getting Started

First, we need Bootstrap and the TinyMCE plugin that will provide our WYSIWYG editor. These files are included in the downloadable of this tutorial but if you want, you can download them using the links below.

For Bootstrap
For TinyMCE

You can visit the site of TinyMCE for additional info about the plugin and additional features as well.

Creating our Database

Next, we create our database that will contain our posts.

I've included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database.

You should be able to create a database named db.

Displaying our Posts Table

Next, we are going to display the posts in our posts table from our database.

Create a new file, name it as index.php and paste the codes below.

  1. <?php session_start(); ?>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>How to Add WYSIWYG Text Editor</title>
  7. <link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
  8. </head>
  9. <body>
  10. <div class="container">
  11. <h1 class="text-center" style="margin-top:30px">How to Add WYSIWYG Text Editor</h1>
  12. <hr>
  13. <div class="row justify-content-md-center">
  14. <div class="col-sm-8">
  15. <?php
  16. if(isset($_SESSION['error'])){
  17. echo "
  18. <div class='alert alert-danger text-center'>
  19. ".$_SESSION['error']."
  20. </div>
  21. ";
  22. unset($_SESSION['error']);
  23. }
  24.  
  25. if(isset($_SESSION['success'])){
  26. echo "
  27. <div class='alert alert-success text-center'>
  28. ".$_SESSION['success']."
  29. </div>
  30. ";
  31. unset($_SESSION['success']);
  32. }
  33.  
  34. ?>
  35. <table class="table table-bordered">
  36. <thead>
  37. <th>ID</th>
  38. <th>Title</th>
  39. <th><a href="add.php" class="btn btn-primary btn-sm">Add New</a></th>
  40. </thead>
  41. <tbody>
  42. <?php
  43. //connection
  44. $conn = new mysqli('localhost', 'root', '', 'db');
  45.  
  46. $sql = "SELECT * FROM posts";
  47. $query = $conn->query($sql);
  48.  
  49. while($row = $query->fetch_assoc()){
  50. echo "
  51. <tr>
  52. <td>".$row['id']."</td>
  53. <td>".$row['title']."</td>
  54. <td><a href='view.php?id=".$row['id']."' class='btn btn-secondary btn-sm'>View</a></td>
  55. </tr>
  56. ";
  57. }
  58. ?>
  59. </tbody>
  60. </table>
  61. </div>
  62. </div>
  63. </div>
  64.  
  65. </body>
  66. </html>

Creating our Post Form

Next, we create our post form where we integrate our text editor.

Create a new file, name it as add.php and paste the codes below.

  1. <?php session_start(); ?>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>How to Add WYSIWYG Text Editor</title>
  7. <link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
  8. </head>
  9. <body>
  10. <div class="container">
  11. <h1 class="text-center" style="margin-top:30px">How to Add WYSIWYG Text Editor</h1>
  12. <hr>
  13. <div class="row justify-content-md-center">
  14. <div class="col-sm-8">
  15. <?php
  16. if(isset($_SESSION['error'])){
  17. echo "
  18. <div class='alert alert-danger text-center'>
  19. ".$_SESSION['error']."
  20. </div>
  21. ";
  22. unset($_SESSION['error']);
  23. }
  24.  
  25. ?>
  26. <form method="POST" action="post.php">
  27. <div class="form-group">
  28. <input type="text" id="title" name="title" class="form-control" placeholder="input title">
  29. </div>
  30. <div class="form-group">
  31. <textarea id="content" name="content" class="form-control" rows="10"></textarea>
  32. </div>
  33. <button type="submit" class="btn btn-primary" name="submit">Submit</button> <a href="index.php" class="btn btn-dark">Back</a>
  34. </form>
  35. </div>
  36. </div>
  37. </div>
  38.  
  39. <script src="tinymce/js/tinymce/tinymce.min.js"></script>
  40. <script type="text/javascript">
  41. tinymce.init({
  42. selector: '#content'
  43. });
  44. </script>
  45. </body>
  46. </html>

Creating our Add Post Script

Next, we create the script that adds our post into our database.

Create a new file, name it as post.php and paste the codes below.

  1. <?php
  2.  
  3. if(isset($_POST['submit'])){
  4. //connection
  5. $conn = new mysqli('localhost', 'root', '', 'db');
  6.  
  7. //get post values
  8. $title = $_POST['title'];
  9. $content = $_POST['content'];
  10.  
  11. //insert post to database
  12. $sql = "INSERT INTO posts (title, post_text) VALUES ('$title', '$content')";
  13. if($conn->query($sql)){
  14. $_SESSION['success'] = 'Post added successfully';
  15. header('location: index.php');
  16. }
  17. else{
  18. $_SESSION['error'] = 'Cannot add post';
  19. header('location: add.php');
  20. }
  21.  
  22. }
  23. else{
  24. $_SESSION['error'] = 'Please fill up post form first';
  25. header('location: index.php');
  26. }
  27.  
  28.  
  29. ?>

Creating our View Post

Lastly, we create the page where we can view individual posts.

Create a new file, name it as view.php and paste the codes below.

  1. <?php
  2. //get the id
  3. $id = $_GET['id'];
  4.  
  5. //get the row with the id
  6. $conn = new mysqli('localhost', 'root', '', 'db');
  7. $sql = "SELECT * FROM posts WHERE id = '$id'";
  8. $query = $conn->query($sql);
  9. $row = $query->fetch_assoc();
  10. ?>
  11. <!DOCTYPE html>
  12. <html>
  13. <head>
  14. <meta charset="utf-8">
  15. <title>How to Add WYSIWYG Text Editor</title>
  16. <link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
  17. </head>
  18. <body>
  19. <div class="container">
  20. <h1 class="text-center" style="margin-top:30px">How to Add WYSIWYG Text Editor</h1>
  21. <hr>
  22. <div class="row justify-content-md-center">
  23. <div class="col-sm-12">
  24. <h4><b>TITLE</b>: <?php echo $row['title']; ?></h4>
  25. <?php echo $row['post_text']; ?>
  26. </div>
  27. </div>
  28. </div>
  29.  
  30. </body>
  31. </html>

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.