Cara Menambah Fasilitas Upload Image pada TinyMCE

20 March 2011

Sebuah website yang dinamis pasti tidak akan luput dengan yang namanya editing tulisan, kalo pada blog sih tidak ada masalah karena sudah dilengkapi dengan fasilitas editing text tapi kalo pada website yang masih dalam tahap pengembangan tentunya belum ada yang namanya editing text, kecuali beberapa CMS (content management system) yang sudah dilengkapi dengan editing text. Apa itu Editing text ? editing text sangat penting sekali perananya dalam sebuah website dinamis diantaranya adalah untuk memudahkan seseorang dalam mengedit tulisan, menambah gambar, link dan lain sebagainya.

 

Editing text ada banyak macam sebagai misal TinyMCE, Ckeditor dan lain-lain. Namun yang sering kita gunakan dan temui adalah TinyMCE. Dalam TinyMCE kalau kita perhatikan betul masih terdapat kekurangan yaitu fasilitas insert images dalam bentuk url, jika kita punya gambar dari komputer dan ingin memasukkanya sendiri akan melalui beberapa tahapan, yang pertama upload gambar ke server lalu ambil URL gambar tersebut setelah itu insert images pada TinyMCE. Namun dengan adanya plugins ibrowser kita tidak akan melakukan pekerjaan berulang-ulang tersebut, cukup satu kali klik langsung browse file gambar di komputer anda. Mudah bukan langsung saja ikuti petunjuk di bawah ini :

 

1. Download TinyMCE terbaru dan Plugins Ibrowser.

 

2. Ekstrak TinyMCE dan letakkan sesuai pilihan anda diikuti dengan mengekstrak Ibrowser yang harus diletakkan di /tiny_mce/plugins/

 

3. Buka Ibrowser >> Config >> Config.inc.php

$cfg['ilibs'] = array ( // image library path with slashes; absolute to root directory - please make sure that the directories have write permissions
array (
'value' => '/path/to/your/wwwroot/images/', << diisi sesui folder tempat gambarnya
'text' => 'Site Pictures',
),
array (
'value' => '/path/to/your/wwwroot/gallery/', << diisi sesui folder tempat gambarnya
'text' => 'Gallery',
),
);

4. Tambahkan Plugin Ibrowser pada TinyMCE

tinyMCE.init({
mode: "textarea",
elements: "template_content",
theme: "advanced",
plugins : "ibrowser",
theme_advanced_buttons2 : "ibrowser"
<< Jangan dicopy semua, cukup tambahkan saja yang belum ada
});

 

5. Hasil :

 

 

Namun jangan senang dulu karena plugin ini sulit dinstall karena harus cocok antara versi TinyMCE dan versi Ibrowsernya (kalau tidak cocok popup tidak akan keluar, atau error pada saat upload gambar), Ukuran script yang sangan besar diatas 1 Megabyte, dan yang paling penting adalah meload plugins tersebut sangatlah berat untuk hosting gratisan bahkan untuk hosting-hosting tertentu.

 

 

Copyright Maret 2011 @ Klaten WEB.com

Advertiser : Klaten Host.com

Domain hanya 83 ribu (.com, .net, .info, .org)

Hosting 1 Gb hanya 98ribu

Hosting 5 Gb hanya 158ribu

Hosting unlimitec hanya 198ribu

Murah, aman, cepat dan stabil. Pesan Sekarang !!

 

 


Sumber : Jasa Pembuatan Website, Siakad, Simpeg dan SIM Rumah Sakit https://klatenweb.com
Selengkapnya : https://klatenweb.com/artikel/477/Cara-Menambah-Fasilitas-Upload-Image-pada-TinyMCE.html