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ư:
  1. NiceEdit – Một editor nhỏ gọn nhẹ nhàng.
  2. TinyMCE – Đa chức năng, giao diện giống MS Word.
  3. CKeditor – đa chức năng, hiện đại.
  4. YUI Rich Text Editor
  5. MarkItUp!
  6. FreeTextBox
  7. MooEditable
  8. OpenWysiwyg
Hôm nay LeBang.vn xin giới thiệu các sử dụng ckeditor trong việc xây dựng website. Mình đã sử dụng ckeditor (tiền thân là fckeditor) từ năm 2007 và gắn bó với công cụ này từ đó tới giờ.
ckeditor - giao diện hiện đại, gọn nhẹ.

ckeditor – giao diện hiện đại, gọn nhẹ.

Với phiên bản mới nhất hiện tại là 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

ckfinder 3 – quản lý file và hình ảnh

Ở phần này LeBang.vn sẽ giới thiệu về ckfinder và hướng dẫn cách tích hợp vào ckeditor hoặc website của bạn.

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ại url cho các link nhúng 2 file ckeditor.js và ckfinder.html nhé.
PHP
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;
}
?>
Nếu các bạn dùng framework 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:
PHP
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;
}
}
?>
Khi dùng chỉ cần $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

Để các bạn dùng full tính năng của ckfinder mà không phải mua bản quyền thì các bạn download tại đây. Sau khi tải về, tùy vào phiên bản bạn đang dùng chỉ cần lấy file ckfinder.js trong thư mục đó copy đè lên file ckfinder.js trong bộ ckfinder của bạn. Chúc các bạn thành công!
Tagged: , , , .