Save WYSIWYG Editor Content in Database using PHP and MySQL

The WYSIWYG editor allows the user to insert the HTML formatted text in the input field. You can easily add WYSIWYG HTML editor to textarea using jQuery plugin. There are many jQuery plugins are available to add WYSIWYG editor to texarea. CKEditor and TinyMCE editor is the most popular plugin to add rich text editor on the web page.

Once the WYSIWYG editor content is submitted, the value needs to be stored for later use. Generally, in the web application, the database is used to store the input content. To save the WYSIWYG editor content, the input HTML value needs to be inserted in the database. PHP $_POST method is the easiest way to get HTML editor value and save WYSIWYG Editor content in the database. In this tutorial, we will show you how to insert and save HTML content of WYSIWYG editor in the database using PHP and MySQL.

Create Database Table

To store the HTML editor content, a table needs to be created in the database. The following SQL creates an editor table with some basic fields in the MySQL database.

CREATE TABLE `editor` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `content` text COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Add WYSIWYG HTML Editor to Textarea with CKEditor

Database Configuration (dbConfig.php)

The dbConfig.php file is used to connect the database using PHP and MySQL. Specify the database host ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) as per your database credentials.

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName     = "codexworld";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}

WYSIWYG HTML Editor Form

At first, create an HTML form with textarea input field to allow the user to add content and submit data.

<form method="post" action="submit.php">
    <textarea name="editor" id="editor" rows="10" cols="80">
    This is my textarea to be replaced with HTML editor.
    </textarea>
    <input type="submit" name="submit" value="SUBMIT">
</form>

To accept HTML content from the user, the textarea element needs to be converted in WYSIWYG Editor. You can use any WYSIWYG editor plugin (CKEditor or TinyMCE) to add HTML editor to textarea input field.
Add WYSIWYG editor with CKEditor:
Include the JS library file of CKEditor plugin.

<script src="ckeditor/ckeditor.js"></script>

Use CKEDITOR.replace() method to replace the textarea field with WYSIWYG editor.

<script>
CKEDITOR.replace('editor');
</script>

Add WYSIWYG editor with TinyMCE:
Include the JS library file of TinyMCE editor plugin.

<script src="tinymce/tinymce.min.js"></script>

Use tinymce.init() method to replace the textarea field with WYSIWYG editor.

<script>
tinymce.init({
    selector: '#editor'
});
</script>

Save HTML Editor Content in the Database

Once the form is submitted, the editor’s content is posted to the server-side script (submit.php) for inserting the HTML formatted content in the database.

• Retrieve the editor content from the posted form data using the $_POST method in PHP.
• Insert the HTML content in the database using PHP and MySQL.
• Display the status message to the user.

<?php
// Include the database configuration file
require_once 'dbConfig.php';

$editorContent = $statusMsg = '';

// If the form is submitted
if(isset($_POST['submit'])){
    // Get editor content
    $editorContent = $_POST['editor'];
    
    // Check whether the editor content is empty
    if(!empty($editorContent)){
        // Insert editor content in the database
        $insert = $db->query("INSERT INTO editor (content, created) VALUES ('".$editorContent."', NOW())");
        
        // If database insertion is successful
        if($insert){
            $statusMsg = "The editor content has been inserted successfully.";
        }else{
            $statusMsg = "Some problem occurred, please try again.";
        } 
    }else{
        $statusMsg = 'Please add content in the editor.';
    }
}
?>

Conclusion

Not only the CKEditor and TinyMCE editor content, but you can also use the example code to insert any HTML editor content in the database. This code snippet is very useful for the CRUD application where the WYSIWYG editor is used for insert HTML content. You can easily enhance our script functionality to add additional input fields with WYSIWYG editor and save all the content in the database using PHP and MySQL.