Upload image in CKEditor 5 and save data into database using PHP

Tech Area
August 5, 2023

In this tutorial, We will learn how to upload image 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 save data into database)

3- fileupload.php (save image into directory)

Below are the step by step process of how to implement CKEditor and insert image 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 and image upload.

<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create( document.querySelector( '#content' ),{
          ckfinder:
          {
            uploadUrl: 'fileupload.php'
          }
        })
        .then(editor => {
          console.log(editor);
        })
        .catch( error => {
            console.error( error );
        });
</script>

Step 3: CKEditor image upload

In this step, create a new file fileupload.php. This file used to upload image into directory.

fileupload.php

<?php 
$data = array();
if(isset($_FILES['upload']['name']))
{
	$file_name= $_FILES['upload']['name'];
	$file_path= 'upload/'.$file_name;
	$file_extension = strtolower(pathinfo($file_path, PATHINFO_EXTENSION));
	if($file_extension=='jpg' || $file_extension=='jpeg' || $file_extension=='png')
	{
		if(move_uploaded_file($_FILES['upload']['tmp_name'], $file_path))
		{
			$data['file']= $file_name;
			$data['url']= $file_path;
			$data['uploaded']= 1;
		}
		else
		{
			$data['uploaded']= 0;
			$data['error']['message']= 'Error! File not uploaded';
		}
	}
	else
	{
		$data['uploaded']= 0;
		$data['error']['message']= 'Invalid extension';
	}
}
echo json_encode($data);
?>

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' ),{
          ckfinder:
          {
            uploadUrl: 'fileupload.php'
          }
        })
        .then(editor => {
          console.log(editor);
        })
        .catch( error => {
            console.error( error );
        });
</script>

Download Source Code

How to use CKEditor 5 and save data into database using PHP

How to print web page using JavaScript

Subscribe us via Email

Join 10,000+ subscriber

Subscribe on YouTube

PHP Projects

Student record system project in PHP and MySQL Last Updated: July 3, 2024

Food ordering system project in PHP and MySQL Last Updated: June 27, 2024

Tourism management system project in PHP and MySQL Last Updated: June 24, 2024

Restaurant table booking system project in PHP and MySQL Last Updated: February 22, 2024

Hostel management system project in PHP and MySQL Last Updated: February 14, 2024