Cara Integrasi Elfinder File manager di codeingniter

Berikut ini saya akan membahas tutorial tentang cara Integrasi Elfinder Filemanager pada Codeingniter

Step 1
Download elfinder di website resminya di elfinder
Step 2
Membuat library elfider pada project Codeigniter kita, Copy folder PHP pada file elfinder yang kita download tadi kemudian paste di application/library.
update: 

Step 3
membuat document baru dengan nama Elfinder_lib.php pada folder library kemudian isilah code berikut ini

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

 include_once 'php/elFinderConnector.class.php';
 include_once 'php/elFinder.class.php';
 include_once 'php/elFinderVolumeDriver.class.php';
 include_once 'php/elFinderVolumeLocalFileSystem.class.php';

 class Elfinder_lib{
    public function __construct($opts){
         //for this part see the documentation
         $connector = new elFinderConnector(new elFinder($opts));
         $connector->run();   
    }
 }

Step 4
pada step ini membuat file baru pada folder controller dinama kita membuat initalis elfinder dimana yang nantinya kita akan gunakan pada website kita atau text editor kita

public function elfinder_init(){$this->load->helper('path');   
$opts = array(
    //'debug' => true, 
roots' => array(
array( 
driver' => 'LocalFileSystem', 
path'   => set_realpath('./uploads/'), 
URL'    => site_url('./uploads/') . '/'
)
);
this->load->library('Elfinder_lib', $opts);
}

STEP 5

Membuat file view, load semua asset yang dibutuhkan elfinder, perlu diingat elfinder memputuhkan diantaranya

1. jquery 

2. jquery-ui

Step 6
Membuat folder uploads sesuai path yang kita tuju pada step 4

untuk memanggil filemanager elfindernya tinggal tambahkan script berikut

 <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery('#elfinder').elfinder({
                url: '<?php echo site_url('welcome/elfinder'); ?>',
            }).elfinder('instance');
        });
    </script>

Kemudian buat tag html nya

 <div id="elfinder"></div>

bagaimana kalau menerapkannya dengan text editor tinymce Versi 5.x

seperti contoh berikut 
https://nao-pon.github.io/tinymceElfinder/

cukup download tinymce versi 5.x kemudian load semua asset yg dibutuhkan

1. tinymce.js atau tinymce.min.js

2 tinymeceelfinder.js 

kemudian rubah script jquery pada step 6 menjadi seperti ini 

  <script>
 (function() {
        // make instance
        const mceElf = new tinymceElfinder({
            // connector URL (Use elFinder Demo site's connector for this demo)
            url: '<?= base_url('welcome/elFinder_init') ?>',
            // upload target folder hash for this tinyMCE
            uploadTargetHash: 'l3_TUNFX0ltZ3M', // l3 MCE_Imgs on elFinder Demo site for this demo
            // elFinder dialog node id
            nodeId: 'elfinder'
        });

        // TinyMCE init
        tinymce.init({
            selector: "#editor",
            height : 400,
            
 plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste imagetools wordcount'
  ],
  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            relative_urls: false,
            remove_script_host: false,
            toolbar: "undo redo | styleselect | link image media",
            file_picker_callback : mceElf.browser,
            images_upload_handler: mceElf.uploadHandler,
            imagetools_cors_hosts: ['hypweb.net'] // set CORS for this demo
        });
    })();
</script>
  

kemudian buat lah tag textarea dengan id editor

<texarea id="editor"></textarea>

Selamat Mencoba Semoga Berhasil

Keyword : Tutorial Codeigniter : memasang elfinder pada codeigniter, konfigurasi elfinder di codeigniter 3, integrasi elfinder dan tinymce, tinymce dan elfinder, gabungkan tinymce dan elfinder