Save & Load TinyMCE Content With PHP MySQL – Simple Example

Welcome to a quick tutorial on how to save and load TinyMCE content with PHP MySQL. So you are building your own CMS or want to give users some flexibility to edit their own product pages? Well, TinyMCE is definitely a good choice.

To save and retrieve TinyMCE contents with PHP and MySQL, we need the following components:

  • A database table to store the contents.
  • A PHP library to manage (save and load) the contents.
  • Finally, a page to update the content, and a page to show the content itself.

Let us walk through an example in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes PHP MYSQL MCE The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

  • Create test a database and import1-contents.sql.
  • Change the database settings in 2-database.php to your own.
  • Launch 3-save.php for the save content demo, 4-show.php to fetch and display.
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

PHP-MYSQL-TINYMCE

All right, let us now go into the PHP-MYSQL-TINYMCE example.

 

STEP 1) CONTENT DATABASE TABLE

1-contents.sql
CREATE TABLE `contents` (
  `content_id` int(20) NOT NULL,
  `content_text` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `contents`
  ADD PRIMARY KEY (`content_id`);

ALTER TABLE `contents`
  MODIFY `content_id` int(20) NOT NULL AUTO_INCREMENT;

Yep, this is just a very simple table with only 2 fields:

  • content_id The content ID, primary key.
  • content_text The content itself.

 

 

STEP 2) PHP CONTENT LIBRARY

2-database.php
<?php
class Content {
  // (A) PROPERTIES
  public $pdo = null; // PDO object
  public $stmt = null; // SQL statement
  public $error = ""; // Error message, if any

  // (B) CONSTRUCTOR - CONNECT TO DATABASE
  function __construct () {
    try {
      $this->pdo = new PDO(
        "mysql:host=".DB_HOST.";dbname=".DB_NAME.";charset=".DB_CHARSET, 
        DB_USER, DB_PASSWORD, [
          PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
          PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
        ]
      );
    } catch (Exception $ex) { exit($ex->getMessage()); }
  }

  // (C) DESTRUCTOR - CLOSE DATABASE CONNECTION
  function __destruct () {
    if ($this->stmt!==null) { $this->stmt = null; }
    if ($this->pdo!==null) { $this->pdo = null; }
  }
  
  // (D) SAVE CONTENT
  function save ($id, $content) {
    try {
      $this->stmt = $this->pdo->prepare(
        "REPLACE INTO `contents` (`content_id`, `content_text`) VALUES (?,?)"
      );
      $this->stmt->execute([$id, $content]);
      return true;
    } catch (Exception $ex) {
      $this->error = $ex->getMessage(); 
      return false;
    }
  }
  
  // (E) GET CONTENT
  function get ($id) {
    $this->stmt = $this->pdo->prepare(
      "SELECT `content_text` FROM `contents` WHERE `content_id`=?"
    );
    $this->stmt->execute([$id]);
    $content = $this->stmt->fetch();
    return is_array($content) ? $content["content_text"] : "" ;
  }
}

// (F) DATABASE SETTINGS - CHANGE TO YOUR OWN!
define("DB_HOST", "localhost");
define("DB_NAME", "test");
define("DB_CHARSET", "utf8");
define("DB_USER", "root");
define("DB_PASSWORD", "");

// (G) NEW CONTENT OBJECT
$_CONTENT = new Content();

This one looks complicated at first, but keep calm and study closely.

  • (B & C) The constructor will connect to the database when the $_CONTENT = new Content() object is created. The destructor closes the connection when done.
  • (D & E) There are only 2 content functions here!
    • function save() save content into the database.
    • function get() retrieve content from the database.
  • (F & G) The database settings and creating the object. Doh.

 

 

STEP 3) SAVE CONTENT PAGE

3-save.html
<!-- (A) TINY MCE -->
<!-- https://cdnjs.com/libraries/tinymce -->
<!-- https://www.tiny.cloud/docs/configure/ -->
<form method="post">
  <textarea id="mceDEMO" name="content"></textarea>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.0/tinymce.min.js"></script>
<script>
tinymce.init({
  selector : "#mceDEMO",
  plugins : "save",
  menubar : false,
  toolbar: "save | styleselect | bold italic | alignleft aligncenter alignright alignjustify"
});
</script>

<?php
// (B) SAVE CONTENT ON FORM SUBMIT
if (isset($_POST["content"])) {
  // (B1) CONNECT TO DATABASE
  require "2-database.php";
 
  // (B2) SAVE
  // NOTE - CONTENT ID FIXED TO 99 FOR THIS DEMO
  // USE YOUR OWN ID IN YOUR PROJECT!
  echo $_CONTENT->save(99, $_POST["content"])
    ? "<div>SAVED</div>"
    : "<div>{$_CONTENT->error}</div>" ;
}
?>

That’s right, this should be very straightforward.

  1. Just an HTML form and a text field where we use TinyMCE to create the WYSIWYG editor.
  2. When the user hits “save” and submits the form, we simply use the PHP library to save the content.

 

 

STEP 4) SHOW CONTENT

4-show.php
<?php
// NOTE: CONTENT ID IS FIXED TO 99 FOR THIS DEMO...
require "2-database.php";
echo $_CONTENT->get(99);

Does this even need an explanation?

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

3 thoughts on “Save & Load TinyMCE Content With PHP MySQL – Simple Example”

Leave a Comment

Your email address will not be published.