Hướng dẫn sử dụng ckeditor php

Chú ý: Tất cả các bài viết đều được viết dựa trên Laravel 5.8, 6.x. Các tutorial được tổng hợp và dịch từ nhiều nguồn khác nhau và đã được test.

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ảonày có thể tích hợp vào các web site mà không cần cài đặt.Bạn đang xem: Hướng dẫn chèn ckeditor vào php

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.

1. Cài đặtCKEditor

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

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

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

2. Cài đặtCKFinder

a.

Bạn đang xem: Hướng dẫn sử dụng ckeditor php

Xem thêm: Hướng Dẫn May Váy Cưới Đơn Giản, Sang Trọng Cho Mùa Cưới 2021

Xem thêm: Bài Giảng Hướng Dẫn Sử Dụng Matlab 7.0, Hướng Dẫn Sử Dụng Phần Mềm Matlab 7 0

Cài đặtCKFinder

Trên mạng hiện nay có rất nhiều hướng dẫn tích hợpCKFinder bằng cách tải fileCKFinder 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 choCKFinder. Trong phần này mình sẽ hướng dẫn các bạn sử dụng PackageCKFinder 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-packagephp 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ụcweb1_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 CustomCKFinderAuth

Sửa lại nội dung fileAppHttpMiddlewareCustomCKFinderAuth giống như sau:

public function handle($request, Closure $next){ config( 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( function() use ($request) { return true; }> ); } else { config( function() use ($request) { return false; }> ); } return $next($request); }

Như vậy chỉ web1_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ìnhCKFinder

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

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

$config = “AppHttpMiddlewareCustomCKFinderAuth”;* 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ềnlicenseName 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 = “”;$config = “”;

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

Tạo file view test.blade.php với nội dung như sau:
Chuyên mục: Kiến thức