Tích hợp ckeditor và ckfinder vào framework codeigniter

Như chúng ta đã biết, khi lập trình các website ở hầu hết tất cả các lĩnh vực như: tin tức, bán hàng, thương mại điện tử ... thì việc cài đặt trình soạn thảo văn bản nội dùng đều phải có. Hôm nay mình sẽ giới thiệu cho các bạn tích hợp ckeditor phiên bản mới nhất là 4.5.8 - standard và quản lý hình ảnh với ckfinder bản mới nhất 3.3.0 php vào framework codeigniter.

Bước 1: Các bạn vào download ckeditor 4.x trở đi cho mới mẻ nhé và ckfinder 3.x nhé. http://ckeditor.com/download và https://cksource.com/ckfinder/download

Bước 2: Sau khi download về giải nén ta được hai thư mục ckfinder và ckeditor các bạn copy hai thu mục này vào public->admin->plugins. Nếu chưa có thư mục plugins thì các bạn tạo nhé. 

Bước 3: import file ckeditor.js trong thưc mục ckeditor vào trang view mà bạn muốn hiện thị ckeditor, chú ý để chạy được ckeditor các bạn cần tạo thẻ textarea với class ckeditor nhé.

Bước 4: tích hợp ckfinder và ckeditor. Mặc định ckeditor không thể chèn hình ảnh vào trình soản thảo, để chèn được ta phải tích hợp thêm ckfinder vào, Cái này rất đơn giản, các bạn copy đoạn code này vào dưới thẻ textarea mà muốn sử dụng ckfinder


                                    var editor = CKEDITOR.replace('ckfinder',{
                                      language:'vi',
                                      filebrowserBrowseUrl :'../../public/admin/plugins/ckfinder/ckfinder.html',
 
                                      filebrowserImageBrowseUrl : '../../public/admin/plugins/ckfinder/ckfinder.html?type=Images',
                                       
                                      filebrowserFlashBrowseUrl : '../../public/admin/plugins/ckfinder/ckfinder.html?type=Flash',
                                       
                                      filebrowserUploadUrl : '../../public/admin/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
                                       
                                      filebrowserImageUploadUrl : '../../public/admin/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
                                       
                                      filebrowserFlashUploadUrl : '../../public/admin/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',

                                    });

Note: Chữ bôi đỏ ckfinder là name="ckfinder" của thẻ textarea nhé. tùy vào các bạn dùng tên gì thay thế cho đúng là ok.
 Đoạn code này bọc trong thẻ script nhé.và trong video mình có giải thích rõ về cách hoạt động của ckfinder và ckeditor rồi nhé

Đây là video hướng dẫn chi tiết , các bạn xem video và làm theo nhé.

Trên đây là những gì cơ bản nhất về ckfinder và ckeditor. Sau khi nắm vững cơ bản rồi bạn sẽ làm được rất nhiều điều, quản lý ảnh upload lên bới ckfinder chẳng hạn, giống wordpress hay mengento,joomla sử dụng để quản lý ảnh, hoặc các bạn có thể vào đây downcode mình share về website bán hàng chuẩn seo, tích hợp quản lý ảnh bới ckfinder rất tối ưu. 

https://maytinhtandat.com/tin-tuc/chia-se-template-website-ban-hang-chuan-seo.html

https://maytinhtandat.com/tin-tuc/code-website-ban-hang-danh-muc-3-cap-toi-uu-seo.html

Bạn nào xem code mà vẫn ko làm được thì comment dưới bài náy, nếu nhiều bạn yêu cầu mình sẽ quay video hướng dẫn cho các bạn.

Source code của bài này: bai-3-codeigniter-2017.zip  ckeditor + ckfinder

  • Tác giả: Admin
  • 09/06/2017