TinyMCE Editor – Save Content in database using PHP & MySQL
TinyMCE is the most advanced WYSIWYG HTML editor designed to simplify website content creation. It has the ability to convert HTML textarea fields or other HTML elements to editor instances. TinyMCE is designed to easily integrate with JavaScript libraries.
In this tutorial, we will explain you how to use TinyMCE editor to replace textarea to save content in database using PHP and MySQL.
So let’s implement Save TinyMCE Editor Content with PHP & MySQL. look files structure:
- use-tinymce-editor-with-php-mysql
- assets
- css
- style.css
- tinymce.min.js
- custom.tinymce.js
- css
- templates
- header.php
- footer.php
- class
- DBConnection.php
- Blog.php
- index.php
- assets
Step 1: First, create MySQL Database Table named
blogRun the following script against MySQL to create the database blog table.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
CREATE TABLE `blog` ( `id` int(11) NOT NULL COMMENT 'Primary Key', `name` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, `content` text NOT NULL, `created_date` datetime NOT NULL DEFAULT current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=latin1; ALTER TABLE `blog` ADD PRIMARY KEY (`id`); ALTER TABLE `blog` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key'; |
Step 2: Include jQuery and TinyMCE Editor Plugins
|
1 2 |
<script src="assets/tinymce.min.js" referrerpolicy="origin"></script> <script src="assets/custom.tinymce.js"></script> |
Step 3: Create HTML Form
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form method="POST" class="tinymce-frm"> <div class="row align-items-center"> <div class="col-md-12 col-md-right"> <div class="form-group"> <div class="col-sm-12"> <textarea class="form-control" rows="5" id="tiny-editor" name="content">Next, use our Get Started docs to setup Tiny!</textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-12"> <button type="submit" class="btn btn-info float-right">Submit</button> </div> </div> </div> </div> </form> |
Step 4: Initialize TinyMCE Editor
initialize TinyMCE editor. We will user textarea to convert into TinyMCE editor.
|
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 |
/* *** Author: CodersMag Team Author URI: http://codersmag.com File Name : custom.tinymce.js *** */ tinymce.init({ selector: '#tiny-editor', width:'100%', height: 250, plugins: [ "code ", "paste" ], browser_spellcheck : true, menu: { file: { title: 'File', items: 'newdocument restoredraft | preview | print' }, edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' }, view: { title: 'View', items: 'code | visualaid visualchars visualblocks | preview fullscreen' }, format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat' }, tools: { title: 'Tools', items: 'code wordcount' }, table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' }, help: { title: 'Help', items: 'help' } }, branding: false, mobile: { menubar: true }, }); |
Step 5: Database configutation
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 34 35 36 37 38 39 40 |
<?php /** * @package Database Connection(Config) * * @author CodersMag Team * * @email info@codersmag.com * */ // Database Connection class class DBConnection { // HOST NAME private $_dbHostname = "localhost"; // DATABASE NAME private $_dbName = "blog_DB"; // DATABASE USERNAME private $_dbUsername = "root"; // DATABASE PASSWORD private $_dbPassword = ""; // declare variable private $_dbh; // __construct public function __construct() { try { $this->_dbh = new PDO("mysql:host=$this->_dbHostname;dbname=$this->_dbName", $this->_dbUsername, $this->_dbPassword); $this->_dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); } } // return PDO: Connection public function returnPDOConnection() { return $this->_dbh; } } ?> |
Step 6: Create a class blog
Create a class file named
Blog.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 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 /** * @package Create Blog class * * @author CodersMg Team * * @email info@codersmag.com * */ // connection class include("DBConnection.php"); // Blog class Blog { // declare variable protected $_db; private $_name; private $_email; private $_content; public function setName($name) { $this->_name = $name; } public function setEmail($email) { $this->_email = $email; } public function setContent($content) { $this->_content = $content; } // __construct public function __construct() { $this->_db = new DBConnection(); $this->_db = $this->_db->returnPDOConnection(); } // insert recored in database public function create() { try { $sql = 'INSERT INTO blog (name, email, content) VALUES (:name, :email, :content)'; // create array $data = array( 'name' => $this->_name, 'email' => $this->_email, 'content' => $this->_content, ); $stmt = $this->_db->prepare($sql); $stmt->execute($data); $lastID = $this->_db->lastInsertId(); return $lastID; } catch (Exception $err) { die("Error!: " . $e->getMessage()); } } // get record from database public function getList() { try { $sql = "SELECT name, email, content, created_date FROM blog"; $stmt = $this->_db->prepare($sql); $stmt->execute(); $result = $stmt->fetchAll(\PDO::FETCH_ASSOC); return $result; } catch (Exception $err) { die("Error!: " . $e->getMessage()); } } } ?> |
Step 7: Create complete HTML file named
index.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 |
<?php include_once 'class/Blog.php'; $obj = new Blog(); $_post = $_POST; // insert record in database if(!empty($_POST) && count($_POST)>0) { $obj->setName($_post['name']); $obj->setEmail($_post['email']); $obj->setContent($_post['content']); $status = $obj->create(); } // get record from database $blogInfo = $obj->getList(); include('templates/header.php'); ?> <script src="assets/tinymce.min.js" referrerpolicy="origin"></script> <script src="assets/custom.tinymce.js"></script> <section class="showcase"> <div class="container"> <div class="pb-2 mt-4 mb-2 border-bottom"> <h2>TinyMCE Editor - Save Content in database using PHP & MySQL</h2> </div> <form method="POST" class="tinymce-frm"> <div class="row align-items-center"> <div class="col-md-12 col-md-right"> <div class="form-group"> <label class="control-label col-sm-12" for="name">Full Name:</label> <div class="col-sm-12"> <input type="text" class="form-control" id="name" placeholder="Full Name" name="name"> </div> </div> <div class="form-group"> <label class="control-label col-sm-12" for="email">Email:</label> <div class="col-sm-12"> <input type="email" class="form-control" id="email" placeholder="Email" name="email"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <textarea class="form-control" rows="5" id="tiny-editor" name="content">Next, use our Get Started docs to setup Tiny!</textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-12"> <button type="submit" class="btn btn-info float-right">Submit</button> </div> </div> </div> </div> </form> <div class="row"> <?php if(!empty($blogInfo) && count($blogInfo)>0) { ?> <?php foreach($blogInfo as $key=>$element) { ?> <div class="col-md-12 col-md-right"> <div class="card text-center"> <div class="card-header">@<?php print $element['name']; ?></div> <div class="card-body"> <h5 class="card-title"><?php print $element['email']; ?></h5> <p class="card-text"><?php print $element['content']; ?></p> </div> <div class="card-footer text-muted"><?php print $element['created_date']; ?></div> </div> </div> <?php } ?> <?php } ?> </div> </div> </section> <?php include('templates/footer.php');?> |
Step 8: Create header (header.php)
This view contains the header section of the webpage. The Bootstrap library is used to provide a better UI, so, include it in the header section.
Located at the top of a website, the header typically contains elements that include a company’s logo, website navigation, and contact information.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <link rel="canonical" href="https://www.codersmag.com/" /> <meta name="author" content="CodersMag"> <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=""> <link rel="icon" type="image/ico" href="https://codersmag.com/demos/ci/assets/images/favicon.ico"> <title>TinyMCE Editor - Save Content in database using PHP & MySQL</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="css/style.css" rel="stylesheet"> <link href="css/shimmer.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://codersmag.com/"><h1>Coders Mag</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://codersmag.com/">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://codersmag.com/php-script-demos/">LIVE DEMO</a> </li> </ul> </div> </div> </nav> |
Step 9: Create a view file named footer.php
This view contains the footer section of the webpage.
- jQuery – needed by Bootstrap JavaScript.
- Bootstrap JavaScript – to make cool UI
|
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="small mb-4 mb-lg-0" style="color: #E6ECF0;">Copyright © 2017 - <?php print date('Y', time());?> <a style="color: #E6ECF0;" href="https://codersmag.com/">CODERSMAG.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> |