Kategori Random

Menambah Web File Menager pada CKEditor di CodeIgniter

Posted : 15 September 2016 | 09:10:43 , Dibaca 1895 kali

Pada tutorial sebelumnya telah kita bahas mengenai Implementasi CKEditor di Codeigniter, jika belum dibaca silakan dibaca pada link berikut http://fabernainggolan.net/wysiwyg-editor-menggunakan-ckeditor-di-codeigniter dan pada tutorial ini kita akan lanjutkan untuk penambahan plugin web file manager pada ckeditor. Banyak plugin yang bisa digabungkan untuk urusan manage file ckeditor namun pada pembahasan kali saya akan membahas tentang ckfinder yang direcomendasikan sendiri oleh ckeditor.

Keunggulan utama dari ckfinder adalah

  • Image previews
  • Multiple file uploads
  • Fully customizable
  • Ajax file manager

Nah bagaimana menarik bukan, mari kita lanjutkan untuk implemantasinya di skrip.

Untuk langkah awal silakan didownload pluginnya terlebih dahulu dilamannya yaitu https://cksource.com/ckfinder/download download versi trial saja, jika mau yang full silakan rogoh kocek untuk pembelian lisensinya.

Nah extrak kembali ckfinder yang telah kita download dan letakkan foldernya di folder plugins/ (dalam hal ini saya asumsikan telah mengikuti langkah sebelumnya). Pada tutorial ini saya menggunakan versi CKFinder 3.3.0. Setelah di extrak dan dicopy maka struktur foldernya akan seperti dibawah ini :
 

ci_ckeditor
--- application
--- plugins
--- --- ckeditor
--- --- ckfinder
--- system

 
Library

tambahkan sebuah library pada folder application/library ambil file dari link berikut https://github.com/gLanz/ckeditor/blob/master/ckfinder.php berinama ckfinder.php

Controller

controller yang telah kita buat sebelumnya dirubah seperti skrip dibawah ini

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Form extends CI_Controller {

    public function __construct() {
        parent::__construct();

        $this->load->library(array('ckeditor','ckfinder')); //library ckfinder ditambahkan untuk diload
    }

	/**
	 * halaman awal ketika controller form diakses
	 */
	public function index()
	{
        $width = '100%';
        $height = '300px';
        $this->editor($width,$height);

		$this->load->view('formeditor');
	}

    function editor($width,$height) {
    //configure base path of ckeditor folder
    $this->ckeditor->basePath = base_url().'plugins/ckeditor/';
    $this->ckeditor-> config['toolbar'] = 'Full';
    $this->ckeditor->config['language'] = 'en';
    $this->ckeditor-> config['width'] = $width;
    $this->ckeditor-> config['height'] = $height;

    //configure ckfinder with ckeditor config
    $path = './plugins/ckfinder'; //path folder ckfinder
    $this->ckfinder->SetupCKEditor($this->ckeditor,$path);
  }           
}

untuk file view tidak ada perubahan dan coba kita jalankan dengan cara klik icon image pada toolbar ckeditor seperti gambar dibawah.

setelah kita pasang ckfinder maka setiap url akan muncul tombol "Browse Server" dan ketika klik tombol tersebut maka akan muncul sebuah jendela baru untuk upload file.

Ups apanya yang terjadi kenapa yang muncul hanya tulisan " The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file."

Jika muncul tampilan seperti diatas maka ada yang harus kita ubah pada settinggan config.php ckfinder buka file tersebut dan ubah pada baris

$config['authentication'] = function () {
    return false;
};

menjadi

$config['authentication'] = function () {
    return true;
};

dan coba kita jalankan kembali

dan berhasil.

 

NB : Untuk mengganti folder path upload file silakan ganti pada baris baseUrl pada file config.php ckfinder seperti berikut :

$config['backends'][] = array(
    'name'         => 'default',
    'adapter'      => 'local',
    'baseUrl'      => '/assets/ufiles/', // ganti path folder ini sesuai dengan keinginan jika ingin mengganti
//  'root'         => '', // Can be used to explicitly set the CKFinder user files directory.
    'chmodFiles'   => 0777,
    'chmodFolders' => 0755,
    'filesystemEncoding' => 'UTF-8',
);

 

Demikian tutorial kali semoga bermanfaat.

 

 

ci_ckeditor
---- application
---- plugins
---- ---- ckedito - See more at: http://fabernainggolan.net/wysiwyg-editor-menggunakan-ckeditor-di-codeigniter#sthash.ifRlNWDD.dpuf
ci_ckeditor
---- application
---- plugins
---- ---- ckedito - See more at: http://fabernainggolan.net/wysiwyg-editor-menggunakan-ckeditor-di-codeigniter#sthash.ifRlNWDD.dpuf

Postingan Terkait
» Cetak Laporan Format Excel di Codeigniter ( 25 Jan 2017 | 06:39:12 , 413 hits )
» Membuat Laporan PDF dengan DomPDF di CodeIgniter ( 04 Nov 2016 | 07:42:55 , 554 hits )
» Edit dan Hapus Foto Upload Codeigniter ( 31 Okt 2016 | 08:25:06 , 3257 hits )
» Membuat Paging dan Search Bootstrap CodeIgniter ( 11 Okt 2016 | 16:26:41 , 6662 hits )
» WYSIWYG editor menggunakan CKEditor di CodeIgniter ( 15 Sep 2016 | 03:07:03 , 2145 hits )