How to use CKEditor 5 and save data into database using PHP
- Tech Area
- August 4, 2023
In this tutorial, We will learn how to use CKEditor 5 in our website and save data into mysql database using PHP. CKEditor is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications.
Files used in this tutorial:
1- connection.php (database connection file)
2- index.php (CKEditor integration and insert data into database)
Below are the step by step process of how to implement CKEditor and insert data into database.
Step 1: Create a Database connection
In this step, create a new file connection.php to create database connection.
connection.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
echo("connection terminated");
}
?>Step 2: CKEditor integration
In this step, create a new file index.php. This is the main file used to integrate CKEditor.
This screenshot shows the CKEditor.
index.php
<html>
<head>
<title>Ckeditor</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h3 align="center">CKEditor</h3>
<br>
<div class="box">
<form method="post">
<div class="form-group">
<textarea id="content" name="content" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Save" class="btn btn-primary">
</div>
</form>
<div class="error"><?php if(!empty($msg)){ echo $msg; } ?></div>
</div>
</div>
</body>
</html>Now include JavaScript CDN for ckeditor and write script for loading editor.
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#content' ))
.catch( error => {
console.error( error );
});
</script>Now we have to insert editor data into database table tbl_ckeditor.
<?php
include('connection.php');
if(isset($_REQUEST['submit']))
{
$content = $_REQUEST['content'];
$insert_query = mysqli_query($connection, "insert into tbl_ckeditor set content='$content'");
if($insert_query)
{
$msg = "Data Inserted";
}
else
{
$msg = "Error";
}
}
?>Source Code
Here is the full code that we have written for index.php.
<html>
<head>
<title>Ckeditor</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<style>
.box
{
width:100%;
max-width:600px;
background-color:#f9f9f9;
border:1px solid #ccc;
border-radius:5px;
padding:16px;
margin:0 auto;
}
.ck-editor__editable[role="textbox"] {
/* editing area */
min-height: 300px;
}
.error
{
color: red;
}
</style>
<?php
include('connection.php');
if(isset($_REQUEST['submit']))
{
$content = $_REQUEST['content'];
$insert_query = mysqli_query($connection, "insert into tbl_ckeditor set content='$content'");
if($insert_query)
{
$msg = "Data Inserted";
}
else
{
$msg = "Error";
}
}
?>
<body>
<div class="container">
<h3 align="center">CKEditor</h3>
<br>
<div class="box">
<form method="post">
<div class="form-group">
<textarea id="content" name="content" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Save" class="btn btn-primary">
</div>
</form>
<div class="error"><?php if(!empty($msg)){ echo $msg; } ?></div>
</div>
</div>
</body>
</html>
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#content' ))
.catch( error => {
console.error( error );
});
</script>
Download Source Code
Join 10,000+ subscriber