Tích hợp KCFinder vào CKEditor trên Codeigniter 3

Xin chào các bạn,

Việc tích hợp các trình các WYSIWYG Editor vào website để tối ưu hóa việc viết bài, cũng như chèn ảnh vào bài viết đang ngày càng phổ biến và gần như không thể thiếu với mỗi website. Tuy nhiên các công cụ này hầu như không tích hợp sẵn các công tụ Upload ảnh trực tiếp từ thiết bị, hoặc chỉ có các plugin kèm theo nhưng tính phí.

Bài viết ngắn dưới đây tôi tổng hợp cách tích hợp plugin upload ảnh miễn phí KCFinder vào CKEditor, đã chạy thử thành công, hi vọng sẽ hữu ích với những bạn đang cần.

Với những thiết lập dưới đây ta có thể:

- Tích hợp được KCFinder (free) vào CKEditor thay vì CKFinder (mất phí)

- Phân loại thư mục upload ảnh dựa vào session login của từng User

Chú ý nội dung

- Được thực hiện trên Codeigniter 3 

- Các phiên bản CKEditor 4.6.2  & KCFinder 3.12 tại thời điểm 04/2017 

- Tập trung vào việc tích hợp KCFinder trên CKEditor, nên quá trình cài đặt CKEditor xem như đã hoàn tất

Chuẩn bị

Tải CKEditor (Standard, Full...) tại: http://ckeditor.com/download 

Tải KCFinder tại: https://kcfinder.sunhater.com/download 

Cài đặt CKEditor 

Giải nén kcfinder và chép vào thư mục ngang hàng với ckeditorSau khi làm xong kết quả như hình dưới (cấu trúc trên website của tôi)

Cấu hình

1. Mở file config.js trong ckeditor, thêm vào như dưới đây

CKEDITOR.editorConfig = function( config ) {      
      //KCFinder      
      config.filebrowserBrowseUrl = '/public/admin/plugins/kcfinder/browse.php?opener=ckeditor&type=files';      
     config.filebrowserImageBrowseUrl = '/public/admin/plugins/kcfinder/browse.php?opener=ckeditor&type=images';      
     config.filebrowserFlashBrowseUrl = '/public/admin/plugins/kcfinder/browse.php?opener=ckeditor&type=flash';      
     config.filebrowserUploadUrl = '/public/admin/plugins/kcfinder/upload.php?opener=ckeditor&type=files';      
     config.filebrowserImageUploadUrl = '/public/admin/plugins/kcfinder/upload.php?opener=ckeditor&type=images';     
      config.filebrowserFlashUploadUrl = '/public/admin/plugins/kcfinder/upload.php?opener=ckeditor&type=flash';   

    //... (các config khác của CKEditor) 
}

2. Mở file browse.php trong kcfinder, thêm vào vào nội  dung sau:

ob_start(); 
$temp_system_path = '../../../../system';
 $temp_application_folder = '../../../../application'; include('../../../../index.php'); ob_end_clean();

--> đường dẫn trong include, $temp_system_path, $temp_application_folder mục đích trỏ đến file index.php của CI ở thư mục gốc. 

--> Tùy vào đường dẫn thực tế trên website của bạn mà thêm bớt các dấu ../ phía trước cho phù hợp

3. Mở file index.php ở thư mục gốc, sửa như dưới đây:(Nếu không muốn sửa file index.php gốc, các bạn xem ghi chú cuối bài)

Tìm dòng: $system_path = 'system';  

Sửa thành: $system_path = isset($temp_system_path) ? $temp_system_path : 'system';

Tìm dòng: $application_folder = 'application'; 

Sửa thành: $application_folder = isset($temp_application_folder) ? $temp_application_folder : 'application';

--> Có thể thêm dòng mới và comment // dòng cũ

4. Cấu hình SESSION

- Tại action đăng nhập thành công, cùng với việc set SESSION cho user ta thêm vào 2 session ['KCFINDER']['disabled'] = false; và ['KCFINDER']['uploadURL'] = 'duong/dan/den/thu/muc/upload';

// Check xong thông tin login 

// Set data for session 

$sess_data = array(
       'id' => $id,
       'fullname' => $user_fullname,
       'KCFINDER' => array(
              'disabled' => false, // Bật kcfinder cho phép upload (mặc định = true;)                                                   
              'uploadURL' => base_url().'uploads/images/'.$user_fullname
        ) 
);

// Hoặc có thể nhập theo cách dưới đây 

$sess_data['id'] = $id;
$sess_data['fullname'] = $user_fullname; 
$sess_data['KCFINDER']['disabled'] = false; 
$sess_data['KCFINDER']['uploadURL'] = base_url().'uploads/images/'.$user_fullname;

// Sau khi nhập xong, thực hiệt set session 

$this->session->set_userdata($sess_data);

5. Kết quả

Sau khi thực hiện xong, vào phần soạn thảo với CKEditor, nhấp vào nút chèn ảnh, sẽ có kết quả như hình dưới

Nhấn vào nút Duyệt máy chủ (Browse Server), sẽ cho ta upload và quản lý ảnh 

** Ghi chú về file index.php

Nếu các bạn không muốn sửa trực tiếp trên file index.php ở thư mục gốc, hãy copy nó dán vào thư mục nào đó trong kcfinder, ví du thư mục config. 

Sau khi copy index.php xong sửa 2 dòng:

$system_path = '../../../../system'; // Trỏ về thư mục system 

$application_folder = '../../../../application'; //Trỏ về thư mục application

Sau đó mở file browse.php phía ngoài thư mục kcfinder xóa 2 dòng: 

(Nếu bạn bỏ qua cấu hình phía trên thì không có 2 dòng này)

$temp_system_path = '../../../../system';  
$temp_application_folder = '../../../../application'; 

Sau đó sửa nội dung include thành: indclue(config/index.php);

Kết thúc bài viết, chúc các bạn thực hiện thành công!

./.

Một số link đã tham khảo:

http://stackoverflow.com/questions/31006756/codeigniter-3-access-session-from-outside-codeigniter-installation 

https://kcfinder.sunhater.com/integrate

</KT_201704> 

** Update (Codeigniter 3.1.7)

Mở file browse.php của KCFinder, sau dòng ob_end_clean(), thêm vào nội dung dưới đây:

Nếu sử dụng session driver là files (application/config/config.php)

$CI =& get_instance();
$CI->load->library('session');

Nếu sử dụng session driver là database

$CI =& get_instance();
$CI->db = $CI->load->database('default', TRUE); //TRUE mean: enable Query Builder
$CI->load->library('session');

Tích hợp KCFinder vào CKEditor trên Codeigniter 3

Với những thiết lập dưới đây ta có thể:

Chú ý nội dung

Chuẩn bị

Bài viết Tích hợp KCFinder vào CKEditor trên Codeigniter 3

Boss Kinh Doanh

Chia sẻ bài viết

Cùng Chuyên Mục