เนื่องจากระยะหลังงานที่ผมเขียนเป็น CMS ให้ลูกค้านั้น มักพ่วง 2 ตัวนี้ไปพร้อมๆกันเนื่องจากสะดวกดี ไม่ต้องเสียเวลามาเขียน File manager ใช้เอง ผมก็เลยถือโอกาสเอาทั้ง 2 ตัวนี้ ต่อร่วมกัน Review
ไป Download มาซะก่อนครับที่ CKEditor , CKFinder
หน้าตา Website CKEditor.com
หน้าตา Website CKFinder.com
หลังจาก Download มาเรียบร้อยผมจึงแตก Zip ติดตั้งไว้บน Server2Go
ติดตั้ง CKEditor และ CKFinder ไว้บน Server2Go
เริ่มจากพื้นฐานการเรียกใช้งาน CKEditor กันก่อน
การเริ่มต้นที่ดีสำหรับผมคือ ... การดูตัวอย่างครับ :P ใน CKEditor นั้นมีตัวอย่างอยู่ที่ ckeditor/_samples/การเรียกใช้งาน CKEditor นั้นเรียกว่าง่าย เข้าขั้นบ้า ไปแล้วครับ :P นั้นคือ
วิธีที่ 1 ใช้ class คืออยากให้ textarea อันไหนเป็นกรอบ Text Editor ก็ใส่ class="ckeditor" เข้าไป ว่าแล้วดูตัวอย่าง
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>class</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="message" name="message" rows="10" class="ckeditor">ทดสอบความหล่อ
</textarea>
</body>
</html>
หน้าตาที่ได้จากการเรียกแบบ Class
วิธีนี้เรียกว่า ง่ายที่สุดเลยไม่ต้องคิดอะไรมาก เรียก javascript เข้าบรรทัดบน แล้ว class="ckeditor" อย่างเดียวจบ
วิธีที่ 2 ใช้ code เป็น วิธีการแบบดังเดิมของ FCKeditor คือให้ใช้ Javascript ระบุรายละเอียดกรอบที่ต้องการแล้วก็สร้างกรอบ Text Editor ขึ้นมาใช้งาน ว่าแล้วดูตัวอย่าง Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Code</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="message" name="message" rows="10" >ทดสอบความหล่อ</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'message' );
//]]>
</script>
</body>
</html>
จะเห็นว่าแบบ Code นี้คือถ้าอยากได้ช่องไหนเป็น Text Editor ก็ให้ CKEDITOR.replace ค่า textarea นั้นแค่นั้นเอง
หน้าตาที่ได้จากการเรียกแบบ Code ก็ได้เหมือนกันแหล่ะ
ซึ่งโดยส่วนตัวผมเป็นคนชอบทำอะไรลำบากๆ :P ฉะนั้น ในหัวข้อต่อๆไปผมจึงขอ Review แบบการเรียกใช้แบบ Code ละกันครับ ว่าแล้ว ไปต่อกันเลย
กำหนดคุณสมบัติของกรอบ Text Editor
เนื่องจากการใช้งานจริง กรอบ Text Editor ที่ CKEditor สร้างขึ้นมา เราต้องควบคุมการแสดงผลด้วยเช่น อยากให้กรอบกว้างยาวเท่านี้ อยากให้กรอบมีปุ่มเครื่องมือเท่านี้ ปุ่มนี้ไม่อยากได้ อะไรแบบนี้ จากที่ผมแกะๆมาจากหน้า sample ก็พอสรุปรายละเอียดได้ดังนี้วิธีการกำหนดคุณสมบัติ
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'message',{
// อยากกำหนดอะไรก็ใส่ที่นี่
} );
//]]>
</script>คุณสมบัติต่างๆเช่น
Skin ปุ่มไอคอนต่างๆ
เจ้า CKEditor นี้มาพร้อมกับ skin หน้าตาดีใหม่ชื่อว่า kama (ประวัติไม่รู้ไปสืบกันเอาเอง) และ skin เดิมจาก FCKeditor เช่น office2003, V2 มาครบ วิธีเรียกก็ระบุไปว่า
skin : 'kama',
skin : 'office2003',
skin : 'v2',อยากตัวไหนก็ระบุลงไปเช่น
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'message',{
skin : 'office2003',
} );
//]]>
</script>
ตัวอย่าง Text Editor ที่เลือก Office 2003 Skin
กว้าง ยาว กำหนดได้
กำหนดความกว้าง ความยาวของ Text Editor ได้ด้วย
height : 400,
width : 750,เมื่อเรากำหนดลงไป Text Editor ที่ได้จะกำหนดขนาดเริ่มแรก ตามที่เราระบุไว้ แต่ CKEditor เจ๋งกว่านั้น คือ ที่มุมขวาล่างของกรอบ เราสามารถใช้ลาก Mouse ดึงเอาขนาดใหม่ได้ตามชอบใจเลย เหมือน TinyMCE นั้นแหล่ะครับ
ภาษาของปุ่มเครื่องมือ
อันนี้ก็กำหนดเองได้ครับเราสามารถกำหนดได้อยากใช้ปุ่มอะไร โดยปกติ CKEditor จะเปลี่ยนภาษาของเครื่องมือตาม Browser ที่ได้ระบุไว้ (ผมทดสอบโดยการใช้ IE เข้ามันจะส่งปุ่มเครื่องมือภาษาไทยให้แต่ถ้าใช้ Firefox จะได้ปุ่มเครื่องมือเป็นอังกฤษ)
อันนี้ดูด้วย Firefox ได้ปุ่มภาษาอังกฤษ
อันนี้ดูด้วย IE ได้ปุ่มภาษาไทย
ภาษาตรงนี้ถ้าอยากระบุให้เลือกภาษาใดภาษาหนึ่งแน่นอนไปเลยให้ระบุว่า
language : 'en',รายชื่อภาษาทั้งหมด อยากรู้ไปดูที่ ckeditor\lang มีให้เลือกเยอะแยะมากมาย
ตอแหลแต่งสีได้อีก
เป็นของเล่นที่ CKEditor เหนือกว่ารุ่นพี่ FCKeditor ไปอีกเนื่องจากเราสามารถแต่งสีพื้นหลังให้เข้ากับ CMS ที่เราออกแบบได้โดยระบุใช้ plugin เพิ่มเติม (CKEditor ออกแบบใหม่ทำให้บางส่วนจะถูกส่งไปเป็น Plugin แทน core ของระบบ)
extraPlugins : 'uicolor',
uiColor : '#006699', อยากได้ Code สีอะไรก็ระบุไปได้เลย
สีน้ำเงินสีโปรดของผมเอามาทำเป็นพื้นหลังได้แล้ว
ชอบปุ่มไหนไม่เอาปุ่มไหนเลือก เอาเข้าเอาออกได้ตามใจชอบ
เรียกว่าเชิญจัดตามสะดวกเป็นจุดที่ผมชอบมาก เพราะบางปุ่มเราไม่จำเป็นต้องใช้ก็คัดออกไปได้การกำหนดก็ระบุว่า
toolbar :
[
['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'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
], นี่เป็นชุดปุ่มเต็มทั้งหมด ถ้าไม่อยากได้ปุ่มไหนก็ลบทิ้งโลด เช่น
toolbar :
[
['Source','-','Templates'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
],ระบุว่าใช้เครื่องมือแค่นี้เราก็จะได้หน้าตา Text Editor แบบนี้
ได้ปุ่มเครื่องมือชุดเล็ก
สุดท้ายแล้วก็เอา CKFinder มาต่อร่วมเข้าไปอีก
ก่อนจะเอาไปต่อร่วมอย่าลืม Config ตัว CKFinder ให้พร้อมใช้งานก่อนนะครับ ไปดูวิธีตาม บทความ นี้
แสนจะง่ายแค่เพิ่ม Code นี้ต่อท้ายเข้าไป
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash' 
จะเห็นเมื่อเวลา Browse Image จะมีปุ่ม Browse Server เพิ่มเข้ามา
เมื่อคลิกเข้าไปก็จะพาเข้าไปสู่ CKFinder โดยสมบูรณ์
สรุป Code ทั้งหมดที่กล่าวมาน่าจะได้ประมาณนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Code</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="message" name="message" rows="10" >ทดสอบความหล่อ</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'message',{
skin : 'kama',
language : 'en',
extraPlugins : 'uicolor',
uiColor : '#006699',
height : 400,
width : 750,
toolbar :
[
['Source','-','Templates'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
],
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
} );
//]]>
</script>
</body>
</html>
ทั้งหมดนี้น่าจะเป็นจุดเริ่มต้นที่ดี สำหรับหลายๆคนจะหัดอ่าน Manual กัน ยังมีบางส่วนที่ผมไม่ได้กล่าวถึงเช่นการทำ Template แม่แบบ การทำ Style อันนี้ขอทิ้งไว้เป็นการบ้านไปศึกษาเพิ่มเติมกันเอง :P
ที่มา : Scriptdd
