Kategori Random

WYSIWYG editor menggunakan CKEditor di CodeIgniter

Posted : 15 September 2016 | 03:07:03 , Dibaca 2352 kali

WYSIWYG adalah singkatan dari What You See Is What You Get (Arti : Apa Yang Anda Lihat Adalah Apa Yang Anda Dapatkan). Istilah ini digunakan dalam perkomputasian untuk menggambarkan suatu sistem di mana konten yang sedang disunting akan terlihat sama persis dengan hasil keluaran akhir, yang mungkin berupa dokumen yang dicetak, halaman web, slide presentasi, atau bahkan pencahayaan untuk acara teater (Sumber : Wikipedia).

dan menurut saya WYSIWYG adalah suatu code untuk membantu kita dalam menuliskan content pada website seperti artikel berita, tutorial dll yang telah dibundle dalam sebuah baris code. WYSIWYG Editor ini mirip dengan penggunaan microsoft word, kita dapat menebalkan huruf(bold),paragraf rata kiri, rata kanan, center, memasukkan special karakter, membuat table, memasukkan gambar, dll.

Ada banyak jenis WYSIWYG Editor yang bertebaran free source code dan dapat digunakan diantaranya : TinyMce, CKEditor, Raptor Editor, Aloha dan masih banyak lagi. Nah pada kesempatan ini saya akan membahas CKEditor dengan implementasi di Framework CodeIgniter, mari kita bahas :

Langkah 1 : Persiapan

Pertama kita harus melengkapi framework dan plugin yang akan kita gunakan.
- Codeigniter framework
- CKEditor plugin download pada laman resmi http://ckeditor.com/download pilih yang Full Package saja

 

buat folder untuk aplikasi kita, saya beri nama ci_ckeditor, kemudian tambah sebuah folder plugins/ dan extrack file ckeditor yang didownload tadi. Struktur foldernya akan seperti dibawah :

 

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

setelah semua dilengkapi kemudian buat sebuah form pada application/views berinama formeditor.php buat seperti dibawah :

 

Langkah 2 : Konfigurasi

perlu diperhatikan konfigurasi awal pada codeigniter
file autoload.php pada folder application/config pada baris autoload[helper] buat seperti dibawah :

$autoload['helper'] = array('url'); 

file routes.php pada folder apllication/config pada baris default_controller ubah seperti dibawah :

$route['default_controller'] = 'form'; //agar ketika kita buka di browser akan otomatis dibuka controller form.php

Langkah 3 : Library

selanjutnya kita buat sebuah library untuk menangani ckeditor dan simpan file skrip pada folder application/library silakan buka dari https://github.com/gLanz/ckeditor/blob/master/ckditor.php

Langkah 4 : Controllers

buat sebuah controller dan beri nama form.php dan simpan pada folder application/controllers/ buat seperti 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')); //library ckeditor diload
    }

	public function index()
	{
        $width = '100%';
        $height = '500px';
        $this->editor($width,$height); //plugin ckeditor di defenisikan pada halaman index

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

    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;
  }
}

Langkah 5 : Views

buat sebuah file views pada folder application/views dan beri nama formeditor.php buat skripnya seperti dibawah :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>
	<style type="text/css">

	::selection { background-color: #E13300; color: white; }
	::-moz-selection { background-color: #E13300; color: white; }

	body {
		background-color: #fff;
		margin: 40px;
		font: 13px/20px normal Helvetica, Arial, sans-serif;
		color: #4F5155;
	}
	a {
		color: #003399;
		background-color: transparent;
		font-weight: normal;
	}

	h1 {
		color: #444;
		background-color: transparent;
		border-bottom: 1px solid #D0D0D0;
		font-size: 19px;
		font-weight: normal;
		margin: 0 0 14px 0;
		padding: 14px 15px 10px 15px;
	}

	code {
		font-family: Consolas, Monaco, Courier New, Courier, monospace;
		font-size: 12px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		color: #002166;
		display: block;
		margin: 14px 0 14px 0;
		padding: 12px 10px 12px 10px;
	}

	#body {
		margin: 0 15px 0 15px;
	}

	p.footer {
		text-align: right;
		font-size: 11px;
		border-top: 1px solid #D0D0D0;
		line-height: 32px;
		padding: 0 10px 0 10px;
		margin: 20px 0 0 0;
	}

	#container {
		margin: 10px;
		border: 1px solid #D0D0D0;
		box-shadow: 0 0 8px #D0D0D0;
	}
	</style>
</head>
<body>

<div id="container">
	<h1>Welcome to CodeIgniter Form Content CKEditor!</h1>

	<div id="body">
		<form action="">
         <table>
         <tr>
         <td>Deskripsi</td>
             </tr>
         <tr>
          <td>
           <?php echo $this->ckeditor->editor('deskripsi','');?>
          </td>
         </tr>
         </table>
        </form>
	</div>

	<p class="footer">Page rendered in <strong>0.0198</strong> seconds. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>
</body>
</html>

skrip diatas hanya sebuah tag html biasa yang saya gabungkan dengan view welcome_mesage.php bawaan dari codeigniter

Nah coba kita jalankan di browser, dan jika berhasil maka hasilnya akan tampak seperti pada gambar dibawah

demikian tutorial kali, jika sudah berhasil maka akan kita lanjutkan untuk penambahan plugin upload file pada ckeditor pada tutorial selanjutnya 

bersambung http://fabernainggolan.net/menambah-web-file-manager-pada-ckeditor-di-codeigniter

Postingan Terkait
» Cetak Laporan Format Excel di Codeigniter ( 25 Jan 2017 | 06:39:12 , 654 hits )
» Membuat Laporan PDF dengan DomPDF di CodeIgniter ( 04 Nov 2016 | 07:42:55 , 1195 hits )
» Edit dan Hapus Foto Upload Codeigniter ( 31 Okt 2016 | 08:25:06 , 3964 hits )
» Membuat Paging dan Search Bootstrap CodeIgniter ( 11 Okt 2016 | 16:26:41 , 7564 hits )
» Menambah Web File Menager pada CKEditor di CodeIgniter ( 15 Sep 2016 | 09:10:43 , 2067 hits )