วิธีติดตั้ง Ckeditor ใน Cakephp และการปรับแต่ง

ติดตั้ง Ckeditor ใน textarea ของ Cakephp

       บทความสอน PHP บทความนี้จะสอนวิธีติดตั้ง ckeditor ให้กับ cakephp (PHP Framework) กันครับ วิธีติดตั้งไม่ยากเลยครับ เพราะผมได้ทำตามในบทความนี้ครับ  http://bakery.cakephp.org/articles/Valkum/2009/11/08/ckeditor-3-x-new-fckeditor-version แต่ต้องปรับโค๊ดอีกนิดหน่อย เพราะบทความที่สอนมันเป็นเวอร์ชั่นเก่าครับ cakephp ของผม ตอนนี้ได้อัปเกรดเป็นเวอร์ชั่นล่าสุดแล้ว (2.2.5 ในตอนนี้คือเวอร์ชั่นล่าสุด) วิธีอัปเกรดก็ไม่ยากครับ แค่Copyโฟลเดอร์ lib มาทับของเดิม และ Copy โฟลเดอร์ Console ไปทับของเดิมที่อยู่ในโฟลเดอร์ app นั่นเองครับ หรือติดตั้งใหม่เลยก็ได้ครับ

      มาดูวิธีติดตั้ง Ckeditor ในTextareaของ cakephp กันครับ

1.อันดับแรกต้องไปดาวน์โหลด Ckeditor มาก่อนครับ ตามลิงค์นี้ครับ http://ckeditor.com/builder แนะนำให้ใช้ตัวเต็ม (Full version) เลยนะครับ โดยเลือกที่ Full แล้ว เลือกภาษา Thai ด้วยนะครับ และคลิกที่  Source (Big N’Slow) เราจะได้ตัวเต็มของมันมาครับ และกด Download ได้เลย ดูตามรูป

วิธีดาวน์โหลด Ckeditor แบบ Full Version

2.จากนั้นจะไฟล์ .zip ให้แตกไฟล์ออกมา จะได้โฟลเดอร์ชื่อ ckeditor ให้ Copy ไปวางไว้ใน cakephp Project ของคุณครับเช่นผมเก็บ cakephp ของผมไว้ใน Drive C:\AppServ\www\cakephp  ผมจะเอาโฟลเดอร์ ckeditor ไปติดตั้งดังนี้ครับ C:\AppServ\www\cakephp\app\webroot\js ซึ่งมันต้องอยู่โฟลเดอร์ js นั่นเองครับ

3.ไปที่ cakephp/app/View/Helper เราจะสร้าง Class ใน Helper ขึ้นมา 1 Class ครับ ตั้งชื่อไฟล์ว่า CkeditorHelper.php ดังรูป

ซึ่ง Helper มันเป็นคลาสที่ทำงานในส่วนของ View ครับ ให้พิพม์โค๊ดดังนี้

<?php
class CkeditorHelper extends AppHelper {
 var $helpers = Array('Html', 'Javascript'); 
 public function loadcustom($id) {
        $did = '';
        foreach (explode('.', $id) as $v) {
            $did .= ucfirst($v);
        } 
  $code = "CKEDITOR.replace( '".$did."',{ toolbar: [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
       { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
       { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar','Link', 'Unlink', 'Anchor' ] },
       { name: 'others', items: [ '-' ] }, '/',
       { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'TextColor','BGColor','Bold', 'Italic', 'Underline', 'Strike'] },
       { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },'/',
       { name: 'styles', items: [ 'Font','FontSize','Styles', 'Format'] },
       { name: 'tools', items: [ 'Maximize' ] }
       ],uiColor:'#FAAC0F'} );";  
        return $this->Javascript->codeBlock($code); 
    } 
 public function loadfull($id){
    $did = '';
        foreach (explode('.', $id) as $v) {
            $did .= ucfirst($v);
        } 
  $code = "CKEDITOR.replace( '".$did."',{uiColor:'#FAAC0F'} );";  
        return $this->Javascript->codeBlock($code); 
 }
} 
?>

ผมได้สร้างเมธอด(หรือเรียกว่าฟังก์ชั่นก็ได้) ใน Class CkeditorHelper ขึ้นมา 2 เมธอด คือ loadcustom กับ loadfull

loadcustom คือ การกำหนดค่าเลือกแสดงเครื่องมือ (Tools) ของ Ckeditor ตามที่เราต้องการหรือจำเป็นต้องใช้เท่านั้นครับ
loadfull คือ แสดงเครื่องมือทั้งหมดเลยครับ

4.วิธีเรียกใช้งาน ให้สร้างไฟล์ไว้ใน Controller ของผมตั้งชื่อว่า ProductsController.php และสร้างโฟลเดอร์ Products ในView และสร้างไฟล์ชื่อ add.php ดังรูป

ในส่วนของไฟล์ ProductsController.php ให้พิมพ์โค๊ดดังนี้ครับ

<?php
class ProductsController extends AppController {
 public $name='Products';
 public $helpers = array('Html','Form');
 public function add(){
  
 }
}
?>

และไฟล์ add.php ให้พิมพ์โค๊ดดังนี้

<h2>ลงประกาศ</h2>
<?php 
echo $this->Html->script('ckeditor/ckeditor');
echo $this->Form->create('Product',array('action' => 'add'));
?>
<table width="780" border="0" align="center" cellpadding="4" cellspacing="0">
  <tr>
    <td width="150"><strong>รายละเอียด</strong></td>
    <td>
 <?php
  echo $this->Form->textarea('detail',array('label'=>false,'cols'=>'70','rows'=>'20'));
  echo $this->Ckeditor->loadcustom('Product.detail');//วิธีเรียกใช้งาน loadcustom(ชือโมเดล.ชื่อฟิลด์) หรือ loadfull(ชือโมเดล.ชื่อฟิลด์)
  ?></td>
  </tr>
</table>
<?php echo $this->Form->end(); ?>

เมื่อติดตั้งสมบูรณ์แล้ว และรันทดสอบโดยพิมพ์ http://localhost/cakephp/products/add จะได้ผลลัพธ์ดังนี้ครับ