While we are developing Applications on Codeigniter 4 framework 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 Codeigniter App.
Table Of Content
1 Prerequisites
1.) PHP version of 8.2
2.) MySql
3.) CKEditor 5
2 Introduction
In this article, I am going to show you how to Integrate CKEditor 5 to your Codeigniter 4 Application.
3 Create / Install a Codeigniter 4 Project
3.1 Install Codeigniter 4 Project
First, make sure your computer has a composer.
Use the following command to install new Codeigniter Project.
Upon Successful Transaction, the payment trasactions data will be stored in the database. This process involves accessing the .env file to input and define the database credentials.
Now, you need to create migration for new table posts to store the data. Also, create a model Post for the same.
Run this below command.
php spark make:model PostModel
open the created model at app/Models/PostModel.php. Inside the file you can see configuration options, you can read the documentation to further learn about its configuration options. We will now update the configs:
app/Models/PostModel.php
Use the following command to run the migration to update your database.
php spark migrate
6 Create New Controller - CkeditorController
Now create a controller "CkeditorController" and add index() and store() methods, also Create "media" folder under Public Directory to store Images
Use the following artisan command to Create Controller.
php spark make:controller CkeditorController
app/Controllers/CkeditorController.php
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use CodeIgniter\HTTP\ResponseInterface;
use App\Models\PostModel;
use CodeIgniter\Files\File;
class CkeditorController extends BaseController
{
private $postModel;
public function __construct()
{
$this->postModel = new PostModel();
}
public function index()
{
return view('post');
}
public function upload()
{
$img = $this->request->getFile('upload');
$image = $img->getRandomName();
if ($img->move("media", $image))
{
$url=base_url()."/media/".$image;
return json_encode(['fileName' => $image, 'uploaded'=> 1, 'url' => $url]);
}
}
public function store()
{
$data = [
"title" => $this->request->getVar("title"),
"description" => $this->request->getVar("description"),
];
$this->postModel->insert($data);
return redirect()->back()->with('message',"Post Created Successful");
}
}
?>
7 Define a Route
Define routes for the CkeditorController in the Routes.php file app/Config/Routes.php
use CodeIgniter\Router\RouteCollection;
$routes->get('/', 'Home::index');
$routes->get('ckeditor', 'CkeditorController::index');
$routes->post('upload', 'CkeditorController::upload');
$routes->post('store', 'CkeditorController::store');
8 Create Post View File
Create View "post.php" File to Show Form
app/Views/post.php
