[Yii Framework] Integrate Upload Image With Editor CKEditor

How to integrate upload image that can automatic include it in your editor with CKEditor and Yii Framework?
1. Download ckeditor source here : http://ckeditor.com/

2. Integrate it with Yii Framework, i assume you know how to do it. (read ckeditor documentation)

3. In views, define html tags for ckeditor like this :

 
                echo '<textarea name="name_field" id="name_field"></textarea>';

4. Define ckeditor javascript to make html tags show data like this :

             CKEDITOR.replace('name_field', {
                height: 100,
                width : 350,
                // this code use for activate image upload in your view, and it will execute the url that you want
                // when run it
                filebrowserImageUploadUrl: '<?php echo Yii::app()->createUrl("yourController/yourAction")?>',

                // set toolbar that you want to show
                toolbar : [
                    {'name' : 'document' , 'items' : ['Source']},
                    ['Cut','Copy','Paste','-','Undo','Redo','Image'],
                    {'name' : 'basicstyles','items' : ['Bold','Italic']}
                ]
            } );

after add that code,your tags will display like this :
1

5. Make an action that will execute upload code in your controller :

 
    public function actionUpfile()
    {
        if($_FILES) // check if file upload exist
        {
            $target_path = Yii::app()->basePath.'/../foldername/';  // directory in your server
            $ext_name=explode('.',basename($_FILES['upload']['name']));  // get extension from file upload
            $fname='yourFileName.'.$ext_name[1];  // set your file name, 
            $target_path = $target_path.$fname;  // save path and name file

            if(!file_exists("$target_path"))// if we have set target path
            {
                  $message='';  // message variable, use to show message after upload file
                  $url='';   // url variable, use to set url image in your editor
                  $lower_ext=strtolower($ext_name[1]);  // check extension, validate type file
                  if ($lower_ext!='jpg' && $lower_ext!='jpeg' && $lower_ext!='png' && $lower_ext!='gif')
                  {
                    // if type file not allow
                    $message = "The image must be in either JPG, JPEG, GIF or PNG format."; 
                  }
                else
                {
                    // upload file to server
                    move_uploaded_file($_FILES['upload']['tmp_name'], $target_path);
                    echo 'Success Upload File';
                    // url will save directory. Note it, url is different with target path
                    // url will use in your editor, it will direct access to the path
                    $url='yourwebsite'.'/foldername/'.$fname;
                }
                $funcNum = $_GET['CKEditorFuncNum'] ;
                // after save data, run code to call ckeditor function
                echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
              }
              else
              {
                  echo 'Failed Upload File';    
              }
        }
    }

After that, you will see display like this :
2

Yeah, enjoy your application..

Finish.. Hope it help,Happy coding…😀

13 Responses to [Yii Framework] Integrate Upload Image With Editor CKEditor

  1. Trimakasih mas Sabit, tutorialnya sangat bermanfaat bagi newbie seperti saya ini,..

    mas Sabit tau gak cara memakai extensi ini
    http://www.yiiframework.com/extension/imagesgallerymanager/
    saya bingung cara memakainya sampai gak tidur semaleman sangking penasarannya….
    al-hasil GATOT (gagal total) hehehe, di share dong mas kalo mas Sabit bisa…
    Matur Nuhun….

  2. Nagy Ervin says:

    Thank you!!! Its helped a lot for me. Thank you again🙂

  3. ayu says:

    om bisa minta contoh scripnya gk aq bingung, yng mna model, controller dan viewsnya

  4. Mas Sabit sebenarnya pemakaian extension ckeditor itu ditempatkan di _form.php atau dibagian mana ya, saya masih belum paham pemasangan extension pada yii, dan sepertinya ini berbeda sekali dengan extension EditMe yang bisa langsung di implementasikan dengan mudah. saya sudah coba ikuti dokumentasi ckeditor namun saya tidak menemukan file script yang dimaksud. bisa mas Sabit beritahu saya konsep pemasangan extension pada yii… terima kasih sebelumnya

  5. sis ayu & mas happy : jadi ini bukan extension Yii, ini library javascript murni. Jadi penggunaannya ga se simple pada penggunaan extension. Alasan ga pake extension, walau mudah tapi sulit di modifikasi.

    untuk cara pasang nya :
    1. donlot libary nya
    2. masukkan library tsb ke dalam sebuah folder di aplikasi gan ( terserah folder apa aja)
    3. di views/layout/main.php masukkan script yang akan memanggil libarry ckeditor :

    <script type="text/javascript" src="baseUrl ?>/jslib/ckeditor/ckeditor.js">

    4.ikuti langkah ke 3 pada tutor di atas..

  6. btw, itu contoh script nya kalo saya tarok file ckeditor nya di dalam aplikasi saya masukin di folder “jslib”

  7. Mas Sabit saya sudah ikuti tutorialnya dan sudah tampil komponen textarea, berdasarkan petunjuk nomor 3 script saya letakan pada views/layout/main.php apa itu benar? sedangkan untuk point nomor 4 saya masih bingung script ini diletakan dibagian mana ya? sudah di coba-coba tapi hasilnya gagal tuh bisa berikan penjelasannya?

  8. point 4 itu diletakkan di form yang mau agan tambahkan gan..
    point selanjutnya juga tetapi di form yang sama tapi di buat di dalam text javascript.. (coba searching cara insert javascript di file html kalo masih belum mengerti cara masukin jaascript nya..

  9. alinitjin says:

    Selamat Malam mas,

    saya sudah coba tutorial diatas dan sudah berhasil muncul ckeditornya di form saya,
    cuman pas mau upload image kok ga bisa ya mas?
    dia stuck di send to server. apakah ada solusi untuk ini? atau saya harus integrate dengan extension lain untuk upload file?
    Terima kasih

  10. alinitjin says:

    mas kalau ketemu error ini “NetworkError: 404 Not Found – http://localhost/demo/PostController/admin/?CKEditor=name_field&CKEditorFuncNum=1&langCode=en” karena apa y? Terima kasih

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: