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.
Table of Contents
Lưu ý
Đây là một bài viết mình tìm thấy trên group lập trình Web Developer Việt Nam, đối với mình đây là một trong những bài viết thực sự chia sẻ rất nhiệt tình và tâm huyết giúp mình giải quyết vấn đề lớn trong việc tích hợp session của codeigniter với kcfinder trong khoảng thời gian đầu làm việc với CI3.
Về thông tin cụ thể thì mình sẽ phân tích kỹ hơn chút ở dưới đây:
Bắt đầu từ Codeigniter 3.x thì thông tin về session của Codeigniter không còn như trước, cấu trúc session của Codeigniter 3.x được viết lại theo chuẩn của nó. Vì thế các thành phần code tích hợp vào đều sẽ thất bại. Cách giải quyết nó là can thiệp vào source của Codeigniter để viết, nhưng không khuyến khích chọn giải pháp này. Vì về lâu dài code thay đổi sẽ kéo theo nhiều thứ rắc rối.
Vậy giải pháp nào cho việc này? khi ta vẫn muốn tích hợp KCFinder trong Codeigniter 3?
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 ckeditor.
- Sau 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ện 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
** Update 2018-03 (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');