Hướng dẫn tích hợp CKEditor và CKFinder vào Website
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:
<script language=”javascript” src=”[đường dẫn đến folder ckeditor]/ckeditor/ckeditor.js” type=”text/javascript”></script>
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
<script type=”text/javascript”>CKEDITOR.replace( ‘summary‘); </script>
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 ) {
// chuẩn bị thêm các dòng cấu hình vào đây
}
để thêm vào các dòng code sau nhé:
+ Nếu muốn đổi skin cho ckeditor:
config.skin=’v2′; // có thể đổi thành 1 trong 3 giá trị sau: v2, kama, office2003
+ 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:wampwwwviduupload 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() {
// 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;
}
Có thể bạn quan tâm:
- Git là gì? Những lợi ích của việc dùng Git?
- Bộ tài liệu Python cơ bản đến nâng cao
- [Ebook] Tập làm quen với Nodejs
- 13 mẹo tự học lập trình
- Kết quả sổ xố kiến thiết miền Nam hôm nay
- Các lệnh git cơ bản mà mọi lập trình viên nên biết
- Tool download video from youtube
- Các Hosting miễn phí chất lượng nên dùng
- Sự nhầm lẫn giữa website và webapp
- Câu lệnh điều kiện rẽ nhánh
Whois Domain
Đánh giá - Bình luận: