The HTML prepared content may be inserted into the input area using the WYSIWYG editor. Using the jQuery plugin, you can simply add a WYSIWYG HTML editor to a textarea. There are several jQuery plugins available for adding a WYSIWYG editor to texarea. The most common plugins for adding a rich text editor to a web page are CKEditor and TinyMCE.

Once the WYSIWYG editor text has been entered, the value must be saved for future use. In most cases, the database is utilised to store the input material in a web application. The input HTML value must be loaded into the database in order to save the WYSIWYG editor content. The PHP $_POST function is the most convenient approach to retrieve HTML editor values and save WYSIWYG Editor content to the database. In this article, we'll teach you how to use PHP and MySQL to input and save HTML content from a WYSIWYG editor into a database.

Create Database Table

A table in the database must be established to store the HTML editor content. In the MySQL database, the preceding SQL generates an editor table with some simple columns.

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;

Database Configuration (dbConfig.php)

The dbConfig.php code is being used to connect PHP and MySQL to the database. As per your database credentials, enter the database host ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName).

<?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

Create an HTML form with a textarea input to allow the user to enter information and submit data first.

<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>

The textarea element must be transformed in WYSIWYG Editor before it can take HTML material from the user. To add an HTML editor to a textarea input field, you can use any WYSIWYG editor plugin (CKEditor or TinyMCE).

Add WYSIWYG editor with CKEditor:
Include the CKEditor plugin's JS library file.

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

To replace the textarea field with a WYSIWYG editor, use the CKEDITOR.replace() function.

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

Add WYSIWYG editor with TinyMCE:

Include the TinyMCE editor plugin's JS library file.

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

To change the textarea input with a WYSIWYG editor, use the tinymce.init() function.

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

Save HTML Editor Content in the Database

When the form is submitted, the content of the editor is sent to the server-side script (submit.php), which inserts the HTML formatted content into the database.

 - Using PHP's $_POST function, get the editor content from the submitted form data.
 - Using PHP and MySQL, insert the HTML text into the database.
 - Show the user the status message.

<?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

You may use the sample code to insert any HTML editor content into the database, not just the CKEditor and TinyMCE editor material. This code snippet is quite handy for CRUD applications that use the WYSIWYG editor to enter HTML information. You may simply extend the functionality of our script by adding extra input fields using a WYSIWYG editor and saving all material in the database with PHP and MySQL.