Plugin TinyMCE Upload Image dengan JBImages, WYSIWYG Editor yang Mampu Mengupload Gambar

Plugin TinyMCE Upload Image dengan JBImages, WYSIWYG Editor yang Mampu Mengupload Gambar ternyata banyak yang membutuhkan, ini penulis ketahui dari artikel sebelumnya yaitu WYSIWYG CKEditor Memakai Upload Gambar dengan CKFinder yang ternyata dibaca oleh cukup banyak pembaca. Kali ini penulis ingin membagi pengetahuan tentang WYSIWYG yang benar-benar open source dan free yaitu Tiny MCE dengan diberi plugin yang juga free yaitu JBImages, sehingga mampunyai fitur untuk meng-upload gambar.

Tiny MCE dapat anda dapatkan di website resminya disini. Kali ini penulis lebih memilih menggunakan Tiny-MCE versi 3.xx daripada versi TinyMCE 4.xx karena pada kenyataannya contoh yang penulis dapatkan dan dapat berjalan dengan addons JBImages adalah yang versi 3.xx. Sedangkan JBImages dapat anda dapatkan di website berikut ini.

Setelah semua file didapatkan maka extract file zip TinyMCE ke dalam direktori tiny_mce, kemudian extract juga file zip JBImages ke dalam direktori tiny_mce/plugins/jbimages. Masukkan direktori tiny_mce ke dalam direktori web yang akan menggunakan, sehingga akan menjadi <website>/tiny_mce, jika anda menggunakan XAMPP ada di dalam folder C:/xampp/htdocs/<website>/tiny_mce, jika menggunakan WAMP akan berada di direktori C:/wamp/www/<website>/tiny_mce.

Selanjutkan jangan lupa menyiapkan direktori untuk meletakkan file gambar hasil upload, misalnya di <website>/images. Agar dapat berjalan maka harus dikonfigurasi dengan cara membuka file yang ada di dalam direktori <website>/tiny_mce/plugins/config.php. Pastikan ada baris berikut ini :

$config['img_path'] = '/jurnal/images'; 
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path']; 

Ubah baris tersebut menjadi :

$config['img_path'] = '/<direktori-website>/<direktori-gambar>'; 
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path'];

dalam hal ini karena penulis menjalankan web dengan folder C:/xampp/htdocs/tinymce-jbimages-upload-gambar dengan direktori gambar di C:/xampp/htdocs/tinymce-jbimages-upload-gambar/images, maka konfigurasinya menjadi :

$config['img_path'] = '/tinymce-jbimages-upload-gambar/images'; 
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path'];

Kemudian simpan file konfigurasi config.php tersebut. Setelah itu Tiny MCE dengan plugin JB Images siap digunakan. Sebagai contoh kita gunakan pada file yang ada di C:/xampp/htdocs/tinymce-jbimages-upload-gambar/index.php dengan isi sebagai berikut :

   <!-- TinyMCE 3.x -->
 
   <script type="text/javascript" src="tiny_mce/tiny_mce_src.js"></script>
            <script type="text/javascript">
             
            //http://cariprogram.blogspot.com
            //nuramijaya@gmail.com

            tinyMCE.init({
             
              mode : "textareas",
                
              // ===========================================
              // Set THEME to ADVANCED
              // ===========================================
                
              theme : "advanced",
                
              // ===========================================
              // INCLUDE the PLUGIN
              // ===========================================
             
              plugins : "jbimages,autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
                
              // ===========================================
              // Set LANGUAGE to EN (Otherwise, you have to use plugin's translation file)
              // ===========================================
             
              language : "en",
                 
              theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
              theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
              theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
             
              // ===========================================
              // Put PLUGIN'S BUTTON on the toolbar
              // ===========================================
             
              theme_advanced_buttons4 : "jbimages,|,insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
                
              theme_advanced_toolbar_location : "top",
              theme_advanced_toolbar_align : "left",
              theme_advanced_statusbar_location : "bottom",
              theme_advanced_resizing : true,
                
              // ===========================================
              // Set RELATIVE_URLS to FALSE (This is required for images to display properly)
              // ===========================================
             
              relative_urls : false
                
            });
             
            </script>
            <!-- /TinyMCE -->
                <form method='post' action=''>
                  <p>
                    Judul :<br/>
                    <input name="judul" id="judul" value="" type="text" />
                  </p>
                    
                    <p>
                    Abstrak :<br/>
                    <textarea name="abstrak" id="abstrak" ></textarea>
                  </p>


                    <p><input name="send" value="Send" type="submit" /></p>
                </form>

Hasilnya, ketika dijalankan dengan URL : http://127.0.0.1/tinymce-jbimages-upload-gambar/index.php akan tampak WYSIWYG Editor TinyMCE dengan Tombol Upload Gambar :

Ketika diklik Upload An Image maka akan muncul jendela Pilih File, Setelah memilih file kemudian klik Upload :

Maka gambar akan muncul di dalam Editor WYSWYG Tiny_MCE dengan Plugins JBImages :

Jika anda kesulitan, download saja contoh projectnya disini. Jika bingung cara donwload,lihat disini.

Semoga berhasil :D

Artikel Terkait: