<marquee>Memasang Editor TinyMCE pada CMS Lokomedia</marquee>

Artikel 39
Sederhananya, WYSIWYG (What You See Is What You Get) dalam aplikasi web adalah suatu editor yang memudahkan pengguna dalam menuliskan teks, seperti melakukan pemformatan huruf, ukuran huruf, menebalkan huruf, mengatur perataan paragraf, bahkan memasukkan gambar dan media lainnya semudah ketika mengetik di aplikasi Office, seperti Open Office dan Ms. Word.

Meskipun banyak editor WYSIWYG yang tersedia di Internet secara gratis, namun ada dua yang paling populer, yaitu TinyMCE dan CKEditor, karena keduanya digunakan oleh CMS-CMS ternama seperti Joomla!, Drupal, dan Wordpress. Sebenarnya CMS Lokomedia pun sudah menggunakan editor WYSIWYG, yaitu TinyMCPUK yang merupakan gabungan dari TinyMCE dan CKEditor, namun sayangnya TinyMCPUK terhenti pengembangannya sejak tahun 2008, sehingga update terbaru, baik dari segi fitur, plugin, security, dan bug dari TinyMCE dan CKEditor tidak ada dalam editor TinyMCPUK.

Oleh karena itu, saya merespon saran dari kawan-kawan pengguna CMS Lokomedia untuk mengganti editor TinyMCPUK dengan editor lain yang lebih up to date. Terimakasih kepada pak Husada dan Ridho yang memberikan tutorial langsung tentang CKEditor, begitu juga kepada pak Rizal Faizal dan Henry yang memberikan saran TinyMCE. Namun, dengan berat hati saya harus memilih salah satu saja, dalam hal ini saya memilih TinyMCE, namun bagi yang memilih CKEditor pun bagus, nanti tutorial CKEditor juga akan saya posting di website ini.

Beberapa fitur TinyMCE yang saya suka (tidak ada di TinyMCPUK) adalah input syntax highlight (untuk artikel yang ada codingnya), pagebreak (membagi artikel menjadi beberapa halaman atau bisa juga untuk pemotongan paragraf yang akan dijadikan cuplikan artikel, istilah dalam Wordpress adalah Excerpt), dan juga dukungan beragam plugins yang terus bertambah.

Memasang TinyMCE ke CMS Lokomedia cukup mudah, karena editor sebelumnya (TinyMCPUK) juga core-nya mengambil source dari TinyMCE, jadi strukturnya tidak banyak berubah hanya sedikit penyesuaian saja, inilah salah satu alasan dipilihnya TinyMCE. Oke, langsung saja ikuti langkah-langkahnya sebagai berikut:

Download TinyMCE versi terbaru di website resminya di http://tinymce.com atau lebih praktisnya download aja TinyMCE yang telah saya modifikasi dan tambah beberapa plugin penting di http:\\www.bukulokomedia.com/jscripts.rar

Ekstrak file jscripts.rar, nanti hanya ada satu folder yaitu jscripts. Copy-kan folder jscripts ke folder lokomedia/tinymcpuk yang ada di CMS Lokomedia, sebaiknya/sebelumnya hapus semua file yang ada di folder tinymcpuk kecuali folder gambar, sehingga nantinya folder tinymcpuk hanya berisi dua folder, yaitu jscripts dan gambar. Untuk lebih jelasnya, lihat gambar berikut:

Selanjutnya, buka file media.php yang ada di folder lokomedia/adminweb, lalu hapus baris 25 s/d 84, gantikan dengan dua baris kode, lihat perubahan pada baris kode di skrip media.php (perhatikan baris kode 25 dan 26) berikut:

<?php
session_start();
error_reporting(0);
include "timeout.php";

if($_SESSION[login]==1){
        if(!cek_login()){
                $_SESSION[login] = 0;
        }
}
if($_SESSION[login]==0){
  header(location:logout.php);
}
else{
if (empty($_SESSION['username']) AND empty($_SESSION['passuser']) AND $_SESSION['login']==0){
  echo "<link href='style.css' rel='stylesheet' type='text/css'>
 <center>Untuk mengakses modul, Anda harus login <br>";
  echo "<a href=index.php><b>LOGIN</b></a></center>";
}
else{
?>
<html>
<head>
<title>Administrator CMS Lokomedia</title>
  <script src="../tinymcpuk/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
  <script src="../tinymcpuk/jscripts/tiny_mce/tiny_lokomedia.js" type="text/javascript"></script>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
// ...kode selanjutnya

Dan terakhir, tambahkan id='loko' pada masing-masing inputan yang menggunakan textarea, misalnya form berita, maka buka file berita.php yang ada di folder adminweb/modul/mod_berita, ubah kode pada baris ke-138 yang semula:

menjadi {perhatikan tambahan id='loko'}:

Lakukan hal yang sama pada baris ke-196 untuk Edit Berita, lalu simpan file berita.php.

Untuk melihat hasilnya, silahkan masuk/login ke halaman Administrator CMS Lokomedia, lalu klik menu Berita dan klik tombol Tambah Berita, maka pada bagian Isi Berita sudah terlihat editor TinyMCE sudah melekat pada elemen textarea. Lihat gambar berikut:

Trik dan Catatan:

Gambar yang dimasukkan ke textarea akan tersimpan di folder tinymcpuk/gambar, namun kalau dijalankan secara localhost tidak akan tampil di halaman pengunjung, tapi ketika di online-kan akan tampil (settingannya memang untuk online atau input gambar secara online).
Daripada nanti ada yang bertanya, mengapa id='loko'? Silahkan lihat settingannya atau buka file tiny_lokomedia.js yang ada di folder tinymcpuk/jscripts/tiny_mce/.
Apakah folder penyimpanan gambar (tinymcpuk/gambar) bisa diubah? Tentu saja bisa, silahkan buka file config.base.php yang ada di folder tinymcpuk/jscripts/tiny_mce/plugins/ajaxfilemanager/inc/, cari kode pada baris 51 dan 52.
Apakah folder tinymcpuk boleh diganti? Tentu saja boleh, nanti tinggal sesuaikan saja pemanggilannya pada file media.php yang ada di folder lokomedia/adminweb dan file tiny_lokomedia.js (untuk mengarahkan Browse file gambar) di folder tinymcpuk/jscripts/tiny_mce/.
Editor TinyMCE yang kita bahas ini sudah berhasil saya integrasikan dengan CMS Lokomedia, tunggu pada update versi 1.5.8.

Penulis : MumuL Mulyana ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Memasang Editor TinyMCE pada CMS Lokomedia ini dipublish oleh MumuL Mulyana pada hari Sabtu, 12 Mei 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 1komentar: di postingan Memasang Editor TinyMCE pada CMS Lokomedia