Integrasi Codeigniter+CKEditor+KCFinder

9:24 PM , 19 Comments

  • Codeigniter adalah salah satu framework PHP
  • CKEditor adalah editor berbasis javascript
  • KCFinder adalah filebrowser gratis berbasis web pengganti CKFinder yang saat ini berbayar
Alhamdulillah setelah oprek beberapa script langsung bisa. Langsung aja ya supaya cepet ngerti :-D



  1. download CKEditor dan KCFinder.
  2. Buat directori public/editor/ di dalam direktori codeigniter
  3. Kemudian extract ke dalam direktori /public/editor/ sehingga menjadi:
    /public/editor/ckeditor dan
    /public/editor/kceditor
  4. Buka file /public/editor/ckeditor/config.js, kemudian ketikan kode dibawah ini:
    CKEDITOR.editorConfig = function( config )
    {
       config.filebrowserBrowseUrl = '//public/editor/kcfinder/browse.php?type=files';
       config.filebrowserImageBrowseUrl = '//public/editor/kcfinder/browse.php?type=images';
       config.filebrowserFlashBrowseUrl = '//public/editor/kcfinder/browse.php?type=flash';
       config.filebrowserUploadUrl = '//public/editor/kcfinder/upload.php?type=files';
       config.filebrowserImageUploadUrl = '//public/editor/kcfinder/upload.php?type=images';
       config.filebrowserFlashUploadUrl = '//public/editor/kcfinder/upload.php?type=flash';
    };
  5. Ubah file .htaccess menjadi .htaccessbackup pada /public/editor/kcfinder/
  6. Buka file /public/editor/kcfinder/config.php, kemudian ketikan kode dibawah ini pada konfigurasi 'disabled' dan 'check4htaccess':
    'disabled' => isset($_SESSION['kcfinder']) ? $_SESSION['kcfinder'] : TRUE,
    dan
    '_check4htaccess' => false, 
  7. Kemudian pada script login yang kita buat tambahkan:
    session_start();
    $_SESSION['kcfinder'] = FALSE;
  8. Kemudian pada script logout tambahkan:
    session_start();
    session_unset('kcfinder');
  9. Selesai.
Selamat mencoba,

[NCA]

Install Server Networking Programming

Support you how to install server, networking and Programming Easy

19 comments:

  1. Meisa AlmasMarch 24, 2012 at 2:50 PM

    Thanks.. Ini baru share yg bermanfaat. Di situs lain ga ada yg bener.. Pada ga niat ngeshare'y setengah"..hehehe.. Thanks y

    ReplyDelete
  2. TESTJuly 8, 2012 at 7:22 PM

    Makasih Gan, Muantep. sip sip sip

    ReplyDelete
  3. AnonymousNovember 22, 2012 at 11:29 PM

    thanks 4 shared bro,,,
    tapi ko sy pas klick brows server di codeigniternya ko urlnya jadi localhost/namafoldertempatkcfindernya/kcfinder
    padahal harusnya kan localhost/namaweb/namafoldertempatkcfindernya/kcfinder kenapa ya bro??

    ReplyDelete
  4. AnwarNovember 22, 2012 at 11:35 PM

    yaudah kalau gitu alamatnya menjadi: /localhost/namaweb/namafoldertempatkcfindernya/kcfinder

    ReplyDelete
  5. AnonymousApril 20, 2013 at 11:44 PM

    Thanks gans... Solved

    ReplyDelete
  6. DitokoApril 2, 2014 at 9:17 PM

    klo dklik browse keluar tulisan seperti ini, gmana ya..??

    "You don't have permission to browse server"

    ReplyDelete
  7. AnwarApril 2, 2014 at 9:19 PM

    @Ditoko lihat pada baris ini mas:
    'disabled' => isset($_SESSION['kcfinder']) ? $_SESSION['kcfinder'] : TRUE,

    Itu artinya klo mas ga menset session kcfinder maka kcfinder ga bisa diakses. makanya pada saat user login set session kcfinder

    ReplyDelete
  8. DitokoApril 3, 2014 at 6:55 PM

    @Anwar..nuhun2 sdh bisa..(klo tambah berita)
    tp klo saat edit browsenya tdk keluar..
    ->urlnya sprti ini : http://localhost/templates/berita/assets/kcfinder/browse.php?type=images&CKEditor=isi_berita&CKEditorFuncNum=1&langCode=en

    ->harusnya urlnya sprti ini : http://localhost/templates/assets/kcfinder/browse.php?type=images&CKEditor=isi_berita&CKEditorFuncNum=1&langCode=en

    gmn ya....?

    ReplyDelete
  9. AnwarApril 3, 2014 at 9:11 PM

    @Ditoko: Itu ente tinggal tambahin echo base_url('templates/assets/kcfinder/browse.php?type=images&CKEditor=isi_berita&CKEditorFuncNum=1&langCode=en');

    ReplyDelete
  10. ponco robbiJune 19, 2014 at 9:18 PM

    gan, ini view nya ga di post juga biar lebih jelas? soalnya ane newbie di CI. tq

    ReplyDelete
  11. AnwarJune 19, 2014 at 9:34 PM

    @Ponco: Untuk viewnya lihat point 7 dan point 8

    ReplyDelete
  12. UnknownJanuary 13, 2015 at 6:52 PM

    iya nih view nya please donk gan, penggunaan kata-kata juga blm bener masih radak sulit di pahami bagi new bie :D

    please update it as fast as possible :D

    ReplyDelete
    Replies
    1. Install Server Networking ProgrammingJanuary 13, 2015 at 8:15 PM

      bagian mananya yang kurang paham om :) karena di view cuma menambahkan ini:

      Pada script login tambahkan:

      session_start();

      $_SESSION['kcfinder'] = FALSE;

      Pada script logout tambahkan:

      session_start();

      session_unset('kcfinder');

      Delete
  13. UnknownJanuary 14, 2015 at 1:39 AM

    ane ikuti tutorial dari sini dan sudah ane ikuti tutorialnya gan bahkan baca komenya gan tapi ketika mau upload gambar malah not found itu apanya ya,


    please update it as fast as possible :D


    http://gedelumbung.com/tag/konfigurasi-ckeditor-kcfinder-codeigniter/

    ReplyDelete
  14. UnknownJanuary 14, 2015 at 11:23 PM

    folder tempat ane nyimpan cek editor dan kcfinder berada dalam folder asset


    dan folder asset ini sejajar dengan folder aplication dan system

    jadi begini

    aplication -->controller, model, view, dll

    asset->kcfinder dan cekeditor

    masalah nya ketika ane mau upload gambar not found :D


    Thanks gan

    ReplyDelete
    Replies
    1. Install Server Networking ProgrammingJanuary 14, 2015 at 11:42 PM

      Oh berarti gini om:

      Buka file /asset/ckeditor/config.js, kemudian ketikan kode dibawah ini:

      CKEDITOR.editorConfig = function( config )

      {

      config.filebrowserBrowseUrl = '//asset/kcfinder/browse.php?type=files';

      config.filebrowserImageBrowseUrl = '//asset/kcfinder/browse.php?type=images';

      config.filebrowserFlashBrowseUrl = '//asset/kcfinder/browse.php?type=flash';

      config.filebrowserUploadUrl = '//asset/kcfinder/upload.php?type=files';

      config.filebrowserImageUploadUrl = '//asset/kcfinder/upload.php?type=images';

      config.filebrowserFlashUploadUrl = '//asset/kcfinder/upload.php?type=flash';

      };

      Dengan syarat URLnya tanpa subfolder (atau /) contoh http://example.com/, tapi kalau pake subfolder alamatnya berubah lagi, contoh yang pakai subfolder http://localhost.com/myblog/
      kalau itu berubah jadi:
      config.filebrowserBrowseUrl = '/myblog/asset/kcfinder/browse.php?type=files';

      Semoga sukses om ^_^

      Delete
  15. UnknownJanuary 14, 2015 at 11:57 PM

    tentang masukin integradikan editor cek editor dan kcfinder saja gan tanpa login,

    ReplyDelete
    Replies
    1. Install Server Networking ProgrammingJanuary 15, 2015 at 12:21 AM

      Tidak ada yang aneh2 kok gan cuma edit file config.js punya ckeditor dan config.php kcfinder saja, lebih sabar dan teliti saja mas serta nikmati prosesnya ga usah terburu buru :-)

      Ini isi di web saya untuk config.js ckeditor:
      /*
      Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
      For licensing, see LICENSE.html or http://ckeditor.com/license
      */

      CKEDITOR.editorConfig = function(config) {
      // Define changes to default configuration here. For example:
      config.language = 'en';
      config.docType = '';
      // config.uiColor = '#AADC6E';
      config.basicEntities = false;
      config.entities = false;
      config.entities_latin = false;
      config.disableObjectResizing = false;
      config.resize_maxWidth = 500;
      config.filebrowserBrowseUrl = '/public/editor/kcfinder/browse.php?type=files';
      config.filebrowserImageBrowseUrl = '/public/editor/kcfinder/browse.php?type=images';
      config.filebrowserFlashBrowseUrl = '/public/editor/kcfinder/browse.php?type=flash';
      config.filebrowserUploadUrl = '/public/editor/kcfinder/upload.php?type=files';
      config.filebrowserImageUploadUrl = '/public/editor/kcfinder/upload.php?type=images';
      config.filebrowserFlashUploadUrl = '/public/editor/kcfinder/upload.php?type=flash';
      };

      dan config.php kcfinder:
      $_CONFIG = array(

      'disabled' => isset($_SESSION['kcfinder_uploader']) ? $_SESSION['kcfinder_uploader'] : TRUE,
      'denyZipDownload' => false,
      'denyUpdateCheck' => false,
      'denyExtensionRename' => TRUE,

      'theme' => "oxygen",

      'uploadURL' => "/upload/artikel",
      'uploadDir' => "",

      'dirPerms' => 0755,
      'filePerms' => 0644,

      'access' => array(

      'files' => array(
      'upload' => true,
      'delete' => false,
      'copy' => true,
      'move' => false,
      'rename' => false
      ),

      'dirs' => array(
      'create' => true,
      'delete' => false,
      'rename' => false
      )
      ),

      'deniedExts' => "exe com msi bat php phps phtml php3 php4 cgi pl",

      'types' => array(

      // CKEditor & FCKEditor types
      'files' => "",
      'flash' => "swf",
      'images' => "*img",
      'misc' => "zip",

      // TinyMCE types
      'file' => "",
      'media' => "swf flv avi mpg mpeg qt mov wmv asf rm",
      'image' => "*img",
      ),

      'filenameChangeChars' => array(/*
      ' ' => "_",
      ':' => "."
      */),

      'dirnameChangeChars' => array(/*
      ' ' => "_",
      ':' => "."
      */),

      'mime_magic' => "",

      'maxImageWidth' => 0,
      'maxImageHeight' => 0,

      'thumbWidth' => 100,
      'thumbHeight' => 100,

      'thumbsDir' => ".thumbs",

      'jpegQuality' => 90,

      'cookieDomain' => "",
      'cookiePath' => "",
      'cookiePrefix' => 'KCFINDER_',

      // THE FOLLOWING SETTINGS CANNOT BE OVERRIDED WITH SESSION CONFIGURATION
      '_check4htaccess' => true,
      //'_tinyMCEPath' => "/tiny_mce",

      '_sessionVar' => &$_SESSION['KCFINDER'],
      //'_sessionLifetime' => 30,
      //'_sessionDir' => "/full/directory/path",

      //'_sessionDomain' => ".mysite.com",
      //'_sessionPath' => "/my/path",
      );

      Delete

You can post comment with english language or indonesia language.
Anda bisa memberikan komentar dalam bahasa inggris atau bahasa indonesia.

Subscribe to: Post Comments (Atom)