While we are developing Applications on PHP sometimes we need rich text area fields. In these kind of cases, CKEditor is one of the best option for us. This tutorial will guide you through the process of integrating CKEditor with CKFinder for image upload to the server in PHP App.
Table Of Content
1 Prerequisites
1.) PHP version of >7.4
2 Introduction
In this article, I am going to show you how to Integrate CKEditor 5 to your PHP Application. 3 Create Project and Config Database
3.1 Create Project Folder "ckeditor-app"
Create Project Folder "ckeditor-app" in root directory store all project files
We will create table to store the post information and images in the database.
The following SQL creates a
"posts" table with some basic fields in the MySQL database.
CREATE TABLE `posts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT NULL,
`description` text DEFAULT NULL,
`created` datetime NOT NULL DEFAULT current_timestamp(),
`updated` datetime DEFAULT NULL,
`status` tinyint(4) NOT NULL DEFAULT 1,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Configuration File (dbconfig.php)
In this dbconfig.php file, database setting variables are defined.
<?php
// Database settings
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'blog');
?>
4 Install CKEditor 5
In your "index.php"
file, include CKEditor 5's CDN link within the head section:
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
5 Create index.php File
Create "index.php" File and place following code
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP Ckeditor Image Upload Example with CKFinder</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/css/dist/mdb5/standard/core.min.css">
<link rel='stylesheet' id='roboto-subset.css-css' href='https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/css/mdb5/fonts/roboto-subset.css?ver=3.9.0-update.5' type='text/css' media='all' />
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
<style>
.ck-editor__editable_inline {
min-height: 300px;
}
</style>
</head>
<body>
<div class="container-fluid">
<?php if (isset($_SESSION['message']) && $_SESSION['message']) { ?>
<div
style="color: green;
border: 2px green solid;
text-align: center;
padding: 5px;margin-bottom: 10px;">
<?php echo $_SESSION['message']; unset($_SESSION['message']); ?>
</div>
<?php } ?>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 mb-4">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0">PHP Ckeditor Image Upload Example with CKFinder</h5>
</div>
<div class="card-body">
<form class="form-horizontal" method="POST" id="post-form" role="form" action="store.php" >
<div class="row mb-4">
<div class="col">
<div data-mdb-input-init class="form-outline">
<input type="text" id="name" class="form-control" name="title" />
<label class="form-label" for="name">Title</label>
</div>
</div>
</div>
<div class="row">
<div class="row mb-4">
<div class="col-12">
<div data-mdb-input-init class="form-outline">
<label class="form-label" for="name">Description</label>
<textarea name="description" id="editor" rows="5"></textarea>
</div>
</div>
</div>
<hr class="my-4" />
<button class="btn btn-primary btn-lg btn-block" type="submit">
Save
</button>
</form>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
<script type="text/javascript" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/js/dist/mdb5/standard/core.min.js"></script>
<script type="text/javascript" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/js/dist/search/search.min.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ),{
ckfinder: {
uploadUrl: 'upload.php',
}
})
.catch( error => {
} );
</script>
</body>
</html>
6 Create upload.php File
Create
"upload.php" File and place the code in /upload.php.
<?php
if($_FILES){
$target_path = "uploads/";
$image=$_FILES['upload']['name'];
$fileExtension = pathinfo($image, PATHINFO_EXTENSION);
$target_path = $target_path . md5(time() . $image) . '.' . $fileExtension;
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path))
{
return json_encode(['fileName' => $image, 'uploaded'=> 1, 'url' => $target_path]);
}else
{
echo json_encode(['uploaded'=> 0]);
}
}
?>
7 Create store.php File
Create "store.php" File and place following code
<?php
session_start();
include('dbconfig.php');
$conn = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD);
mysqli_select_db($conn,DB_NAME);
$query = "INSERT INTO posts(title,description) VALUES ('".$_REQUEST['title']."','".$_REQUEST['description']."')";
$insert =mysqli_query($conn, $query);
$_SESSION['message'] = 'Post Created Successful';
header("Location: index.php");
?>
8 Folder Structure
index.php
upload.php
store.php
dbconfig.php
9 Run Web Server to Test the App
Visit the URL
http://localhost/ckeditor-app
10 Conclusion
That’s all we need to do.
Now you can easily use the CKEditor 5 in PHP application. You can try it out.
Tags
