Membuat Text Editor dengan CKEditor Menggunakan PHP

Mari Belajar Coding    4/12/2019    php   

Selamat datang kembali di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar membuat form dengan text editor seperti saat kita ingin menulis sebuah artikel di blogspot atau wordpress. Ada beberapa plugins yang menyediakan text editor wysiwyg seperti CKEditor, TinyMCE, Froala dan masih banyak lagi. Akan tetapi pada tutorial ini saya akan menjelaskan cara membuat text editor menggunakan plugin CKEditor.

 Cara Membuat Text Editor dengan CKEditor 

Download plugin Ckeditor terlebih dahulu. Silahkan pilih yang full package untuk mendapatkan semua fitur yang ada di CKEditor.

Download KCFinder, KCFinder adalah file manager yang dapat diintegrasikan ke dalam text editor web seperti FCKeditor, CKEditor, dan TinyMCE untuk mengunggah dan mengelola gambar, film flash, dan file lain yang dapat disematkan dalam konten HTML yang dihasilkan editor.

Buat folder editor didalam directory xampp/htdocs. Silahkan ekstrak plugin CKEditor dan KCFinder yang telah download kemudian copykan kedalam directory xampp/htdoc/editor. 

Sekarang terdapat 2 folder ckeditor dan kcfinder yang berada di dalam directory xampp/htdocs/editor. 

Setting config.js yang berada di dalam folder ckeditor untuk mengintegerasikan ckeditor dengan kcfinder. Tambahkan kode berikut ini tepat di dalam function  CKEDITOR.editorConfig = function( config )

config.filebrowserBrowseUrl = 'http://localhost/editor/kcfinder-3.12/browse.php?opener=ckeditor&type=files';
    config.filebrowserImageBrowseUrl = 'http://localhost/editor/kcfinder-3.12/browse.php?opener=ckeditor&type=images';
    config.filebrowserFlashBrowseUrl = 'http://localhost/editor/kcfinder-3.12/browse.php?opener=ckeditor&type=flash';
    config.filebrowserUploadUrl = 'http://localhost/editor/kcfinder-3.12/upload.php?opener=ckeditor&type=files';
    config.filebrowserImageUploadUrl = 'http://localhost/editor/kcfinder-3.12/upload.php?opener=ckeditor&type=images';
    config.filebrowserFlashUploadUrl = 'http://localhost/editor/kcfinder-3.12/upload.php?opener=ckeditor&type=flash';

Teman-teman bisa ganti url sesuai directory yang di buat.

Buka config.php yang berada di dalam directory kcfinder-3.12/conf/config.php. Ganti value true menjadi false pada variabel disabled. Lihat kode dibawah ini yang diberi highlight.

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

$_CONFIG = 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

    '_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}",

);

?>

Buat file index.php untuk menampilkan form editornya. 

<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
</head>
<body>
<div align="center">
 <H3>Membuat Text Editor dengan CKEditor</H3>
 <table>
  <form>
  <tr>
   <td>Artikel</td>
   <td><textarea id="artikel" name="artikel"></textarea></td>
  </tr>
  <tr>
   <td></td>
   <td><input type="submit" name="simpan" value="Simpan"></td>
  </tr>
  </form>
 </table>
 <h3><a href="https://www.maribelajarcoding.com">maribelajarcoding.com</a></h3>
</div>
 <script src="ckeditor/ckeditor.js"></script>
  <script src="ckeditor/styles.js"></script>

  <script type="text/javascript">
   CKEDITOR.replace('artikel');
  </script>
  
</body>
</html>

Keterangan:
CKEDITOR.replace untuk konfigurasi ckeditor dengan id atau name tag <textarea>.

Jalankan file index.php menggunakan browser dengan mengetikkan url localhost/editor.

Source code:

editor.rar

Related search:
Cara membuat text editor artikel 
Cara membuat text editor dengan CKEditor
Cara upload gambar di CKEditor