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 và 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
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/
Để 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:downloadSau 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=ckfinderCuối cùng tạo thư mục userfiles bên trong public của Laravel
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 CustomCKFinderAuthSử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ả:
Các bạn copy bài viết sang website khác, vui lòng ghi nguồn VietLaravel.com. Xin cảm ơn.
Post Comment