Xây dựng trang quản trị laravel 9 với Laravel-admin bằng demo 1 trang blog cá nhân phần 5 thêm ckeditor và ckfinder

Xây dựng trang quản trị laravel 9 với Laravel-admin bằng demo 1 trang blog cá nhân phần 5 thêm ckeditor và ckfinder

Khi làm blog thì việc có 1 trình quản lý editor là 1 điều bắt buộc để có những bài viết chất lượng và hiển thị nội dung sinh động .Sau đây mình sẽ hướng dẫn các bạn cài đặt ckeditor và ckfinder vào trang admin

1 Cài đặt ckeditor

Đầu tiên chúng ta cần tải ckeditor về với command sau :

composer require laravel-admin-ext/ckeditor

Sau đó chúng ta tiếp tục với command sau :

php artisan vendor:publish --tag=laravel-admin-ckeditor

Cấu hình thông tin ckeditor trong file config/admin.php

'extensions' => [
        'ckeditor' => [

            //Set to false if you want to disable this extension
            'enable' => true,

            // Editor configuration
            'config' => [
                'entities' => false,
                /*
                'filebrowserImageBrowseUrl'=>'/laravel-filemanager?type=Images',
                'filebrowserImageUploadUrl'=>'/laravel-filemanager/upload?type=Images&_token=',
                'filebrowserBrowseUrl'=> '/laravel-filemanager?type=Files',
                'filebrowserUploadUrl'=>'/laravel-filemanager/upload?type=Files&_token=',
                */
                'filebrowserBrowseUrl'=>'/ckfinder/browser'
            ]
        ]
    ],

Ở đây các bạn chú ý dòng 

'entities' => false,

Do mình các dòng 

'filebrowserImageBrowseUrl'=>'/laravel-filemanager?type=Images',
                'filebrowserImageUploadUrl'=>'/laravel-filemanager/upload?type=Images&_token=',
                'filebrowserBrowseUrl'=> '/laravel-filemanager?type=Files',
                'filebrowserUploadUrl'=>'/laravel-filemanager/upload?type=Files&_token=',

Bỏ command nếu các bạn dùng https://github.com/UniSharp/laravel-filemanager

Ở đây mình dùng ckfinder để upload ảnh nên cấu hình như trên 

Cách dùng chỉ cần $form->ckeditor là xong nhé cả nhà

2 Cài đặt ckfinder

Ở đây mình dùng package https://github.com/ckfinder/ckfinder-laravel-package để cài đặt .Các bước như sau :

  1. composer require ckfinder/ckfinder-laravel-package
  2. php artisan ckfinder:download
  3. php artisan vendor:publish --tag=ckfinder-assets --tag=ckfinder-config
  4. php artisan vendor:publish --tag=ckfinder-views
  5. php artisan vendor:publish --tag=ckfinder

Các bạn vào file config/ckfinder.php thêm bản quyền như sau :

$config['licenseName'] = 'anhhien';
$config['licenseKey']  = '*6?8-*1**-L**U-*M**-*Z**-Y*T*-2**9';

Các bạn lấy thông tin bản quyền theo link sau : https://ckfinder.lashare.info/

Theo mặc định CKFinder sử dụng cơ chế bảo vệ CSRF dựa trên cookie do đó chúng ta cần loại trừ mã hóa cooke của CkFinder .Tên cookie của CKfinder là ckCsrfToken

Do đó chúng ta chỉnh sửa file app/Http/Middleware/EncryptCookies.php với function except()

namespace App\Http\Middleware;

use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;

class EncryptCookies extends Middleware
{
    /**
     * The names of the cookies that should not be encrypted.
     *
     * @var array
     */
    protected $except = [
        'ckCsrfToken',
    ];
}

CKFinder sử dụng cơ chế bảo vệ CSRF của riêng nó nên chúng ta cần tắt cơ chế bảo vệ csrf của Laravel 9 đi trong middleware app/Http/Middleware/VerifyCsrfToken.php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array
     */
    protected $except = [
        'ckfinder/*',
    ];
}

Oke giờ chúng ta có thể sử dụng ckeditor được rồi .Nếu bạn muốn cấu hình bảo mật thì mới cần làm theo các bước tiếp theo 

Tạo 1 middleware để xác thực với command sau :

php artisan make:middleware CustomCKFinderAuth

Và code trong file app/Http/Middleware/CustomCKFinderAuth.php


namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class CustomCKFinderAuth
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(Request $request, Closure $next)
    {

        if (Auth::guard('admin')->id())
        {
            config(['ckfinder.authentication' => function() {
                return true;
            }]);
        }
        else{
            return redirect(route('home'));
        }


        return $next($request);
    }
}

Và để ckfinder nhận middleware mới bằng cách trong file config/ckfinder.php chỉnh sửa :

$config['authentication'] = '\App\Http\Middleware\CustomCKFinderAuth';

Tiếp theo chúng ta cấu hình router cho ckfinder trong mục router/web.php

Route::any('/ckfinder/connector', '\CKSource\CKFinderBridge\Controller\CKFinderController@requestAction')
    ->name('ckfinder_connector');

Route::any('/ckfinder/browser', '\CKSource\CKFinderBridge\Controller\CKFinderController@browserAction')
    ->name('ckfinder_browser');

Vậy là chúng ta đã cùng nhau cài đặt ckeditor và ckfinder vào hệ thống laravel admin