Hướng dẫn tích hợp CKEditor và CKFinder chuẩn nhất cho Laravel

Hướng dẫn tích hợp CKEditor và CKFinder chuẩn nhất cho Laravel

CKEditor là gì ?

CKEditor là một trình soạn thảo mã nguồn mở theo kiểu WYSIWYG của CKSource. Trình soạn thảo này có thể tích hợp vào các web site mà không cần cài đặt.

CKFinder là gì

CKFinder là một bộ công cụ mạnh mẽ dùng để upload, quản lý ảnh. Ngoài khả năng quản lý file trên hệ thống, chúng ta có thể tích hợp CKFinder vào thư viện CkEditor để dễ dàng chèn ảnh vào bài viết.

Trong nội dung bài viết này mình sẽ hướng dẫn các bạn cách tích hợp CKEditor CKFinder cho Laravel.

1. Cài đặt CKEditor

Trong phần này mình sẽ hướng dẫn các bạn tích hợp CKEditor 4, vì theo cảm nhận của cá nhân mình bản 4 dễ sử dụng hơn rất nhiều so với bản 5.

Trước tiên các bạn cần download CKEditor 4 về máy tính: Download CKEditor 4

Sau khi download các bạn giải nén thư mục ckeditor vào trong folder public của Laravel

ckeditor

Tiếp theo chúng ta để đó và chuyển sang bước 2 cài đặt CKFinder

2. Cài đặt CKFinder

a. Cài đặt CKFinder

Trên mạng hiện nay có rất nhiều hướng dẫn tích hợp CKFinder bằng cách tải file CKFinder về giải nén vào project, tuy nhiên theo cá nhân mình cách này không ổn và khó bảo mật cho CKFinder. Trong phần này mình sẽ hướng dẫn các bạn sử dụng Package CKFinder do chính nhà phát triển cung cấp: https://ckeditor.com/ckfinder/download/

ckfinder

Để cài đặt package CKFinder các bạn chạy lần lượt 2 lệnh sau

composer require ckfinder/ckfinder-laravel-package
php artisan ckfinder:download

Sau khi quá trình cài đặt và download hoàn tất chạy tiếp lệnh sau để xuất file css, js và file config

php artisan vendor:publish --tag=ckfinder

Cuối cùng tạo thư mục userfiles bên trong public của Laravel

userfiles

b. Tạo Middleware

Tiếp theo chúng ta cần tạo Middleware bảo mật cho CKFinder. Để tạo Middleware các bạn chạy lệnh sau:

php artisan make:middleware CustomCKFinderAuth

Sửa lại nội dung file App\Http\Middleware\CustomCKFinderAuth giống như sau:

public function handle($request, Closure $next)
{
    config(['ckfinder.authentication' => function() {
        return true;
    }]);
    return $next($request);
}

Để tăng cường bảo mật các bạn cũng có thể custom một chút đại loại như sau:

public function handle($request, Closure $next)
    {
        if (\Auth::check()) {
            config(['ckfinder.authentication' => function() use ($request) {
                return true;
            }] );
        } else {
            config(['ckfinder.authentication' => function() use ($request) {
                return false;
            }] );
        }

        return $next($request);
    }

Như vậy chỉ user đã login mới sử dụng được CKFinder, các bạn có thể tùy chỉnh theo ý mình.

c. Cấu hình CKFinder

- Tiếp theo các bạn mở file /config/ckfinder.php và tìm đến dòng sau

$config['authentication'] = '\CKSource\CKFinderBridge\CKFinderMiddleware';

Sửa lại nó trỏ tới Middleware các bạn đã tạo ở bước trước, ví dụ như sau

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

* Chú ý: Các bạn lưu ý CKFinder là phần mềm trả phí nên với package CKFinder có thể sẽ cần phải điền licenseName và licenseKey. Để lấy 2 thông tin này các bạn có thể truy cập: https://ckfinder.sanvu88.net/ sau khi có 2 thông số trên các bạn điền vào file /config/ckfinder.php

/*============================ License Key ============================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_licenseKey

$config['licenseName'] = '';
$config['licenseKey']  = '';

 

3. Tích hợp CKEditor và CKFinder vào Laravel

Tạo file view test.blade.php với nội dung như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=UTF-8>
    <title>Document</title>
</head>
<body>
    <textarea name=text id="text" cols="30" rows="10"></textarea>
    <script src={{ url('ckeditor/ckeditor.js') }}></script>
    <script>
    CKEDITOR.replace( 'text', {
        filebrowserBrowseUrl: '{{ route('ckfinder_browser') }}',

    } );
    </script>
    @include('ckfinder::setup')
</body>
</html>

Tạo tiếp route

Route::get('/test', function () {
    return view('test');
});

Tiến hành truy cập vào trang test để kiểm tra kết quả:

ckfinder-1ckfinder-2

Post Comment