ติดตั้ง CKeditor และ CKfinder ใน Codeigniter
หลายครั้ง เวลาที่เราทำเว็บ (โดยเฉพาะทำให้คนอื่นใช้) มักจะต้องมีส่วนของ HTML Editor หรือส่วนที่มีเครื่องไม้เครื่องมือให้พิมพ์เหมือนกับ word นั่นล่ะ
จริงๆแล้ว HTML Editor ก็มีหลายตัว แต่ที่จะมาแนะนำวันนี้คือ CKeditor ซึ่งเมื่อก่อน ชื่อ FCKeditor นั่นเอง และพร้อมทั้งจะเอามาติดตั้งบน CodeIgniter กันเลย ขอบอกว่า ง่ายมาก แต่ว่างม อยู่นาน เพราะว่าเค้าเปลี่ยน version มาทำให้การเรียกใช้งานก็เปลี่ยนไปเรื่อยๆ หลายอันใช้ได้ แต่ไม่สมบูรณ์ แต่ผมจะมาเสนอแบบที่ง่ายสุด สั้นสุด ใช้ได้ดีที่สุด
โดยวันที่เขียนบทความนี้ ผมใช้ CKeditor 3.3.2 stable (3.4ยังเป็น beta อยู่เลยไม่ใช้) และ CKfinder 2.0 ช่างเข้าคู่กั๊น คู่กันมาก (CodeIgniter 1.7.2)
เริ่มต้นจาก download CKeditor และ download CKfinder แต่ผมจะเล่าเฉพาะส่วนของ CKeditor ก่อน สำหรับคนที่ต้องการใช้เพียงส่วนเดียว
เมื่อได้มาแล้วก็แตกไฟล์เลยครับ ส่วนของ CKeditor นั้น ให้เราลบแฟ้ม _source และ _sample ออกได้เลย เราไม่ได้ใช้ จากนั้น เราก็สร้างแฟ้มที่ ./system/plugins/ โดยตั้งชื่อว่า ckeditor เราก็จะได้ดังนี้ ./system/plugins/ckeditor และในแฟ้มนี้ ให้เรา copy ไฟล์มาวางใส่เข้าไปได้เลย โดยเราจะต้องเห็นไฟล์ ckeditor_php5.php ในระดับนี้เลย ห้ามเอาไปใส่แฟ้มอีกชั้น เดี๋ยวจะใช้ไม่ได้ นั่งงงกันไป
จากนั้น เราจะสร้าง library โดย ให้เรา copy ไฟล์ ckeditor_php5.php (แต่ถ้าใครยังใช้ php 4 อยู่ ให้ copy ไฟล์ชื่อ ckeditor_php4.php)ไปวางที่ ./system/application/libraries/ แล้วเปลี่ยนชื่อเป็น ckeditor.php เป็นอันจบขั้นตอนการเตรียมไฟล์ และ library ให้พร้อมใช้งาน
เวลาที่เราเรียกใช้งาน ใน controller ให้เราเขียนโค้ดดังนี้
$this->load->library('ckeditor',base_url() . 'system/plugins/ckeditor/');
$this->ckeditor->basePath = base_url(). 'system/plugins/ckeditor/';
$this->ckeditor->ToolbarSet = 'Full';
$this->load->view('ckeditor');
จะเห็นได้ว่า บรรทัดที่ 1-3 ก็คือ path ที่เก็บ ckeditor ที่เราเอาไปวางไว้ตั้งแต่ขั้นตอนด้านบนนั่นเอง และบรรทัดที่ 4 ก็เรียก view ธรรมดาไม่ได้มีอะไรพิเศษ
สำหรับหน้า view ที่เราต้องการแสดงผล ckeditor ให้เราเขียนโค้ดดังนี้ ในตำแหน่งที่้ต้องการให้แสดงผล
<?=$this->ckeditor->editor("editor1","initial value");?>
เสร็จแล้วครับ ง่ายมั้ยครับ
แต่ความมันส์ยังไม่จบ เพราะว่าเราได้แค่ตัว editor แต่เราโลภจะเอาตัวจัดการไฟล์ด้วย ให้เราแตกไฟล์ ckfinder ที่เรา download มาแล้ว จากนั้นให้ลบ _sample ออก เพราะไม่ได้ใช้ จากนั้น เราก็สร้างแฟ้มที่ ./system/plugins/ โดยตั้งชื่อว่า ckfinder เราก็จะได้ดังนี้ ./system/plugins/ckfinder และในแฟ้มนี้ ให้เรา copy ไฟล์มาวางใส่เข้าไปได้เลย โดยเราจะต้องเห็นไฟล์ config.php ในระดับนี้เลย
จากนั้น เราจะสร้าง library โดย ให้เรา copy ไฟล์ ckfinder_php5.php ที่เก็บอยู่ในแฟ้มชื่อ core (แต่ถ้าใครยังใช้ php 4 อยู่ ให้ copy ไฟล์ชื่อ ckfinder_php4.php)ไปวางที่ ./system/application/libraries/ แล้วเปลี่ยนชื่อเป็น ckfinder.php
เนื่องจาก ckfinder เป็นตัวจัดการไฟล์ เราจึงต้องตั้งค่าสิทธ์ ให้มีการตรวจสอบก่อนการเข้าใช้ด้วย หากเราไม่ทำขั้นตอนนี้ ผลลัพท์ที่ได้คือ ใช้งาน ckfinder ไม่ได้ แต่ถ้าเราตั้งค่าผิด ผลที่ได้ ก็คือโดน hack
สำหรับการตั้งค่าสิทธ์ให้เราเปิดไฟล์ ./system/plugins/ckfinder/config.php ขึ้นมา แล้วใน function CheckAuthentication() ให้เขียนตัวเช็คสิทธ์กันเอาเองนะครับ เว็บใครใช้ cookie ก็ให้เช็ค cookie เว็บใครใช้ session ก็ให้เช็ค session แล้วค่อย return ค่าออกมา หากใครไม่เขียน แต่อาศัยเล่นง่ายๆด้วยการ return true เลย จะทำให้โดน hack ได้ เพราะว่าการ return true ทันที แปลว่าใครๆก็เปิดใช้ได้ โดยไม่มีการเช็ค cookie หรือ session ก่อนเลย
กลับมาต่อกันที่ การเรียกใช้ จากโค้ดที่ controller ตามตัวอย่างที่เราแสดงไปนั้น ให้เอามาแก้นิดหน่อย จะได้ดังนี้
$this->load->library('ckeditor',base_url() . 'system/plugins/ckeditor/');
$this->ckeditor->basePath = base_url(). 'system/plugins/ckeditor/';
$this->load->library('ckfinder',base_url() . 'system/plugins/ckfinder/');
$this->ckfinder->BasePath = 'system/plugins/ckfinder/';
$this->ckfinder->SetupCKEditorObject($this->ckeditor);
$this->ckeditor->ToolbarSet = 'Full';
$this->load->view('ckeditor');
จะเห็นว่าที่เพิ่มขึ้นมาคือบรรทัดที่ 3-5 แค่นั้นเอง ส่วน view ยังเรียกใช้งานเหมือนเดิมไม่มีอะไรเปลี่ยนแปลง ทั้งนี้ ในบางจังหวะ เราอาจจะต้องแก้ BasePath ของ ckfinder ด้วยนะครับ คือ จาก 'system/plugins/ckfinder' อาจจะต้องเป็น '../system/plugins/ckfinder' หรือ '../../system/plugins/ckfinder' ขึ้นอยู่กับว่าเราใช้ uri segment เท่าไรในหน้านั้นครับ
เพียงแค่นี้ เสร็จแล้วครับ เราจะมีทั้ง CKeditor และ CKfinder ใน CodeIgniter รอพร้อมให้เราเรียกใช้งานได้แล้วครับ
ทั้งนี้ ใครจะเปลี่ยนชื่อแฟ้มก็ได้นะครับ (แต่อย่าลืมแก้ที่โค้ดด้วยล่ะ) เอาไปใช้งานกันได้ตามสะดวกครับ
tag : CKeditor codeigniter, codeigniter, CKfinder, FCKeditor,CKeditor, CKfinder Codeigniter
