Cara Memasang Editor TinyMCE di CMS Lokomedia

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


<textarea name='isi_berita' style='width: 600px; height: 350px;'></textarea>


menjadi {perhatikan tambahan id='loko'}:


<textarea name='isi_berita' id='loko' style='width: 600px; height: 350px;'></textarea>


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.


Demikianlah cara mengintegrasikan editor TinyMCE ke CMS Lokomedia, nanti akan saya sambung tutorial mengenai TinyMCE ini, seperti input gambar, input video youtube, dan input syntax highlight.


Salam Hangat,
Lukmanul Hakim

Baca Juga

71 Komentar

  • Yuli | 22 April 2012 - 14:20:24 WIB

    mantaff ..lgsg ke TKP..

  • malysant | 22 April 2012 - 15:02:01 WIB

    Mantap Pak Lukman, akhirnya ada tutor buat pasang TinyMCE :)

    Sukses Terus Lokomedia

  • andi | 22 April 2012 - 15:28:30 WIB

    mantap om makin jaya nie di tunggu updatenya oia...nulis buku donk om kpn

  • chelsea | 22 April 2012 - 17:51:05 WIB

    memang ga salah belajar bersama lokomedia....tutornya mendetail sekalee...

  • tedy | 22 April 2012 - 18:33:22 WIB

    mudah2an ga keluar lagi kode &nbsp; &quot; dll

  • Rizal Faizal | 22 April 2012 - 20:37:16 WIB

    @yuli: webnya keren... wanita kreatif..

  • Jakfar | 22 April 2012 - 20:46:14 WIB

    agar tidak keluar kode &nbsp; &quot; dll, bisa dilihat disini : http://www.tinymce.com/wiki.php/Configuration:entities

    klo tidak salah..hehe

  • thondi | 22 April 2012 - 20:48:40 WIB

    // Jakfar
    Sip Mas :D

  • Jakfar | 22 April 2012 - 20:57:31 WIB

    Kalau mau ganti link seo cms lokomedia seperti ini gmn ya??? www.domain.com/berita/*.html

  • Arie_Wardhana | 22 April 2012 - 22:21:03 WIB

    Pak Lukman : mo nanya nih :kalo ditoko lokomedia di detail produk kok muncul karakter: "���" apa karena tiny mce ya..?

  • petapaa | 22 April 2012 - 23:15:20 WIB

    sundul gan maju terus lokomedia

  • M. Ridho | 22 April 2012 - 23:35:30 WIB

    Azzzeeeeeekkkk ^_^
    lokomedia keren...
    \@/
    |
    /\

  • M. Ridho | 22 April 2012 - 23:39:44 WIB

    @jakfar
    untuk seo link, itu bisa setting di file .htaccess mas, sebagai contoh:
    RewriteRule ^berita/([0-9]+)/(.*)\.html$ nama_file.php?parameter=detailberita&id=$1 [L]

  • luki m | 23 April 2012 - 00:38:15 WIB

    lokomedia emang oke...:)

  • nuris akbar | 23 April 2012 - 05:35:43 WIB

    cara buat tampilan coding bisa seperti itu gimana sih ?
    mohon pencerahanya .... ^_^

  • ifliandry | 23 April 2012 - 06:06:38 WIB

    Alhamdulillah nambah ilmu lagi ..
    terima kasih Lokomedia ...

    "Jika ingin bicara PHP, Lokomedia memang tempatnya" .. hehehe ..

    semoga jadi komunitas yg solid bagi para pengguna PHP

  • bayou | 23 April 2012 - 06:52:26 WIB

    mas lukman..di artikel tertulis "Ekstrak file jscripts.rar, nanti hanya ada satu folder yaitu jscripts..."
    sedangkan isi dari jscripts.rar yang saya download adalah folder tiny_mce..gmn nih??

  • Mulan Astrianda | 23 April 2012 - 08:15:27 WIB

    Saya selalu mengikuti perkembangan CMS Lokomedia. Saya memang mau bertanya tentang tinymcpuk, ternyata di artikel ini saya menemukan jawabannya..
    Terima kasih pak Lukmanul Hakim..

  • download Tugas akhir + aplikasi | 23 April 2012 - 08:55:17 WIB

    wah mantap.. ilmunya.

    ________________________________________

    di www.contoh-ta.blogspot.com anda dapat :
    ________________________________________
    1. download software perpustakaan gratis
    2. download software handphone gratis.
    3. download software lainnya.

  • Jakfar | 23 April 2012 - 09:44:05 WIB

    @M. Ridho

    Tapi mas kalau saya ganti seperti itu, template'a jadi brantakan mas, sepertinya file style.css gak kbaca lagi. kok jd ngaruh gt, gmn mas ya?mungkin mas lukman bisa membantu.

  • tedy | 23 April 2012 - 10:06:09 WIB

    kalau menghilangkan "home" di www.website.com/home jadi www.website.com caranya gimana ya???

  • DSIM | 23 April 2012 - 10:17:19 WIB

    Terima Kasih, Mas
    Udah lama ditunggu
    Untuk Lihat update / situs resmi TinyMCE dimana ya?

  • Jakfar | 23 April 2012 - 11:09:41 WIB

    www.tinymce.com

  • merdeka | 23 April 2012 - 11:16:42 WIB

    ini dia yang ditunggu-tunggu

  • lukman | 23 April 2012 - 11:27:12 WIB

    @all: info dari pak Husada masih ada celah yang cukup berbahaya untuk upload gambar melalui tinymce, jadi saya update ke versi terbaru agar sebelum upload gambar ada username dan passwordnya, semoga lebih secure, silahkan download ulang sourcenya di:

    http://bukulokomedia.com/jscripts.rar

  • lukman | 23 April 2012 - 11:30:30 WIB

    @bayou: di ekstraknya ke folder jscripts, iya nantinya didalam folder jscripts banyak folder dan sub folder lainnya.

  • JoeJunJon_design | 23 April 2012 - 11:32:14 WIB

    @tedy : untuk cara nya bisa lihat disini
    http://www.j3shoper.com/berita-147-menghilangkan-url-h ome-di-page-berandahome-pada-cms-lokomedia.html

    so al nya kalo di terangini disini kepanjangan, nanti dimarahin..he he

  • Dayat | 23 April 2012 - 11:46:57 WIB

    Tutorial yg menarik bung,,update lg..
    Cekidot. . .
    Haturnuwun. . .

  • DSIM | 23 April 2012 - 11:56:42 WIB

    User dan Passwordnya pake yang cpanel atau kolom admin?

  • belajar menjadi web developer | 23 April 2012 - 12:01:12 WIB

    niceedit juga keren kok :)

  • thondi | 23 April 2012 - 12:36:44 WIB

    // Jakfar

    URL SEO FRIENDLY, saya buat tutornya di:
    http://kunciku.com/artikel-110-cms-lokomedia-url-se o-friendly-ala-kuncikucom.html

    // Mas Lukman
    Kalo misal berkenan, bisa diterapkan ke update berikutnya.

  • thondi | 23 April 2012 - 12:39:18 WIB

    aduh lupa kalo karakternya dibatasi :D

    http://kunciku.com

    pokoke liat disana saja :D

  • Briyan | 23 April 2012 - 13:17:22 WIB

    pak lukman ko tiap mw masukin gambar dari tynimce minta login ya??
    itu gmn pak?? username ma password.y apa pak??

  • tedy | 23 April 2012 - 14:22:57 WIB

    @JoeJunJon_design terimakasih udah berhasil :)

  • JoeJunJon_design | 23 April 2012 - 18:35:46 WIB

    @tedy ; sama-sama, tetap semangat berkreasi dan bereksperimen..he he

  • Ridwan Akbar | 23 April 2012 - 19:19:46 WIB

    Utk tinycme sendiri, apakah bisa memuat foto/gambar yg lebih dari 1 jumlahnya didalam 1 artikel? cz saya pake yg tinycmpuk itu hanya bisa memuat 1 foto/gambar didalam satu artikel, sdangkan klo dipaksakan foto/gambarnya dimuat di textarea itu hasilnya akan hancur!!!

  • yud | 23 April 2012 - 19:51:41 WIB

    <textarea name='isi_berita' id='loko' style='width: 600px; height: 350px;>'</textarea>

    seharusnya
    < ;textarea name='isi_berita' id='loko' style='width: 600px; height: 350px;'></textarea>

  • yud | 23 April 2012 - 19:53:17 WIB

    <textarea name='isi_berita' id='loko' style='width: 600px; height: 350px;'></textarea>

  • MRPK | 23 April 2012 - 20:40:23 WIB

    @tedy: Menghilangkan "home" di www.website.com/home jadi www.website.com sudah pernah dibahas di forum.

    http://forum.bukulokomedia.com/topik-31-meng hilangkan-tulisan-home-di-wwwalamatwebcomhome.html

  • Deblonk | 24 April 2012 - 09:00:05 WIB

    Mbok ya tulung di kasih tau cara bikin soal pilihan ganda.. dan penampilan soal nya 1 soal per halaman... terus cara menangkap jawaban serta memberikan nilai peserta nya gimana ya...? yang simple aja...

  • Azreal | 24 April 2012 - 15:48:12 WIB

    untuk username password login sewaktu upload gambar adalah
    username : ajax
    password : 123456

    semoga membantu

  • valcom87 | 24 April 2012 - 16:54:19 WIB

    update trs nih pak lukman..
    trs berkreasi :D

  • Geo | 24 April 2012 - 20:56:25 WIB

    Thanks a lot uda berbagi ilmunya.. sangat bermanfaat

  • Tere | 24 April 2012 - 20:57:37 WIB

    Makasih.. dapat ilmu baru dari sobat!!

  • santo | 24 April 2012 - 22:08:42 WIB

    Permasalahan Yang Sampai Sekarang Saya Belum ketemu Jawabannya waktu menggunakan TinyMCE dan TinyMCPUK Adalah:
    1.Kl Gambar Di Upload pake Tiny, bagaimana cara menampilkannya diheadline berita (masalah pemotongan berita), agar berita yg dipotong tetap ada gambarnya.
    2.Insert Smile dan karakter tidak bisa tampil.
    3.Kl dalam satu berita lebih dari satu Gambar.

  • lukman | 25 April 2012 - 09:39:53 WIB

    @all: maaf, tutorial mengenai TinyMCE sudah saya update ke versi yang lebih secure, silahkan simak di:

    http://bukulokomedia.com/artikel-156-memadukan-tinymce-dan-kcfinder-di-cms-lokomedia.html

    Kalau sudah terlanjur menggunakan TinyMCE di tutorial ini, sebaiknya ganti Username dan Password default ajaxfilemanager, yaitu: ajax dan 123456 yang bisa ditelusuri di file config.base.php yang ada di folder jscripts/tiny_mce/plugins/ajaxfilemanager/

  • Jakfar | 26 April 2012 - 08:53:32 WIB

    Thanks mas thondi

  • download Tugas akhir + aplikasi | 26 April 2012 - 09:03:49 WIB

    update lagi...mantap

    di www.contoh-ta.blogspot.com anda dapat :
    ________________________________________
    1. download software perpustakaan gratis
    2. download software handphone gratis.
    3. download software lainnya.

  • ridha | 26 April 2012 - 20:22:03 WIB

    wah mantab mas lukman .... keren2...

  • merdeka.com | 28 April 2012 - 23:47:47 WIB

    CMS merdeka.com sukses menggunakan teknologi ini! Yahud! Easy!

  • Fazrin | 29 April 2012 - 11:26:27 WIB

    Mas maaf, fitur input syntax highlight (untuk artikel yang ada codingnya), setelah saya coba, ko ga berhasil ya?
    jika menginputkan kode php, malah ga tampil dan ketika di save, kode itu hilang.
    kalaupun ada, tampilannya seperti text biasa. gmana itu?

    waktu menginput kode, memilih bahasa php.

  • Akbar | 30 April 2012 - 09:46:24 WIB

    siap gan
    segera q update gan
    maturnuwun gan

    http://www.basis-web.co.cc/

  • lokomedia lovers | 04 Mei 2012 - 09:28:37 WIB

    "Like" Fanpage Facebooknya CMS Lokomedia di http://tinyurl.com/6skzxl9

    Note:
    - info update web bukulomedia.com
    - info template gratis
    - klo ada spasi dilinknya silahkan dihilangkan spasinya

  • Syaifull | 04 Mei 2012 - 14:04:59 WIB

    Para Master semua, kenapa pas browse gambarnya,muncul pesan error seperti ini:

    Not Found

    The requested URL /xxx/kcfinder/browse.php was not found on this server.
    Apache/2.2.16 (Ubuntu) Server at xx.xxx.xxx.xx Port 80

    Mohon pencerahannya master lokomedia semua?

  • hendra | 08 Mei 2012 - 05:35:58 WIB

    all pkabar semua?? akhirnya bisa berkunjung lgi..

    di cms kita ini apa aja bisa loh..cek aq baru saja update komentar ada gravatarnya, didesaign mirip dengan forum kita punya

    nih satu contoh link nya : http://tokoaslionline.com/berita-71-daemon-tools-pro-advan ced-4410314-full-patch.html

    ---------------tokoasl ionline.com--------

  • Ahmad Tauhid | 08 Mei 2012 - 20:37:35 WIB

    Mantap Master!! Makasi Info.a :)

  • armyrosi | 19 Mei 2012 - 19:51:13 WIB

    sesuai dengan artikel ini, bagaimana cara pasang Editor TinyMCE di forum lokomedia

  • anto | 19 Mei 2012 - 21:40:31 WIB

    Terima kasih infonya

  • chris | 07 Juni 2012 - 07:54:10 WIB

    Pada saat dionlinekan, waktu menginsert gambar, dan klik browse, muncul pesan Cannot write to upload folder/usr/local/apache/htdocs/kcfinder

  • chris | 07 Juni 2012 - 07:55:46 WIB

    Pada saat dionlinekan, waktu menginsert gambar, dan klik browse, muncul pesan Cannot write to upload folder/usr/local/apache/htdocs/kcfinder
    http://burinoin terior.com/

  • ijang | 10 Juni 2012 - 20:59:41 WIB

    Ko malah ga ada ya tiny_mce nya , pas dipasang ??? padhal sudah diganti sesuai trik diatas ...

  • kifly | 06 Agustus 2012 - 00:16:18 WIB

    tolong dong dibantu, knp pada saat sy coba insert gambar di halaman statis tampil pesan error seperti ini Not Found

    The requested URL /simulasi/kcfinder/browse.php was not found on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    tolong dong solusinya om lukman.

  • Andhi Irawan | 05 September 2012 - 16:52:11 WIB

    mas tinymce kalau memasukkan format numbering hasilnya jadi berantakan.solusinya gimana ya.contoh numbering:

    1. Satu
    a. Test a
    b. Test b
    c. Test c
    i. Romawi i
    ii. Romawi ii
    iii. Romawi iii
    d. Test d
    2. Dua
    a. Test a
    A. Huruf A
    B. Huruf B
    C. Huruf C
    I. Romawi I
    II. Romawi II
    a) Huruf a)
    b) Huruf b)
    3. Tiga
    1) Test 1)
    2) Test 2)
    3) Test 3)
    4. Empat
    5. Lima

  • Mudz | 21 September 2012 - 13:25:02 WIB

    Saya termasup penggemar buku Mas Lukman. Saya lg nyoba2 pake TinyMCE, untuk memasang textarea yg. ada pada page misalnya inputberita.php, file inputberita.php ini diloadnya menggunakan javascript dari file index.html, itu setingnya gimana ya Mas, 3 hari pusing ni. Mohon pencerahan. Terima kasih.

  • home proudsche me | 25 Oktober 2012 - 16:57:26 WIB

    ewryiyaf ahdf

  • www.discountstoresreviews.com | 01 November 2012 - 20:14:34 WIB

    This is f@@king bullsh*t!! Where is the Wii love?!

  • gusnanto | 17 November 2012 - 11:58:20 WIB

    mas kalau editornya di update tinyMCE yang terbaru bisa gak? gmn cara integrasi dg cms lokomedia

  • baim | 21 November 2012 - 02:27:36 WIB

    To.AdminLokomedia,,
    Mas.Gusnanto saya sundul..:D pertanyaannya sama, terus ada satu lagi yaitu..
    Apa bisa id='loko' diubah menjadi yg lain misalkan id='text', atau lainnya?
    Mohon bantuannya,thanks

  • Modifikasi TinyMCE | 12 Februari 2013 - 15:42:26 WIB

    Walaupun TinyMCE lebih baik dari segi fitur, plugin, security, dan bug , namun satu hal yang mungkin satu hal yang tidak bisa dilakukan adalah : Copy dan Paste pada area textarea nya.

    Dan TinyMCE yg sy modifikasi ini dapat mengatasi hal diatas. Anda pun bebas melakukan Copy dan Paste dalam textarea TinyMCE itu.

    langkah awal silahkan unduh TinyMCE yg telah sy modifikasi:
    http://www.teraskreasi.com/tiny_mce.rar

    Lalu replace pada folder: .. \tinymcpuk\jscripts
    catatan dalam hal ini sy memakai lokomedia-1.6.1

    rubah id setiap bagian <textarea> menjadi
    contoh: <textarea name='isi_berita' id='teraskreasi' style='width: 600px; height: 350px;'></textarea>

    Modifikasi TinyMCE ini juga dilengkapi skin2 yang elegan berbasis Bootstrap.

    Selamat Mencoba.
    www.teraskreasi.com

  • satukarir | 08 Juli 2013 - 12:57:16 WIB

    situs lowongan kerja terbaru

  • sugeng | 23 Oktober 2013 - 19:27:22 WIB

    saya mencoba web lokomedia secara online cuma waktu saya latihan mau edit berita di bagian image (http://contoh.com/tinymcpuk/filemanager/browser.html?Conn ector=connectors/php/connector.php&Type=Image) folder yang ada image ngak muncul terus waktu saya lihat di browsingnya menunjuka pada alamat waitung for stat hosting24.com.terus saya mencoba uploap gambar muncul kesalahan "Invalid XML response from connector" apa ada yang belum saya setting ulang? saya udah ubah dibagian $fckphp_config['UserFilesPath'] = "./tinymcpuk/gambar" ;

    waktu saya coba secara localhost tidak ada masalah. apakah itu pengaruh pada hostingnya yang grati? saya mohon pencerahaannya dari teman teman