The HTML prepared content can 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. To add a WYSIWYG editor to texarea, there are several jQuery plugins available. The most common plugins for adding a rich text editor to a web page are CKEditor and TinyMCE.

The value must be saved for further usage after the WYSIWYG editor text is submitted. The database is typically used to store the input content in a web application. The input HTML value must be placed into the database 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 insert and save HTML content from a WYSIWYG editor into a database.

Make a database table.

A table in the database must be created to store the HTML editor content. In the MySQL database, the following SQL creates an editor table with some basic fields.

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;

Configuring the Database (dbConfig.php)

The dbConfig.php file is used to connect PHP and MySQL to the database. According to your database credentials, specify 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);
}

Form with a WYSIWYG HTML Editor

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

<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 converted in WYSIWYG Editor to accept 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).
With CKEditor, you may add a WYSIWYG editor:
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() method.

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

Include the TinyMCE editor plugin’s JS library file to add a WYSIWYG editor.

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

To replace the textarea field with a WYSIWYG editor, use the tinymce.init() method.

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

Content from the HTML Editor should be saved in the database.

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

Using PHP’s $_POST function, get the editor content from the sent form data.
Using PHP and MySQL, insert the HTML content into the database.
The user will see 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.';
}
}
?>

Note :

You can use the example code to enter any HTML editor content in the database, not just the CKEditor and TinyMCE editor material. This code snippet comes in handy when using the WYSIWYG editor to input HTML text in a CRUD application. You may easily extend the functionality of our script by utilising a WYSIWYG editor to add extra input fields and save all of the material to the database using PHP and MySQL.