Hướng dẫn cài đặt CKEditor 4 và CKFinder trong Laravel 5. Một số thay đổi về bảo mật của XAMPP PHP 7.1 khiến cho việc tích hợp và cài đặt CKFinder 3 vào CKEditor 4 trong dự án Laravel gặp khá nhiều khó khăn.
Giả sử rằng các bạn đã có 1 dự án Laravel 5.5, chạy trên XAMPP (PHP 7.1). Mình sẽ lấy ví dụ về view tạo bài viết để thực thi tích hợp CKFinder 3 vào CKEditor 4.
Chúng ta có route trong file web.php như sau :
Route::resource('/posts','PostController');
Trong PostController.php sẽ là :
public function create(){
return view('posts.create');
}
Tải CKEditor 4 tại đây.
Tải CKFinder 3 tại đây.
Lưu trữ cả 2 vào thư mục public của dự án Laravel. Ví dụ trên Mac OS: /Applications/XAMPP/htdocs/du-an-laravel/public/js. Ví dụ trên Windows là: C://xampp/htdocs/du-an-laravel/public/js. Giải nén 2 thư mục vừa tải về.
<!DOCTYPE html>
<html>
<body>
<h1>Create Post View</h1>
<form>
<textarea name="content" id="editor" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
<script src="{{asset('js/ckeditor/ckeditor.js')}}"></script>
<script src="{{asset('js/ckfinder/ckfinder.js')}}"></script>
<script>
CKEDITOR.replace('editor', {
filebrowserBrowseUrl: "{{asset('js/ckfinder/ckfinder.html')}}",
filebrowserUploadUrl: "{{asset('js/ckfinder/core/connector/php/connector.php?
command=QuickUpload&type=Files')}}"});
</script>
</body>
</html>
Mình đã nhúng CKEditor và nhúng CKFinder theo hướng dẫn theo tài liệu của CKEditor và CKFinder. Tuy nhiên, mọi thứ sẽ không hoạt động được nếu thiếu các bước sau:
Cấp quyền cho các thư mục có liên quan đến logs, CKEditor, CKFinder,… trong Laravel ( một số máy Mac và Linux sẽ phải cấp quyền ).
Chỉnh sửa trong file : /du-an-laravel/public/js/ckfinder/config.php như sau:
Dòng 28:
$config['authentication'] = function () {
return true;
};
Dòng 66:
$config['backends'][] = array(
'name' => 'default',
'adapter' => 'local',
'baseUrl' => 'your-url/ckeditor-ckfinder/public/ckfinder/userfiles/.ckfinder/temp',
'chmodFiles' => 0777,
'chmodFolders' => 0755,
'filesystemEncoding' => 'UTF-8',
);
Dòng 161:
$config['tempDirectory'] = __DIR__ . '/userfiles/.ckfinder/temp';
3. Chỉnh sửa trong file : /du-an-laravel/public/js/ckfinder/core/connector/php/vendor/cksource/ckfinder/src/CKSource/CKFinder/Config.php, dòng 183:
'tempDirectory' => __DIR__ . '/userfiles/.ckfinder/temp',
Phần hướng dẫn chi tiết sẽ có trong buổi học. Chúc các bạn may mắn.
Discussion about this post