1. Hướng dẫn sử dụng ckeditor
Đối với với những web developer (nhà phát triền website) việc ứng dụng các WYSIWYG editor vào việc quản trị nội dung cho website dường như là điều bắt buộc. Người dùng có thể dễ dàng cập nhật và định dạng nội dung theo ý muốn một cách dễ dàng như dùng MS Word. Hiện tại có rất nhiều WYSIWYG editor được các nhà phát triển website sử dụng như:- NiceEdit – Một editor nhỏ gọn nhẹ nhàng.
- TinyMCE – Đa chức năng, giao diện giống MS Word.
- CKeditor – đa chức năng, hiện đại.
- YUI Rich Text Editor
- MarkItUp!
- FreeTextBox
- MooEditable
- OpenWysiwyg

ckeditor – giao diện hiện đại, gọn nhẹ.
CKEditor 4.5.5
mọi thứ đã được đơn giản hóa gọn nhẹ hơn trước rất nhiều. Nhưng không vì thế mà nó mất đi tính đa năng, bạn hoàn toàn có thể thêm những tính năng mà bạn muốn nhờ cài thêm plugin cho nó. Hiện tại cộng đồng phát triển cho ra gần 500 plugin các loại phục vụ nhiều công việc khác nhau. Hơn thế nữa ckeditor là dự án open source và hoàn toàn miễn phí.
Trong bài viết này mình sẽ hướng dẫn các bạn nhúng vào website trên PHP. Đầu tiên các bạn vào trang chủ của ckeditor và thử dùng demo của nó.
Sau đó, bạn vào phần download để tải ckeditor về. Hiện tại có 3 gói: , Standard Package, Full Package. Tùy vào nhu cầu sử dụng mà lựa chọn gói cho phù hợp (lưu ý: càng đầy đủ thì số lượng plugin được tích hợp cũng nhiều hơn và nặng hơn).
Video hướng dẫn sử dụng ckeditor
2. Hướng dẫn sử dụng ckfinder
ckeditor là công cụ tuyệt vời. Tuy nhiên, nó không thể hoàn hảo nếu thiếu công cụ ckfinder đi theo. ckfinder là công cụ quản lý các file tài nguyên như: hình ảnh, tài liệu, download…v..v…
ckfinder 3 – quản lý file và hình ảnh
Video hướng dẫn sử dụng và phân quyền cho ckfinder
3. Hàm php để tích hợp ckeditor và ckfinder
Đâu tiên là hàm chuẩn dùng cho code php thuần hoặc các framework khác. Các bạn lưu ý tùy vào code và các lưu trữ của các bạn mà thiết lập lạiurl
cho các link nhúng 2 file ckeditor.js
và ckfinder.html
nhé.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<? /* ckeditor function Write by: LeBang.vn */ function ckeditor($name, $content, $toolbar = 'standard', $language = 'vi', $width = 'auto', $height = 400) { global $ckeditor_loaded; $code = ''; if(!$ckeditor_loaded) { $code.= '<script type="text/javascript" src="asset/ckeditor/ckeditor.js"></script>'; $ckeditor_loaded = true; } $code.= '<textarea name="'.$name.'" id="'.$name.'">'.htmlentities($content).'</textarea>'; $code.= "<script type=\"text/javascript\"> config = {}; config.entities_latin = false; config.language = '".$language."'; config.width = '".$width."'; config.height = '".$height."'; config.filebrowserBrowseUrl = 'asset/ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl = 'asset/ckfinder/ckfinder.html'; "; if($toolbar == 'basic') { $code.= "config.toolbarGroups = [ { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, { name: 'links', groups: [ 'links' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] }, { name: 'insert', groups: [ 'insert' ] }, { name: 'tools', groups: [ 'tools' ] }, { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'styles', groups: [ 'styles' ] }, { name: 'about', groups: [ 'about' ] }, { name: 'forms', groups: [ 'forms' ] }, { name: 'colors', groups: [ 'colors' ] }, { name: 'others', groups: [ 'others' ] } ]; config.removeButtons = 'Checkbox,Radio,TextField,Form,Textarea,Select,Button,ImageButton,HiddenField,SelectAll,Replace,Find,Smiley,Iframe,PageBreak,Flash,ShowBlocks,Save,NewPage,Preview,Print,Templates,Underline,Subscript,Superscript,Language,BidiRtl,BidiLtr,CreateDiv,JustifyCenter,JustifyRight,FontSize,Font,TextColor,BGColor,Cut,Undo,Redo,Copy,Paste,PasteText,PasteFromWord,Scayt,Strike,RemoveFormat,Outdent,Indent,Blockquote,JustifyLeft,JustifyBlock,Image,Table,SpecialChar,HorizontalRule,Styles,Format,About'; "; } elseif ($toolbar == 'standard') { $code.= "config.toolbarGroups = [ { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, { name: 'links', groups: [ 'links' ] }, { name: 'insert', groups: [ 'insert' ] }, { name: 'tools', groups: [ 'tools' ] }, { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] }, { name: 'styles', groups: [ 'styles' ] }, { name: 'about', groups: [ 'about' ] }, { name: 'forms', groups: [ 'forms' ] }, { name: 'colors', groups: [ 'colors' ] }, { name: 'others', groups: [ 'others' ] } ]; config.removeButtons = 'Checkbox,Radio,TextField,Form,Textarea,Select,Button,ImageButton,HiddenField,SelectAll,Replace,Find,Smiley,Iframe,PageBreak,Flash,ShowBlocks,Save,NewPage,Preview,Print,Templates,Underline,Subscript,Superscript,Language,BidiRtl,BidiLtr,CreateDiv,JustifyCenter,JustifyRight,FontSize,Font,TextColor,BGColor'; "; } $code.= 'CKEDITOR.replace(\''.$name.'\', config);'; $code.= '</script>'; return $code; } ?> |
Codeigniter
thì tạo thư mục asset
trong thư mục gốc của website và đảm bảo có thể truy cập vào thư mục đó, sau đó download ckditor vào ckfinder bỏ vào thư mục asset này. Sau cùng, bạn tạo file application/helpers/editor_helper.php
rồi copy code sau vào:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<? /* ckeditor helper Write by: LeBang.vn */ if(!function_exists('ckeditor')) { function ckeditor($name, $content, $toolbar = 'standard', $language = 'vi', $width = 'auto', $height = 400) { global $ckeditor_loaded; $code = ''; if(!$ckeditor_loaded) { $code.= '<script type="text/javascript" src="'.base_url().'asset/ckeditor/ckeditor.js"></script>'; $ckeditor_loaded = true; } $code.= '<textarea name="'.$name.'" id="'.$name.'">'.htmlentities($content).'</textarea>'; $code.= "<script type=\"text/javascript\"> config = {}; config.entities_latin = false; config.language = '".$language."'; config.width = '".$width."'; config.height = '".$height."'; config.filebrowserBrowseUrl = '".base_url()."asset/ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl = '".base_url()."asset/ckfinder/ckfinder.html'; "; if($toolbar == 'basic') { $code.= "config.toolbarGroups = [ { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, { name: 'links', groups: [ 'links' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] }, { name: 'insert', groups: [ 'insert' ] }, { name: 'tools', groups: [ 'tools' ] }, { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'styles', groups: [ 'styles' ] }, { name: 'about', groups: [ 'about' ] }, { name: 'forms', groups: [ 'forms' ] }, { name: 'colors', groups: [ 'colors' ] }, { name: 'others', groups: [ 'others' ] } ]; config.removeButtons = 'Checkbox,Radio,TextField,Form,Textarea,Select,Button,ImageButton,HiddenField,SelectAll,Replace,Find,Smiley,Iframe,PageBreak,Flash,ShowBlocks,Save,NewPage,Preview,Print,Templates,Underline,Subscript,Superscript,Language,BidiRtl,BidiLtr,CreateDiv,JustifyCenter,JustifyRight,FontSize,Font,TextColor,BGColor,Cut,Undo,Redo,Copy,Paste,PasteText,PasteFromWord,Scayt,Strike,RemoveFormat,Outdent,Indent,Blockquote,JustifyLeft,JustifyBlock,Image,Table,SpecialChar,HorizontalRule,Styles,Format,About'; "; } elseif ($toolbar == 'standard') { $code.= "config.toolbarGroups = [ { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, { name: 'links', groups: [ 'links' ] }, { name: 'insert', groups: [ 'insert' ] }, { name: 'tools', groups: [ 'tools' ] }, { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] }, { name: 'styles', groups: [ 'styles' ] }, { name: 'about', groups: [ 'about' ] }, { name: 'forms', groups: [ 'forms' ] }, { name: 'colors', groups: [ 'colors' ] }, { name: 'others', groups: [ 'others' ] } ]; config.removeButtons = 'Checkbox,Radio,TextField,Form,Textarea,Select,Button,ImageButton,HiddenField,SelectAll,Replace,Find,Smiley,Iframe,PageBreak,Flash,ShowBlocks,Save,NewPage,Preview,Print,Templates,Underline,Subscript,Superscript,Language,BidiRtl,BidiLtr,CreateDiv,JustifyCenter,JustifyRight,FontSize,Font,TextColor,BGColor'; "; } $code.= 'CKEDITOR.replace(\''.$name.'\', config);'; $code.= '</script>'; return $code; } } ?> |
$this->load->helper('editor')
là các bạn có thể dùng.
4. Thuốc dành cho ckfinder
Mới đây, mình có nhận được email từ anh bạn Pawel Wiaderny là developer của ckfinder mong muốn mình gỡ bỏ bản crack. Cũng như trong video mình đã nói, bạn nào có điều kiện tài chính nên mua license để được hỗ trợ tốt hơn. Để tránh gây thiệt hại cho cksource, mình quyết định ngừng share bản fullversion của ckfinder 3.1.0
ckfinder.js
trong thư mục đó copy đè lên file ckfinder.js
trong bộ ckfinder của bạn.
24 Comments
KienQ 4 / 21:09 - 22/11/2015
A ơi cho em hỏi cách bỏ thẻ và <i> của ckeidtor 4.5.5 khi mình lưu vào DB như thế nào ạ?Lê Bằng - Admin 7 / 21:36 - 22/11/2015
Tại sao đã dùng editor lại muốn bỏ tag. Mình không hiểu ý bạn muốn là gì.KienQ 4 / 08:18 - 23/11/2015
em dùng CKeditor để insert vào DB nhưng cú mỗi lần insert nó lại tự động thêm 1 cái thẻ ở đầu bài viết, làm cho nội dung bài viết bị sai. em có thử thêm config.enterMode = CKEDITOR.ENTER_BR; config.shiftEnterMode = CKEDITOR.ENTER_BR; vào file config.js nhưng mà vẫn không được. anh có cách nào khác không ạ?KienQ 4 / 08:20 - 23/11/2015
Thẻ p ý ạ.Lê Bằng - Admin 7 / 13:42 - 23/11/2015
Mình không biết do yêu cầu gì mà bạn phải làm như vậy. Mặc định trong cách hiển thị văn bản thì mỗi 1 khối văn bản đều nằm trong thẻ <p></p>, dù bạn config config.enterMode = CKEDITOR.ENTER_BR nó chỉ có nghĩa khi bạn enter thay vì xuống 1 block <p></p> khác thì nó chỉ xuống dòng dạng <br>. Nhưng nó vẫn nằm trong thẻ <p></p> đầu tiên.Nếu vì 1 lý do nào đó bạn không muốn có sử hiện diện của thẻ <p> nữa thì bạn có thể replace trước khi insert vào DB.
preg_replace('/<[\/]*p[^>]*>/', '', $str);
KienQ 4 / 13:49 - 23/11/2015
Vâng. em cảm ơn anh nhiều ạ!Thái 4 / 21:16 - 23/11/2015
Ad chỉ giùm cách tích hợp vào CI với phân quyền user được không ạ? Cảm ơnLê Bằng - Admin 7 / 23:06 - 23/11/2015
CI thì có hàm mình post trên rồi. Còn phân quyền thì tùy vào tập user của cậu và muốn phân theo kịch bản nào nữa chứ.Nếu web vừa và nhỏ thì chỉ cần phân theo nhóm user thôi.
1. Admin & System full quyền.
2. Publisher thì có quyền upload, xóa file tạo thư mục nhưng không xóa được thư mục.
3. Author thì chỉ có quyền upload file, không có quyền xóa file.
Còn nếu bạn muốn phân theo mỗi user 1 thư mục riêng thì lại càng dễ. Trong file config chỉ cần if-else tí là xong.
Thái 4 / 13:51 - 09/12/2015
Cảm ơn anh, bạn có thể hướng dẫn mình cách set max chiều cao + rộng ảnh bằng $_GET trên url trong CI không ? ($_GET['head']=='head' thì 500x500 còn không có biến này thì 1200x1600). Mình dùng $this->input->get('head') rồi define('HANG'), trong config.php thì mình check bằng if (defined('HANG')) $max=500; else $max=1200; khi thực thi thì nó luôn trả về 1200 dù có hay không có biến $_GET['head'].Lê Bằng - Admin 7 / 06:42 - 10/12/2015
Bạn nhầm rồi. Ckfinder độc lập với CI, bạn muốn truyền cờ head đó sang ckfinder thì bạn có 2 lựa chọn sau:1. Dùng cookie (cái này dễ làm nhất) set trên CI gà get cookie trong file config.php của ckfinder để config.
2. Dùng session (cái này phức tạp nhất vì đặc tính session trong CI)
Thái 4 / 06:55 - 11/12/2015
Hiện mình đã phân quyền cho Ckfinder dưới quyền của CI dùng mod _remap với sử dụng session rồi include file config vào nhưng không hiểu sao mình define hằng mà nó không có tác dụngLê Bằng - Admin 7 / 11:33 - 11/12/2015
Nếu bạn include file config.php của ckfinder vào CI thì có ích gì. Bạn nên nhớ rằng file chạy thực của ckfinder là file: ckfinder\core\connector\php\connector.phpVà cũng chính file này include file config.php vào để nạp cấu hình.
Bạn dùng CI include file config thì CI chạy chứ có phải ckfinder chạy đâu mà có tác dụng.
Thái 4 / 12:52 - 11/12/2015
Mình vẫn dùng file config.php trong ci theo_remap vẫn set được quyền cho user theo session bình thường mà, nhưng mà sao mình lại không được giá trị get sang config? Mình khai báo hằng như PATH_CI_UPLOAD vẫn dùng được trong config. Khi include vẫn chạy ckfinder mà vì dùng _remap nên khi dó path sẽ là /ci/index.php/ckfinder/core/connector.php, trong _remap sẽ thực thi đối với php, và trả thẳng về trình duyệt khi gặp file js hay html của ckfinderCkfinder mình lưu trong thư mục third_party của CI
huutanphp 1 / 22:47 - 06/12/2015
cái này ko phải là crack, mà chỉ là sửa lại tên Crackby LeBang.vn thôi chứ 100% ko phải crack =)) Crackby đồ, xàm xi đú :vLê Bằng - Admin 7 / 14:47 - 07/12/2015
Chắc bạn chưa dùng ckfinder 3 bao giờ nhỉ.scoder 1 / 09:43 - 12/12/2015
Ủa sao không share bản full nữa vậy.Lê Bằng - Admin 7 / 09:44 - 12/12/2015
cksource mail cho mình năn nỉ tớ bỏ đi.Nguyễn Tuyến 1 / 16:32 - 15/08/2016
anh cho em xin bản crack được không ạ, em dùng mà nó bị giới hạn số lượng ảnh up lên, hiện tại em đang bị bế tắc. Mong anh giúp đỡ em ạTrần Anh Đức 1 / 17:19 - 14/04/2016
anh ơi anh có thể gửi cho em xin cái file thuốc được không ạ.Trần Anh Đức 1 / 21:49 - 22/06/2016
Anh ơi anh có thể gửi riêng cho em qua mail ckfinder 3 anh đã crack được không ạ. Em cần bản đó mà không đủ điều kiện để mua. Anh chia sẻ công khai thì cksource thiệt hại chứ cho 1 mình em thì đâu thiệt hại gì. Anh có thể cho em xin được không ạ. Năn nỉ anh đó.Sơn 1 / 15:49 - 25/06/2016
Bạn ơi, mình click vào nút "Duyệt máy chủ" thì nhận được thông báo "Yêu cầu không hợp lệ."Giúp mình cách xử lý nhé. Thanks.
Long 1 / 17:40 - 24/07/2016
Có cách nào upload image lên remote server ko anh.DanhDanh 1 / 14:52 - 29/09/2016
Có Thuốc không bạn ? cho mình xin thuốc .thanh tịnh 1 / 23:27 - 11/10/2016
cho mình xin bản ckfinder mail. [email protected]