Cara Integrasi Ckeditor & Kcfinder

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Sebelum kita melakukan integrasi ckeditor & kcfinder sebaiknya kita terlebih dahulu mengetahui apa itu ckeditor dan kcfinder.

CKEditor adalah salah satu WYSIWYG text editor berbasis web yang sering digunakan developer untuk memgatur kontent postingan pada sebuah website. CKEditor merupakan sebuah tool tambahan yang memiliki banyak fitur dalam membantu memberi format penulisan posting yang ingin kita tulis dan berlisensi free (gratis).

KCFinder adalah salah satu plugin populer untuk web file management yang biasa diintegrasikan dengan editor tinymce, ckeditor dan masih banyak lagi yang biasa digunakan oleh para web master.

Untuk dapat menggunakan kedua plugins diatas bersamaan perhatikanlan langkah-langkah dibawah ini

1. Langkah Pertama
Download semua file yang dibutuhkan disini, kalau sobat menginginkan download dari server masing masing plugins silahkan kunjungi link ini ckeditor, kcfinder. Sobat bisa donwload plugins ckeditor dan kcfinder dari link tersebut

2. Langkah Kedua
Buatlah folder ckeditor di folder web server lokal milik sobat biasanya di folder htdocs bagi yang menggunakan xampp kemduian extractlah hasil donwload sobat ke dalam folder ckeditor, untuk struktur folder sobat bisa lihat gambar dibawah ini

3. Langkah Ketiga
Bukalah file config.js yang berada di dalam folder ckeditor, kemudian replace kodenya dengan kode dibawah ini yang berguna untuk mengentegrasikan ckeditor dan kcfinder

CKEDITOR.editorConfig = function( config ) {
 // Define changes to default configuration here. For example:
 // config.language = 'fr';
 // config.uiColor = '#AADC6E';
 config.filebrowserBrowserUrl='kcfinder/browse.php?type=files';
 config.filebrowserImageBrowseUrl='kcfinder/browse.php?type=images';
 config.filebrowserFlashBrowseUrl = 'kcfinder/browse.php?type=flash';
 config.filebrowserUploadUrl = 'kcfinder/upload.php?type=files';
 config.filebrowserImageUploadUrl = 'kcfinder/upload.php?type=images';
 config.filebrowserFlashUploadUrl = 'upload.php?type=flash';
};

4. Langkah Keempat
Bukalah file config.php yang berada di dalam folder kcfinder > conf > config.php, kemudian ganti disabled menjadi false, sobat bisa juga mengatur disablednya menggunkan session. Jika sudah selesesai maka file config.php kcfinder akan terlihat seperti gambar dibawah ini

<?php

/** This file is part of KCFinder project
  *
  *      @desc Base configuration file
  *   @package KCFinder
  *   @version 3.12
  *    @author Pavel Tzonkov <sunhater@sunhater.com>
  * @copyright 2010-2014 KCFinder Project
  *   @license http://opensource.org/licenses/GPL-3.0 GPLv3
  *   @license http://opensource.org/licenses/LGPL-3.0 LGPLv3
  *      @link http://kcfinder.sunhater.com
  */

/* IMPORTANT!!! Do not comment or remove uncommented settings in this file
   even if you are using session configuration.
   See http://kcfinder.sunhater.com/install for setting descriptions */

return array(


// GENERAL SETTINGS

    'disabled' => false,
    'uploadURL' => "upload",
    'uploadDir' => "",
    'theme' => "default",

    'types' => array(

    // (F)CKEditor types
        'files'   =>  "",
        'flash'   =>  "swf",
        'images'  =>  "*img",

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


// IMAGE SETTINGS

    'imageDriversPriority' => "imagick gmagick gd",
    'jpegQuality' => 90,
    'thumbsDir' => ".thumbs",

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

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

    'watermark' => "",


// DISABLE / ENABLE SETTINGS

    'denyZipDownload' => false,
    'denyUpdateCheck' => false,
    'denyExtensionRename' => false,


// PERMISSION SETTINGS

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

    'access' => array(

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

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

    'deniedExts' => "exe com msi bat cgi pl php phps phtml php3 php4 php5 php6 py pyc pyo pcgi pcgi3 pcgi4 pcgi5 pchi6",


// MISC SETTINGS

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

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

    'mime_magic' => "",

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


// THE FOLLOWING SETTINGS CANNOT BE OVERRIDED WITH SESSION SETTINGS

    '_sessionVar' => "KCFINDER",
    '_check4htaccess' => true,
    '_normalizeFilenames' => false,
    '_dropUploadMaxFilesize' => 10485760,
    //'_tinyMCEPath' => "/tiny_mce",
    //'_cssMinCmd' => "java -jar /path/to/yuicompressor.jar --type css {file}",
    //'_jsMinCmd' => "java -jar /path/to/yuicompressor.jar --type js {file}",
);

5. Langkah Kelima
Buatlah file dengan nama index.php, simpan di dalam folder ckeditor dan ketikan kode dibawah ini

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Configuration ckeditor & Kcfinder</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
  </head>
  <body>

    <div id="wrapper">
      <nav class="navbar navbar-light bg-faded">
      <a class="navbar-brand" href="http://aguzrybudy.com">Aguzrybudy.com</a>
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Cara Integrasi Ckeditor & Kcfinder</a>
        </li>
      </ul>
      </nav>
      <div class="container box">
  <form name="form_mahasiwa" action="process.php" method="post" enctype="multipart/form-data">

    <div class="form-group">
   <label for="Title">Title</label>
   <input type="text" class="form-control" id="nim" placeholder="Title" name="title" required>
    </div>

    <div class="form-group">
   <label for="Description">Description</label>
   <textarea class="form-control" id="Description" placeholder="Description" name="description" required></textarea>
    </div>

    <div class="form-group">
   <button type="reset" class="btn btn-danger">Reset</button>
   <button type="submit" class="btn btn-primary">Save</button>
    </div>

  </form>
      </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="ckeditor.js"></script>
    <script type="text/javascript">
   //Script untuk mengaktifkan ckeditor
      CKEDITOR.replace( 'description',{height: 300} );
    </script>
  </body>
</html>

6. Langkah Keenam
Jika semua hal di atas sudah dilakukan dengan baik maka saatnya mengeksekusi apa yang telah kita buat, ketikan di url http://localhost/ckeditor sesuai dengan nama folder sobat, jika berhasil akan terlihat seperti gambar dibawah ini

Kalau sobat membutuhkan source tersebut silahkan download melalui link dibawah ini, jika ada kesalahan atau error bisa disampaikan melalui kolom komentar. Semoga tutorial tips ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan.

• Download