CKEditor in CodeIgniter

Sunday, 29 August 2010 22:32

ကြၽန္ေတာ္ ဒီ Post မွာ CKEditor ကို CodeIgniter မွာ ဘယ္လိုေပါင္း ထည့္မလဲ ဆိုတဲ့ Tutorial ကိုေရးမွာ ျဖစ္ပါတယ္။ ဒါေၾကာင့္ CI မွာ Helper ေတြ၊ Library ေတြကို ဘယ္လိုေပါင္းထည့္လို႕ ရတယ္ ဆိုတာကို ေရးထားတဲ့ ဒီ Post ကိုအရင္ ဖတ္ထားဖို႔ လိုပါတယ္။

CI ထဲကို ေပါင္းထည့္မယ့္ CKEditor အေၾကာင္းေလး ဗဟုသုတ အျဖစ္ နဲနဲၾကည္ လိုက္ရေအာင္။ CKEditor ဆိုတာကေတာ့ Web ေပၚမွာ user friendly ျဖစ္ေအာင္ လုပ္ေပးထားတဲ့ WYSIWYG editor အမ်ိဳးအစားပဲ ျဖစ္ပါတယ္။ WYSIWYG ကဆိုတာကေတာ့ What-You-See-Is-What-You-Get ကိုေျပာတာ ျဖစ္ပါတယ္။ ကြၽန္ေတာ္တို႔ Word ထဲမွာ Font Size, Font color, Font Style ေတြ၊ Number & Bullet ေတြ၊ Table Format ေတြကို အလြယ္တကူ လုပ္ႏိုင္ သလိုမ်ိဳး Web Page ေတြမွာ CKEditor ကိုသုံးျပီး လုပ္ႏိုင္ပါတယ္။ Web based ျဖစ္တာေၾကာင့္ Word ကိုေတာ့ Feature ေတြအကုန္ ယွဥ္လို႕ မရေပမယ့္ အသုံးဝင္တဲ့ Editor တစ္ခု ျဖစ္တာကေတာ့ အေသအခ်ာပါပဲ ခင္ဗ်ာ။ CKEditor ဆိုတာကေတာ့ 2003 ေလာက္ထဲက စတင္ခဲ့တဲ့ FCKEditor ရဲ႕ new generation အျဖစ္ 2009 မွာေျပာင္းလဲ ခဲ့တာျဖစ္ပါတယ္။

ဒါေၾကာင့္ ခုခ်ိန္မွာ Google မွာ FCKEditor လို႔ရွာရင္လဲ CKEditor ကိုပဲ ေတြ႔ရပါ လိမ့္မယ္။

အဲဒီ အသုံးဝင္တဲ့ကို CI ထဲကို ဘယ္လို ေပါင္းထည့္ မလဲ ဆိုတာ ဆက္ၾကည့္ ရေအာင္။

1) Download CKEditor

ဒီမွာ CKEditor ကို အရင္ Download လုပ္ဖို႔ လိုပါတယ္။

2) Create folder in CI for CKEditor

Download လုပ္ထားတဲ့ Folder ကိုဖြင့္ လိုက္လို႕  _samples ၊  _sources folder ေတြကိုေတြ႔ ခဲ့ရင္ေတာ့  အဲဒီ Folder ေတြ မရွိလည္း အလုပ္လုပ္တာမို႔ Delete လုပ္ျပစ္ရင္ ပိုေကာင္းပါတယ္။ မလုပ္လဲ ျပသနာ မရွိေသာ္လည္း server ေပၚအတင္အခ်ေတြမွာ အခ်ိန္ၾကာတာေတြ ျဖစ္ေစႏိုင္ပါတယ္။ ျပီးရင္ေတာ့ js folder ကို system folder နဲ႔ level တူေဆာက္ေပးျပီး အဲဒီေအာက္မွာ ckeditor ဆိုျပီး ေနာက္ folder တစ္ခုထပ္ေဆာက္ျပီး ခုနက _samples ၊  _sources folder ေတြ Delete လုပ္ျပီး က်န္ေနတဲ့ files ေတြ၊ folders ေတြ အားလုံးကို အဲဒီ ေအာက္မွာ copy ကူးျပီး ထည့္လိုက္ပါ။ Folder Structure ကိုၾကည့္မယ္ ဆိုရင္ေတာ့

3) Add CKEditor Helper in CI

ဒီအဆင့္မွာ helper file ေရးရမွာ ျဖစ္လို႕ application/helpers ေအာက္မွာ file အသစ္ တစ္ခု ေရးျပီးထည့္ ေပးရပါမယ္။ ဒီမွာ ေရးျပေနရင္ အရွည္ၾကီး ျဖစ္သြားမွာ စိုးတာေၾကာင့္ ဒီေနရာမွာ Download လုပ္ျပီး application/helpers ကိုထည့္ေပး လိုက္ပါ။ File name ကိုေတာ့ ckeditor_helper.php လို႔ေပး လိုက္ပါ။ အဲဒီ file ကို ဖြင့္ၾကည့္မယ္ ဆိုရင္ CKEditor ကိုသုံးရန္ လိုအပ္တဲ့ Function ေတြကို စုေရးထားတာ ေတြ႔ရပါမယ္။ Author ေရးထားတဲ့ အတိုင္းသုံးရတာ အဆင္ေျပေနတဲ့ အတြက္ျပင္ေနဖို႔ မလိုပါ။

4) Create Controller

ကြၽန္ေတာ္ထည့္လိုက္တဲ့ helper ကိုျပန္ေခၚဖို႔ Controller ကိုဆက္ လုပ္ပါမယ္။ ckeditor.php လို႔ နာမည္ေပးျပီး ဒီ code ေလးကိုထည့္ ေပးလိုက္ပါ။

<?php

class Ckeditor extends Controller {
   
    public $data     =     array();
   
    public function __construct() {
       
        parent::Controller();

        $this->load->helper('url'); //You should autoload this one ;)
        $this->load->helper('ckeditor');
       
        //Ckeditor's configuration
        $this->data['ckeditor'] = array(
       
            //ID of the textarea that will be replaced
            'id'     =>     'content',
            'path'    =>    'js/ckeditor',
       
            //Optionnal values
            'config' => array(
                'toolbar'     =>     "Full",     //Using the Full toolbar
                'width'     =>     "550px",    //Setting a custom width
                'height'     =>     '100px',    //Setting a custom height
                   
            ),
       
            //Replacing styles from the "Styles tool"
            'styles' => array(
           
                //Creating a new style named "style 1"
                'style 1' => array (
                    'name'         =>     'Blue Title',
                    'element'     =>     'h2',
                    'styles' => array(
                        'color'             =>     'Blue',
                        'font-weight'         =>     'bold'
                    )
                ),
               
                //Creating a new style named "style 2"
                'style 2' => array (
                    'name'         =>     'Red Title',
                    'element'     =>     'h2',
                    'styles' => array(
                        'color'             =>     'Red',
                        'font-weight'         =>     'bold',
                        'text-decoration'    =>     'underline'
                    )
                )               
            )
        );
       

    }
   
    public function index() {
       
        $this->load->view('ckeditor', $this->data);
       
    }
}

$this->load->helper('ckeditor'); ကေတာ့ ခုနလုပ္ထားတဲ့ helper file ကိုျပန္ေခၚတာ ပါတယ္။
CKEditor အတြက္လိုအပ္တဲ့ configuration, styles စတာေတြကို လိုခ်င္တဲ့ အတိုင္းေရးျပီး $this->data['ckeditor'] ဆိုျပီး array ထဲကို ထည့္လိုက္ပါတယ္။

id - CKEditor ရဲ႕ ID ပါ။
path - CKEditor Source ေတြကို Download ခ်ျပီး js folder ေအာက္ထားခဲ့တာ မွတ္မိမယ္ ထင္ပါတယ္။ အဲဒီ path ကိုေျပာတာပါ။
config - ဒီမွာေတာ့ toolbar, width, height စတာေတြကို လိုအပ္သလို parameter ေပးႏိုင္ပါတယ္။
style - CKEditor မွာ style ဆိုတဲ့ dropdown ေလးရွိေနျပီး ကိုယ့္ေရးထားျပီးသားကို select လုပ္ျပီး style dropdown ထဲကေန style တစ္ခုခုကိုေရြးတာနဲ႔ auto ေျပာင္းသြားပါမယ္။ အဲဒီ dropdown ထဲမွာေပၚမယ္ style ေတြအတြက္ ေရးထားျခင္း ျဖစ္ပါတယ္။

အားလုံးျပီးသြားေတာ့ view ကိုေခၚရင္း အဲဒီ data array ကိုထည့္ေပး လိုက္ပါတယ္။
$this->load->view('ckeditor', $this->data);

5) Create View

ေနာက္ဆုံး အဆင့္အေနနဲ႔ ckeditor.php ဆိုတဲ့ view ကိုေဆာက္ျပီး ဒီ code ေလးထည့္ေပး လိုက္ပါ။ သုံးသြားတဲ့ display_ckeditor function ကေန ckeditor_helper.php ထဲမွာ ေရးထားျပီးသားကို ေခၚလိုက္တာ ျဖစ္ပါတယ္။

ဒါကေတာ့ Googling လုပ္ရင္း ရွာေတြ႔တာ ေလးကို ျပန္ေရး ထားတာ ျဖစ္လို႕ တျခားနည္း တစ္ခုခုနဲ႔ CI ထဲေပါင္းထည့္တာ ရွိရင္လည္း comment မွာေရးထား ခဲ့ႏိုင္ပါတယ္။

 

Ref: http://kromack.com/developpement-php/codeigniter/ckeditor-helper-for-codeigniter/

< Prev		Next >