Cách gắn ckeditor và ckfinder vào website

April 28th, 2012

Goto commentsLeave a comment

1. Cách gắn ckeditor:

B1: Bạn download bộ ckeditor về,  link: http://ckeditor.com/download, và để vào website của bạn (ví dụ: folder includes)

B2: Trong file code của bạn, chổ nào bạn muốn thẻ textarea biến thành ckeditor thì, trên đầu file đó (trong phần header) bạn include  file ckeditor.js, như sau:

Giả sử textarea của bạn có id là summary, phía dưới textarea đó bạn cho đoạn code sau vào

B3: Xong, bạn nhấn refresh lại trang web để xem kết quả nhé.

B4: Cấu hình cho ckeditor, bạn hãy mở file ckeditor/config.js lên, tìm đến function sau đây

CKEDITOR.editorConfig = function( config )
{
}

để thêm vào các dòng code sau nhé:

+ Nếu muốn đổi skin cho ckeditor:

config.skin=’v2′; 

+ Mặc định thì ckeditor sẽ chèn thẻ p vào trước phần văn bản của ta, nếu bạn muốn loại bỏ thẻ p này thì cho dòng code sau vào:

config.enterMode = CKEDITOR.ENTER_BR;

+ Nếu muốn xóa bớt các nút của ckeditor, bạn cho dòng sau đây vào, rồi xóa đi các nút không cần thiết

config.toolbar_Full =
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
‘/’,
['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','-','About']
];

Các bạn có thể xem thêm các cấu hình khác trong folder _sample của ckeditor

2. Cách gắn ckfinder:

Mặc định bộ ckedior khi ta insert hình ảnh vào thì nó không có nút browser  để chúng ta upload hình từ máy lên server, để giải quyết bài toán này các bạn download bộ ckfinder về và để vào chung folder với ckeditor, link download: http://ckfinder.com/download

Để ckfinder hoạt động ta tiến hành các cấu hình sau:

B1: Mở lại file ckeditor/config.js của ckeditor và thêm vào các dòng cấu hình 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’;

B2: Mở file ckfinder/config.php lên, và chỉnh các thông số sau:

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

Chú ý là phải có dấu / ở trước và sau đường dẫn.

Ví dụ: Nếu bạn đã upload lên host, và thư mục upload của bạn năm ở ngoài gốc luôn thì ta chỉnh là:

$baseUrl = ‘/upload/’;

Còn nếu bạn đang chạy trên localhost, và thư mục upload đang nằm ở vị trí c:\wamp\www\vidu\upload thì baseUrl sẽ là:

$baseUrl = ‘/vidu/upload/’

Đến đây  tạm xong cơ bản phần gần ckfinder vào ckeditor, bạn thử insert một tấm hình xem có nút browser chưa nhé.

Nếu khi chạy lên, ckfinder báo lỗi: The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file.

Cách khắc phục nhanh như sau: bạn hãy mở lại file ckfinder/config.php, tìm đến function CheckAuthentication(), đóng lại (comment) tất cả những dòng code đang có trong function đó, rồi viết vào đó dòng return true, như  sau:

function CheckAuthentication()
{

// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];

// … where $_SESSION['IsAuthorized'] is set to “true” as soon as the

return true;
}

Đây là  hàm ckfinder dùng để kiểm tra xem người dùng có đăng nhập vào hệ thống hay chưa, nếu có rồi thì mới cho người dùng upload, còn không thì sẽ hiển thị ra thông báo lỗi như ở trên.

Nếu trong hàm này,bạn chỉ có một dòng code là return true, thì đồng nghĩa với việc không cần kiểm tra  login.

Giả sử trong website của bạn, để kiểm tra xem người dùng có đăng nhập hay chưa, bạn kiểm tra dựa vào $_SESSION['LOGIN'] == ‘DONE’ thì ta có thể chỉnh lại hàm trên như sau

function CheckAuthentication()
{

if ($_SESSION['LOGIN'] == ‘DONE’) return true;
else return false;

//hoặc bạn cũng có thể viết nhanh là: return ($_SESSION['LOGIN']==’DONE’);

}

Xong.