Ckeditor Integration with Laravel File Manager in Laravel 8
CKEditor di Laravel 8 - After in the previous article we discussed how to integrate TinyMCE 5 with the laravel file manager in laravel 8, so on this occasion I will share an article with a topic that is not much different, namely how to integrate CKEditor in laravel 8, complete with a Laravel File integration guide Managers. Before going into the steps of integrating CKEditor in laravel 8, we will first get acquainted with Ckeditor.
Table of Contents
What is Ckeditor ?
Ckeditor is a text editor like WYSIWYG that allows writing content directly within web pages or applications. The core code of Ckeditor is created or written in Javascript and developed by CKSource. CKeditor is available in open source and premium versions.
When this article was written, Ckeditor is available in two versions namely Ckeditor 4 and CKEditor 5, and in this article we will discuss How to integrate CKEditor 4 in laravel 8.
Download CKEditor
Before using or integrating CKEditor in laravel 8, we have to download CKEditor first. Ckeditor provides an option to download ckeditor, which can be directly downloaded using the command line, zip package, CDN or you can use an online builder. Online builder is a feature where we can choose what features we will use in a project with ckeditor. But later in this article, we will use the CDN option.
CKEditor integration in Laravel 8
After getting acquainted with CKEditor, it's time for us to try how to install or integrate CKEditor in laravel 8, which later we will also learn how to integrate CKEditor with laravel file manager in laravel 8.
Install Laravel
composer create-project laravel/laravel larackeditor
The first step we have to do, of course, is to install Laravel. Here I install the latest version of laravel (currently version 8) via composer. Open a terminal, go to the directory where the laravel project will be installed and then run the command as above. With this command, we will install the latest version of laravel (currently version 8) with the name larackeditor.
Install Laravel ui
In this experiment, we will create a case study as in the article on CKEditor integration in laravel 8, namely by installing ckeditor on the create Post page. To be able to enter the create post page, we must first login. So, to create a login or authentication feature in Laravel, we will install the Laravel UI package.
composer require laravel/ui
php artisan ui bootstrap --auth
npm install && npm run dev
To create a login or authentication feature with laravel ui, first we have to go to the newly installed laravel directory with cd larackeditor and then run the above commands sequentially. *If there are errors or failures when running the command npm install && npm run dev, try repeating the command again or you can try npm install first, then run npm run dev.
Don't forget to create a new database for this CKEditor integration trial project in laravel 8 and adjust the DB_DATABASE in the .env file according to the newly created database name. Here I will create a new database with the name larackeditor.
php artisan migrate
Then if the database has been created and the .env file has been adjusted, continue to run migrate with the command as above.
If the laravel ui install process is complete, please run the project then try to register, then it will be directed to the home page as shown above. Now, we will change this page later into a table view containing the post data that has been created.
Create Model & Migration
php artisan make:model Post -m
The next step is to create a model and migration file to create a post table which will later be used to accommodate post data created using the CKEditor text editor which is integrated with laravel version 8.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('slug');
$table->longText('desc');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
Next, open the post migration file in the databases folder. usually filename format like [timestamp]_create_post_table.php. After that, adjust the code in the file with the code as above. In the post table, we will only create three fields, namely title, slug and desc. Well, this desc field will contain the data that we input with the CKEditor text editor which is integrated with laravel version 8. Save, and run php artisan migrate again.
Edit home.blade.php
As mentioned earlier, we will change the appearance of the home page to a posts table that contains dynamic post data that has been created on the create page. On the create page, we will integrate it with CKEditor. Open the file in resources/views/home.blade.php, then change all the code to be like below.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<a href="{{ route('create') }}" class="btn btn-success btn-sm mb-2">Create Post</a>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@endsection
With the code above, we create a table and add a create button that points to the create route. Because route create has not been created in the route/web.php file, so we need to create it first. Add the route code below to the web.php file under the route home record.
Route::get('/create', [App\Http\Controllers\HomeController::class, 'create'])->name('create');
Ok, now please try to open the home page. Then it will look like the image above. The data in the post table as shown above is still static, therefore we need to add a new function in HomeController.php, namely the function create which will direct us to the create view which will also be created.
Edit HomeController.php
public function create()
{
return view('create');
}
In route web.php we have defined a create route that points to HomeController in the function create, but we don't have a function create in HomeController yet. Therefore we need to add a function create in HomeController with code like the image above. Open HomeController.php and add the above code to HomeController.php just below the function home.
Create File create.blade.php
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 66095 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 31803 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 30199 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28293 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 27463 views