Tích hợp CKFinder 3 vào CKEditor 4 trong dự án Laravel 5.5 + XAMPP (PHP 7.1)

laravel-ckeditor-ckfinder

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 CKFinder 3 vào CKEditor 4 gặp khá nhiều khó khăn.

laravel-logo
laravel-logo

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 máy mình ( Mac OS ) : /Applications/XAMPP/htdocs/aptech-php-16-namnh/php/12-2019-02-14/ckeditor-ckfinder/public, trên một số máy windows có thể là : C://xampp/htdocs/aptech-php-16-namnh/php/12-2019-02-14/ckeditor-ckfinder/public. Giải nén 2 thư mục vừa tải về.

Trong view create.blade.php như sau :

<!DOCTYPE html>
<html>

<body>
  <h1>Create Post View</h1>
  <form>
    <textarea name="editor1" id="editor1" rows="10" cols="80">
        This is my textarea to be replaced with CKEditor.
    </textarea>
  </form>
  <script src="{{asset('ckeditor/ckeditor.js')}}"></script>
  <script src="{{asset('ckfinder/ckfinder.js')}}"></script>
  <script>
    CKEDITOR.replace('editor1', {
    filebrowserBrowseUrl: "{{asset('/ckfinder/ckfinder.html')}}",
    filebrowserUploadUrl: "{{asset('/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 tại documentation 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 :

  1. 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 ).
  2. Chỉnh sửa trong file : /duong-dan-toi-laravel/public/ckfinder/config.php như sau :
file config.php
// dòng 28
$config['authentication'] = function () {
    return true;
};
// dòng 66
$config['backends'][] = array(
    'name' => 'default',
    'adapter' => 'local',
    'baseUrl' => '/aptech-php-16-namnh/php/12-2019-02-14/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 : /duong-dan-toi-laravel/public/ckfinder/core/connector/php/vendor/cksource/ckfinder/src/CKSource/CKFinder/Config.php

file 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.

Gửi phản hồi

%d bloggers like this: