Cách tích hợp CKFinder vào CodeIgniter

CKFinder là một bộ công cụ mạnh mẽ dùng để upload, quản lý ảnh. Trong khi đó CKEditor lại là editor biên soạn nội dung mạnh mẽ, và việc tích hợp CKFinder vào bộ CKEditor sẽ giúp việc biên soạn nội dung trở nên đơn giản hơn rất nhiều..

Như bạn đã biết bài viết không thể thiếu hình ảnh, khi lời nói không thể mô tả được hết điều bạn muốn diễn đạt, hình ảnh là biện pháp hữu hiệu. CKFinder có giao diện quản lý ảnh thân thiện, dễ sử dụng. Bài viết hướng dẫn tích hợp CKFinder vào CKEditor.

Các công cụ cần thiết.

Module chương trình chứa CKEditor, chi tiết tại bài Tích hợp CKEditor vào CodeIgniter
Notepad++ phiên bản mới nhất http://filehippo.com/download_notepad
Bộ CKFinder mới nhất http://cksource.com/ckfinder/download/

Các bước thực hiện việc tích hợp CKFinder.

1. Download bộ CKFinder.

Các bạn truy cập theo link ở trên để download bộ CKFinder về. Sau đó các bạn giải nén file download ra và copy bộ CKFinder vào thư mục public theo cấu trúc như hình bên dưới.

2. Cấu hình cần thiết.

Để CKFinder hoạt động được, các bạn cần phải cấu hình và cài đặt CKEditor trước. Các bạn hãy xem lại bài tích hợp CKEditor vào CodeIgniter để tìm hiểu chi tiết.

Tiếp theo, các bạn cần load bộ CKFinder lên, bằng cách sử dụng đoạn mã sau.

<script type="text/javascript" src="<?php echo base_url();?>public/ckfinder/ckfinder.js"></script>

Và chi tiết toàn bộ file template các bạn có thể thấy trong đoạn chương trình bên dưới.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Thủ thuật Việt Nam</title>
<script type="text/javascript" src="<?php echo base_url();?>public/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>public/ckeditors/ckeditor.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>public/ckfinder/ckfinder.js"></script>
</head>
<body>
 <div id="body">
 <h2>Cách tích hợp CKFinder vào CodeIgniter</h2>
 <form action="" method="post" id="form">
 <fieldset>
  <legend>Sử dụng CKFinder trên CodeIgniter project</legend>
  <div>
  <span class="right"><textarea id="txt_content" name="txt_content"  style="width:100%; height:200px;"></textarea></span>
  </div>
  <div><input type="submit" id="save" value="Submit" /></div>
 </fieldset>
 </form>
 </div>
</body>
</html>
<script type="text/javascript">
$(function() {                
var editor = CKEDITOR.replace('txt_content',
{
filebrowserBrowseUrl : '<?php echo base_url()."public/ckfinder/ckfinder.html"; ?>',
filebrowserImageBrowseUrl : '<?php echo base_url()."public/ckfinder/ckfinder.html?Type=Images";?>',
filebrowserFlashBrowseUrl : '<?php echo base_url()."public/ckfinder/ckfinder.html?Type=Flash" ?>',
filebrowserUploadUrl : '<?php echo base_url()."public/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files"?>',
filebrowserImageUploadUrl : '<?php echo base_url()."public/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images";?>',
filebrowserFlashUploadUrl : '<?php echo base_url()."ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash";?>',
filebrowserWindowWidth : '800',
filebrowserWindowHeight : '480'
});
CKFinder.setupCKEditor( editor, "<?php echo base_url().'public/ckfinder/'?>" );
})
</script>

Trong đó.

Đoạn var editor = CKEDITOR.replace('txt_content', {}) dùng để tải bộ CKEditor thay thế cho thành phần textarea có name và id là 'txt_content'. Chúng ta có thể truyền các tham số giá trị để thiết lập cho bộ CKFinder sẽ tích hợp vào như đoạn chương trình ở trên.
Đoạn CKFinder.setupCKEditor( editor, "<?php echo base_url().'public/ckfinder/'?>" ) dùng để liên bộ CKFinder với CKEditor.

3. Thiết lập lại việc Authentication trong file config của CKFinder.

Để CKFinder hoạt động được, chúng ta cần phải làm thêm một bước nữa đó là thiết lập lại giá trị Authentication của CKFinder.

Các bạn mở file config.php trong thư mục ckfinder và chỉnh sửa lại giá trị trả về của hàm CheckAuthentication() từ false thành true

4. Kiểm tra kết quả.

Các bạn nhập đường link sau đây vào trình duyệt để xem kết quả.

http://localhost/ci-test/article/