Memasang Ckeditor dan Integrasi dengan KCFinder

Selamat pagi, pada artikel sebelumnya saya sudah pernah membahas tentang bagaimana cara memasang ckeditor dan integrasi langsung dengan kcfinder pada framework Codeigniter, dan mungkin kurang lengkap jika tidak saya buatkan juga untuk yang tanpa Framework, sebenarnya hampir sama caranya dengan di versi Codeigniter hanya berbeda dari cara pemanggilan filenya saja, baiklah akan saya jelaskan bagaimana cara untuk memasang ckeditor dan integrasikan dengan kcfinder. pada kasus ini saya akan coba pasangkan pada Sistem Informasi akademik sekolah pada quiz (Tambahkan Soal Essay).

Berikut Tahapannya

1. Sebelumnya download dulu CKEditor dan KCfinder dibawah ini :
– http://ckeditor.com/download
– https://kcfinder.sunhater.com/download

2. Masukkan CKEditor dan KCFinder pada directory utama.
3. Selanjutnya mengaktifkan Ckeditor dan Kcfinder include ckeditor.js dengan cara mengisipkan kode berikut pada file index.php di atas tag :

4. dan replace filebrowserImageBrowseUrl, tambahkan kode berikut di atas tag :

5. Selanjutnya buka file “application/quiz_ujian_bank_soal.php” tambahkan atribut id=”editor1″ pada textarea soal essay didalam kondisi $_GET[act]==’tambah’.

6. Untuk security kita tambahkan session agar yang bisa mengakses/upload file hanya user admin yang sudah login saja, buka file “login.php” kemudian setelah/dibawah session level hingga menjadi :

$_SESSION[level] = $r[level];
$_SESSION['upload_image_file_manager'] = true;

7. Terakhir pada file “kcfinder/conf/config.php” Ubah Menjadi :

/** 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 */

session_start();
if($_SESSION['upload_image_file_manager'] == TRUE){
$Auth = false;
}else{
$Auth = true;
}

$_CONFIG = array(
// GENERAL SETTINGS
'disabled' => $Auth,
'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

'_normalizeFilenames' => false,
'_check4htaccess' => true,
//'_tinyMCEPath' => "/tiny_mce",

'_sessionVar' => "KCFINDER",
//'_sessionLifetime' => 30,
//'_sessionDir' => "/full/directory/path",
//'_sessionDomain' => ".mysite.com",
//'_sessionPath' => "/my/path",

//'_cssMinCmd' => "java -jar /path/to/yuicompressor.jar --type css {file}",
//'_jsMinCmd' => "java -jar /path/to/yuicompressor.jar --type js {file}",

);

Simpan semua perubahan dan silahkan logout dan login lagi selanjutnya buka Menu “Quiz/Ujian Online -> Bank Soal” dan kemudian tambahkan soal essay, seharusnya textarea atau inputan soal saat ini sudah menjadi seperti berikut :

Selesai, Semoga bermanfaat dan sampai jumpa lagi pada artikel lainnya, jika anda mempunyai pertanyaan atau kendala silahkan melalui form komentar yang sudah kita sediakan dibawah ini atau juga bisa melalui forum yang sudah kita sediakan di : https://members.phpmu.com/forum, salam,.. ?