Dynamic TinyMCE WYSIWYG Editor with PHP, MySQL and AJAX
TinyMCE is a powerful and flexible rich text HTML WYSIWYG editor that can be embedded in web applications. It is a JavaScript library that helps you create HTML WYSIWYG editor.
In this tutorial, we will explain you how to load Dynamic content TinyMCE WYSIWYG Editor with PHP, MySQL and AJAX. This is a very simple example, you can just copy paste, and change according to your requirement.
Before started to implement the Dynamic TinyMCE WYSIWYG Editor with PHP, MySQL and AJAX, look files structure:
- dynamic-tinymce-editor-with-php-ajax
- assets
- css
- style.css
- tinymce
- tinymce.min.js
- custom.tinymce.js
- css
- templates
- header.php
- footer.php
- index.php
- action.php
- assets
Step 1: Create the database and Table
For this tutorial, you need a MySQL database with the following table:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
CREATE TABLE `events` ( `id` int(11) NOT NULL, `title` text NOT NULL, `location` text DEFAULT NULL, `content` text NOT NULL, `created_date` datetime NOT NULL DEFAULT current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=latin1; ALTER TABLE `events` ADD PRIMARY KEY (`id`); ALTER TABLE `events` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key'; |
Step 2: Include the TinyMCE script
|
1 |
<script src="assets/tinymce/tinymce.min.js" referrerpolicy="origin"></script> |
Step 3: Initialize TinyMCE as part of a web form
Initialize TinyMCE on any element (or elements) on the web page by passing an object containing a selector value to tinymce.init(). The selector value can be any valid CSS selector.
For example: To replace ‹textarea id=”event-content”› ‹/textarea› with a TinyMCE editor instance, pass the selector
'#event-content' to tinymce.init().|
1 2 3 4 5 6 |
<script> tinymce.init({ selector: '#event-content' }); </script> <textarea class="form-control" id="event-content" name="content"></textarea> |
Step 4: Database Connection class
Create a class file named DBConnection.php inside “class/” folder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php /** * @package DBConnection * * @author TechArise Team * * @email info@techarise.com * */ // Database Connection class DBConnection { private $_dbHostname = "localhost"; private $_dbName = "demo_DB"; private $_dbUsername = "root"; private $_dbPassword = ""; private $_con; public function __construct() { try { $this->_con = new PDO("mysql:host=$this->_dbHostname;dbname=$this->_dbName", $this->_dbUsername, $this->_dbPassword); $this->_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); } } // return Connection public function returnConnection() { return $this->_con; } } ?> |
Step 5: Create a class file
Create a class file named Event.php inside “class/” folder.
- The Event class handles the CRUD process.
__construct()– Loads the required class.create()– Insert recored in databaseupdate()– Update record in databasegetList()– Get record from databasedelete()– Delete record from database
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<?php /** * @package Event class * * @author TechArise Team * * @email info@techarise.com * */ // include connection class include("DBConnection.php"); // Event class Event { protected $db; private $_eventID; private $_title; private $_location; private $_content; public function setEventID($eventID) { $this->_eventID = $eventID; } public function setTitle($title) { $this->_title = $title; } public function setLocation($location) { $this->_location = $location; } public function setContent($content) { $this->_content = $content; } // __construct public function __construct() { $this->db = new DBConnection(); $this->db = $this->db->returnConnection(); } // create record in database public function create() { try { $sql = 'INSERT INTO events (title, location, content) VALUES (:title, :location, :content)'; $data = [ 'title' => $this->_title, 'location' => $this->_location, 'content' => $this->_content, ]; $stmt = $this->db->prepare($sql); $stmt->execute($data); $status = $this->db->lastInsertId(); return $status; } catch (Exception $err) { die("Oh noes! There's an error in the query! ".$err); } } // update record in database public function update() { try { $sql = "UPDATE events SET title=:title, location=:location, content=:content WHERE id=:event_id"; $data = [ 'title' => $this->_title, 'location' => $this->_location, 'content' => $this->_content, 'event_id' => $this->_eventID, ]; $stmt = $this->db->prepare($sql); $stmt->execute($data); $status = $stmt->rowCount(); return $status; } catch (Exception $err) { die("Oh noes! There's an error in the query! " . $err); } } // get records from database public function getList() { try { $sql = "SELECT id, title, location, content, created_date FROM events"; $stmt = $this->db->prepare($sql); $stmt->execute(); $result = $stmt->fetchAll(\PDO::FETCH_ASSOC); return $result; } catch (Exception $err) { die("Oh noes! There's an error in the query! " . $err); } } // public function getEvent() { try { $sql = "SELECT id, title, location, content, created_date FROM events WHERE id=:event_id"; $stmt = $this->db->prepare($sql); $data = [ 'event_id' => $this->_eventID ]; $stmt->execute($data); $result = $stmt->fetch(\PDO::FETCH_ASSOC); return $result; } catch (Exception $e) { die("Oh noes! There's an error in the query!"); } } // delete record from database public function delete() { try { $sql = "DELETE FROM events WHERE id=:event_id"; $stmt = $this->db->prepare($sql); $data = [ 'event_id' => $this->_eventID ]; $stmt->execute($data); $status = $stmt->rowCount(); return $status; } catch (Exception $err) { die("Oh noes! There's an error in the query! " . $err); } } } ?> |
Step 6: Create action file named action.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<?php // include event class include_once 'class/Event.php'; // create obj $event = new Event(); // post method $post = $_POST; // define array $json = array(); // create record in database if(!empty($post['action']) && $post['action']=="create") { $event->setTitle($post['title']); $event->setLocation($post['location']); $event->setContent($post['content']); $status = $event->create(); if(!empty($status)){ $json['msg'] = 'success'; $json['task_id'] = $status; } else { $json['msg'] = 'failed'; $json['task_id'] = ''; } header('Content-Type: application/json'); echo '<div class="card gedf-card" style="margin: 5px;" id="dyn-'.$status.'"> <div class="card-body"> <a class="card-link" href="#"> <h5 class="card-title">'.$post['title'].'</h5> </a> <div class="text-muted h7 mb-2"> <i class="fas fa-map-marker-alt"></i> '.$post['location'].'</div> <p class="card-text">'.$post['content'].'</p> <hr> <p class="card-text float-right"> <button type="submit" class="btn btn-sm btn-outline-secondary update-event" data-ueventid="'.$status.'">Edit</button> <button type="submit" class="btn btn-sm btn-outline-secondary delete-event" data-deventid="'.$status.'">Delete</button> </p> </div> </div>'; } // update record in database if(!empty($post['action']) && $post['action']=="fetch_event") { $event->setEventID($post['event_id']); $fetchEvent = $event->getEvent(); header('Content-Type: application/json'); echo '<form id="dynamic-post-'.$post['event_id'].'" class="dynamic-post"> <input type="hidden" name="action" value="update"> <input type="hidden" name="event_id" value="'.$fetchEvent['id'].'"> <div class="row align-items-center"> <div class="col-md-12 col-md-right"> <div class="form-group"> <div class="col-sm-12"> <input type="text" class="form-control" id="event-title" placeholder="Title" name="title" value="'.$fetchEvent['title'].'"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <input type="text" class="form-control" id="event-location" placeholder="Location" name="location" value="'.$fetchEvent['location'].'"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <textarea class="form-control" id="event-content'.$fetchEvent['id'].'" name="content">'.$fetchEvent['content'].'</textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-12"> <button type="button" class="btn btn-info float-right save-update" data-seventid="'.$fetchEvent['id'].'">Submit</button> </div> </div> </div> </div> </form>'; } // update record in database if(!empty($post['action']) && $post['action']=="update") { $event->setEventID($post['event_id']); $event->setTitle($post['title']); $event->setLocation($post['location']); $event->setContent($post['content']); $status = $event->update(); if(!empty($status)){ $json['msg'] = 'success'; } else { $json['msg'] = 'failed'; } header('Content-Type: application/json'); echo '<div class="card gedf-card" style="margin: 5px;" id="dyn-'.$post['event_id'].'"> <div class="card-body"> <a class="card-link" href="#"> <h5 class="card-title">'.$post['title'].'</h5> </a> <div class="text-muted h7 mb-2"> <i class="fas fa-map-marker-alt"></i> '.$post['location'].'</div> <p class="card-text">'.$post['content'].'</p> <hr> <p class="card-text float-right"> <button type="submit" class="btn btn-sm btn-outline-secondary update-event" data-ueventid="'.$post['event_id'].'">Edit</button> <button type="submit" class="btn btn-sm btn-outline-secondary delete-event" data-deventid="'.$post['event_id'].'">Delete</button> </p> </div> </div>'; } // delete record from database if(!empty($post['action']) && $post['action']=="delete") { $event->setEventID($post['event_id']); $status = $event->delete(); if(!empty($status)){ $json['msg'] = 'success'; } else { $json['msg'] = 'failed'; } header('Content-Type: application/json'); echo json_encode($json); } ?> |
Step 7: complete HTML web form
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<?php // include event class include_once 'class/Event.php'; // create obj $event = new Event(); $eventInfo = $event->getList(); include('templates/header.php'); ?> <script src="assets/tinymce/tinymce.min.js" referrerpolicy="origin"></script> <section class="showcase"> <div class="container"> <div class="pb-2 mt-4 mb-2 border-bottom"> <h2>Dynamic TinyMCE WYSIWYG Editor with PHP, MySQL and AJAX</h2> </div> <span id="render-event-data"> <?php if(!empty($eventInfo) && count($eventInfo)>0) { ?> <?php foreach($eventInfo as $key=>$element) { ?> <span id="dyn-<?php print $element['id'];?>"> <div class="card gedf-card" style="margin: 5px;"> <div class="card-body"> <a class="card-link" href="#"> <h5 class="card-title"><?php print $element['title']; ?></h5> </a> <div class="text-muted h7 mb-2"> <i class="fas fa-map-marker-alt"></i> <?php print $element['location']; ?></div> <p class="card-text"><?php print $element['content']; ?></p> <hr> <p class="card-text float-right"> <button type="submit" class="btn btn-sm btn-outline-secondary update-event" data-ueventid="<?php print $element['id'];?>">Edit</button> <button type="submit" class="btn btn-sm btn-outline-secondary delete-event" data-deventid="<?php print $element['id'];?>">Delete</button> </p> </div> </div> </span> <?php } ?> <?php } ?> </span> <br/> <hr> <form id="dynamic-post" class="dynamic-post"> <input type="hidden" name="action" value="create"> <div class="row align-items-center"> <div class="col-md-12 col-md-right"> <div class="form-group"> <div class="col-sm-12"> <input type="text" class="form-control" id="event-title" placeholder="Title" name="title"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <input type="text" class="form-control" id="event-location" placeholder="Location" name="location"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <textarea class="form-control" id="event-content" name="content"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-12"> <button type="button" class="btn btn-info float-right" id="save-event">Submit</button> </div> </div> </div> </div> </form> </div> </section> <?php include('templates/footer.php');?> <script src="assets/tinymce/custom.tinymce.js"></script> |
Create files named (header.php and footer.php)
This file contains the header and footer section of the webpage. The Bootstrap library is used to provide a better UI, so, include it in the header and footer section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Dynamic TinyMCE WYSIWYG Editor with PHP, MySQL and AJAX | Tech Arise</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" /> <!-- Custom fonts for this template --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" /> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"> <!-- Custom styles for this template --> <link href="assets/css/style.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top header-bg-dark" style="background: ##FFFFFF!;"> <div class="container"> <a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="https://techarise.com">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://techarise.com/php-free-script-demos/">Live Demo</a> </li> </ul> </div> </div> </nav> |
footer.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!-- Footer --> <footer class="footer bg-light footer-bg-dark"> <div class="container"> <div class="row"> <div class="col-lg-6 h-100 text-center text-lg-left my-auto"> <ul class="list-inline mb-2"> <li class="list-inline-item"> <a href="#">About</a> </li> <li class="list-inline-item">⋅</li> <li class="list-inline-item"> <a href="#">Contact</a> </li> <li class="list-inline-item">⋅</li> <li class="list-inline-item"> <a href="#">Terms of Use</a> </li> <li class="list-inline-item">⋅</li> <li class="list-inline-item"> <a href="#">Privacy Policy</a> </li> </ul> <p class="text-muted small mb-4 mb-lg-0">Copyright © 2011 - <?php print date('Y', time());?> <a href="https://techarise.com/">TECHARISE.COM</a> All rights reserved.</p> </div> <div class="col-lg-6 h-100 text-center text-lg-right my-auto"> <ul class="list-inline mb-0"> <li class="list-inline-item mr-3"> <a href="#"> <i class="fab fa-facebook fa-2x fa-fw"></i> </a> </li> <li class="list-inline-item mr-3"> <a href="#"> <i class="fab fa-twitter-square fa-2x fa-fw"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fab fa-instagram fa-2x fa-fw"></i> </a> </li> </ul> </div> </div> </div> </footer> <!-- Bootstrap core JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> </body> </html> |