Tích hợp Ckfinder vào CKEditor Bằng Javascript

Trong bài này chúng ta sẽ tìm hiểu cách tích hợp CKFinder vào CKEditor bằng cách cấu hình file config.js một cách đơn giản mà hiệu quả. Nhưng trước tiên chúng ta cần tìm hiểu một số điểm của ckfinder đã nhé.

1. Một số lưu ý khi tích hợp ckfinder vào ckeditor

Thứ nhất: Tất cả các request của ckfinder đều chạy qua file connector.php nằm trong thư mục ckfinder/core/connector/php/connector.php, như vậy trên thực tế muốn can thiệp vào Ckeditor thì ta chỉ cần lưu ý đến file này, hay thầm chí bảo mật ckfinder cũng liên quan đến file này.

Thứ hai: Mặc định khi bạn hiển thị popup của ckfinder nó sẽ chạ file ckfinder.html nằm trong thư mục ckfinder/ckfinder.html. Nên nếu như Hacker biết đường dẫn mà bạn không cấu hình bảo mật cho ckfinder thì toàn bộ nới chữa media (hình ảnh, file) của bạn sẽ bị hacker thấy nên rất nguy hại đến website. Nếu hacker giỏi up shell lên thì coi như đi cả trang web.

Thứ ba: Ckfinder nhận dạng các request thông qua các tham số truyền trên URL, từ đó mà nó sẽ xác định là lấy thể loại nào (images, file, flash). Điển hình là:

• connector.php?type=Images: Tương ứng chọn thể loại images
• connector.php?type=Files : Tương ứng chọn thể loại files
• connector.php?type=Flash: Tương ứng chọn thể loại flash

Ở trên mình nhắc đến thể loại nhưng có lẽ bạn không biết nó là gì. Bạn thử mở file ckfinder/config.php và tìm đến đoạn code $config['ResourceType'], Tại đây bạn muốn định nghĩa bao nhiêu loại thì tùy thích, mặc định nó có 3 loại là Files, Images và flash. Hy vọng một ngày nào đó mình sẽ hướng dẫn bạn cấu hình nâng cao.

2. Cấu hình tích hợp ckeditor  vào website

Gắn ckeditor vào website

Bước 1: Bạn cần download bộ source ckeditor tại trang chủ ckeditor và đưa vào trong hệ thống source webite của bạn. Sau đó bạn sẽ import vào file cần hiển thị ckeditor.

Bước 2: Tạo thẻ textarea hoặc một thẻ bất kỳ có id là content (bạn có thể đổi tùy thích), sau đó code một đoạn bên dưới thẻ đó như sau:

CKEDITOR.replace( 'content'); 

Lưu ý với bạn rằng ID phải duy nhất nhé.

Bước 3: Bạn nhấn F5(Refresh) lại trang sẽ thấy thành quả của bạn như hình dưới đây:

3. Cấu hình cho ckeditor

Bây giờ muốn cấu hình cho ckeditor bạn sẽ vào file ckeditor/config.js, tại đây bạn sẽ có những thông số cấu hình thông dụng sau:

Đổi skin

Để đổi skin (giao diện) bạn sẽ đổi thông số config.skin='v2', sẽ có ba sự lựa chọn là v2, kama, office2003.

Thêm, bớt các toolbar

 config.toolbar = [
                                    ['Source','Preview','Templates'],
                                    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
                                    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                                    '/',
                                    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
                                    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
                                    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                                    ['BidiLtr', 'BidiRtl' ],
                                    ['Link','Unlink','Anchor'],
                                    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
                                    '/',
                                    ['Styles','Format','Font','FontSize'],
                                    ['TextColor','BGColor'],
                                    ['Maximize','ShowBlocks','Syntaxhighlight']
                       ]

Tại đây bạn sẽ bở đi những tool không cần thiết, mặc định là full

Đổi CSS mặc định trong ckeditor

Đôi khi bạn muốn style css cho CKeditor giống với giao diện bên ngoài của bạn thì bạn sẽ sử dụng cách như sau:

CKEDITOR.addCss('textarea{display:block}');
CKEDITOR.addCss('code{border:solid 1px !important}');

Bên trong là những đoạn CSS mà bạn muốn style

4. Tích hợp ckfinder vào ckeditor 

Bây giờ là bước quan trọng tích hợp ckfinder vào ckeditor, bạn sẽ thực hiện từng thao tác như sau:

Bước 1: Download Ckfinder trên trang chủ của nó và tích hợp vào website của bạn.

Bước 2: Mở lại file ckeditor/config.js và thêm đoạn code sau:

config.filebrowserBrowseUrl = 'http://[tên miền của bạn]/ckfinder/ckfinder.html';

config.filebrowserImageBrowseUrl = 'http://[tên miền của bạn]/ckfinder/ckfinder.html?type=Images';

config.filebrowserFlashBrowseUrl = 'http://[tên miền của bạn]/ckfinder/ckfinder.html?type=Flash';

config.filebrowserUploadUrl = 'http://[tên miền của bạn]/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';

config.filebrowserImageUploadUrl = 'http://[tên miền của bạn]/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';

config.filebrowserFlashUploadUrl = 'http://[tên miền của bạn]/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

Trong đó bạn để ý URL trỏ đến 2 file chính là ckfinder.html và connector.php nằm trong source ckfinder, đây chính là những lưu ý mà mình đề cập ở trên kia.

Bước 3: Mở file ckfinder/config.php và tìm $baseUrl như sau:

$baseUrl = '/[đường dẫn đến folder upload của bạn]/';

Trong đó bạn chú ý đây là đường dẫn tương đối nhé, nên phải có hai dấu / đầu và cuối.

Bước 4: Bảo mật cho ckfinder, đây là bước quan trọng nhất nếu như ban không bảo mật đúng cách thì sẽ phải trả giá đấy nhé.

function CheckAuthentication()
{
// WARNING : DO NOT simply return “true”. By doing so, you are allowing
// “anyone” to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as…
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
// … where $_SESSION['IsAuthorized'] is set to “true” as soon as the
// user logs in your system. To be able to use session variables don’t
// forget to add session_start() at the top of this file.
//return false;
return true;
}

Tại đây bạn sẽ dựa SESSION kiểm tra login hay chưa, nếu chưa thì return fasle và nếu rồi thì return true.

Như vậy là hoàn thành các bước để tích hợp ckfinder vào ckeditor.

5. Lời kết

Đây là cách cấu hình basic rất căn bản nhưng đủ để các bạn có thể bảo mật cho riêng mình. Nhưng nếu bạn muốn chuyên sâu hơn thì ban phải tìm hiểu bộ source của nó, nghĩa là phải nghiên cứu các luồng xử lý của ckfinder, từ đó đưa ra các giải pháp cần thiết cho dự án.