Tích hợp CKEditor vào CodeIgniter

Việc tích hợp CKEditor vào website giúp đơn giản hóa quá trình xử lý bài viết cho website. Nếu không có các editor dạng CKEditor chắc chắn việc biên tập nội dung sẽ không hề đơn giản. Trong bài này chúng ta sẽ tìm hiểu cách tích hợp CKEditor vào CodeIgniter.

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

Bản CodeIgniter theo mô hình HMVC, chi tiết tại bài Hướng dẫn cài đặt mô hình HMVC trên CodeIgniter
Notepad++ phiên bản mới nhất http://filehippo.com/download_notepad
CKEditor phiên bản mới nhất http://ckeditor.com/download
Jquery phiên bản mới nhất http://jquery.com/download/

Chúng ta sẽ thực hiện tích hợp bằng các bước như dưới đây.

1. Download bộ công cụ CKEditor.

Các bạn truy cập vào link ở trên để download bộ CKEditor mới nhất về. Chúng ta nên download bản standard vì nó có khá đầy đủ chức năng và khá là nhẹ.

Các bạn cũng sẽ phải download thêm bộ thư viện jquery về để tích hợp vào. Vì CKEditor phải có jquery mới có thể hoạt động được.

Sau khi download và giải nén ra ta có được một bộ ckeditors và bộ jquery.min.js.

Các bạn copy bộ ckeditors vào trong thư mục public và jquery.min.js vào thư mục public/js. Cấu trúc như hình dưới

2. Tạo mô-đun article.

Chúng ta tạo một mô-đun tên là article trong thư mục modules với cấu trúc như sau.

Trong thư mục controllers chúng ta sẽ tạo một file tên là article.php, và copy đoạn code bên dưới vào.

<?php 

class Article extends CI_Controller
{

 public function __construct()
 {
  parent::__construct();
 }
 
 
 public function index()
 {
  $this->load->view('article-template');
 }
 
}

Trong thư mục views chúng ta tạo một file tên là article-template.php, với nội dung là

<!DOCTYPE html>
<html lang="en">
<head>
 <style type="text/css">
  #body{margin:10px auto; width: 800px; font-size: 90%; }
  form {width: 600px; margin: 40 auto;}
  form div{padding: 0 0 5px 0;}
  label {width: 120px; display: block; float: left; clear: left; font-weight: bold;}
  span.error p{width: auto; padding: 0 0 0 120px; font-style: italic; color: red; font-size: 90%;}
  span.success {color: green;}
  .form{ width: 150px;}
 </style>
 <meta charset="utf-8">
 <title>Thủ thuật Việt Nam | Hướng dẫn tích hợp CKEditor vào CodeIgniter</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>
</head>
<body>
 <div id="body">
  <h2>Hướng dẫn tích hợp CKEditor vào CodeIgniter</h2>
  <form action="" method="post" id="form">
   <fieldset>
    <legend>Hướng dẫn tích hợp CKEditor vào CodeIgniter</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="Save changes" /></div>
   </fieldset>
  </form>
 </div>
</body>
</html>
<script type="text/javascript">
 $(function() {                
  if(CKEDITOR.instances['txt_content']) {      
   CKEDITOR.remove(CKEDITOR.instances['txt_content']);
  }
  CKEDITOR.config.width = 600;
     CKEDITOR.config.height = 150;
  CKEDITOR.replace('txt_content',{});
 })
</script>

3. Thiết lập route của hệ thống.

Để truy cập được vào module article ta cần điều hướng lại hệ thống.

Các bạn mở file routes.php trong thư mục config. Sau đó thêm đoạn mã sau đây vào.

// editor
$route['article']    = "article/index";

3. Chạy chương trình trên trình duyệt.

Để kiểm tra kết quả việc tích hợp CKEditor vào CodeIgniter như thế nào, chúng ta mở firefox ra và gõ đường link sau vào http://localhost/ci-test/article/

Kết quả sẽ như bên dưới nếu các bạn cấu hình đúng các bước như trên.