Skip to content

Ngoprek TinyMCE 2 – TinyMCE Modifikasi Support Image Upload…

Juni 28, 2011
TinyMCE dikenal oleh para programmer aplikasi berbasis web. Fasilitas ini memiliki fungsi utama adalah memberikan ruangan posting dengan tampilan WYSWYG (What You See Is What You Get). Semua blog tentu memiliki halaman kolom posting textarea yang simple menyerupai MS-Word. Dengan bantuan alat ini kita dapat menambah ukuran font, dapat melakuan penggantian paragraf dan lain sebagainya. Fasilitas pendukung textarea berbasis WYSWYG ini memang cukup banyak. Bermodalkan Ajax/Javascript, fasilitas ini benar-benar enak digunakan. Contoh selain TinyMCE adalah Rte dan FckEditor.

TinyMCE bukan tanpa masalah. Bersama teman-temannya itu, TinyMCE ternyata masih belum support dengan upload image..(entah kalau keluaran sekarang). Proses menyertaan gambar masih harus dilakukan sendiri-sendiri, kemudian baru dilakukan insert URL dari Image tersebut… Setelah googling-googling sana sini dan belum dapat yang ‘simpe’ untuk pengguna biasa, akhirnya saya mencoba melakukan modifikasi, dan disini saya tadi mencoba oprek beberapa file dan akhirnya… sepertinya bisa dikatakan berhasil dengan beberapa catatannya.

TinyMCE editan sana-sini ini, memiliki kemampuan :

  1. Melakukan pemilihan filetype Image. Disini tidak digunakan filter Extension, tapi digunakan filter Filetype. Ini jauh lebih aman, menghindari jika pengguna mengupload file web-executable tetapi mengelabui dengan extension image. Image yang dipilih adalah jpeg, png, dan gif. Extension apapun akan tetap dapat masuk, jika filetype sesuai
  2. langsung melakukan penyertaan gambar pada postingan. Namun untuk file yang tersimpan di localhost masih menggunakan “/filedir/image.jpg” bukan “http:/dir/filedir/image.jpg”
  3. Resize Image pada bagian posting.

Nah berikut contoh gambar dalam melakukan inserting gambar. Proses ini akhirnya menjadi mirip dengan proses dalam memasukkan image di blog-blog, termasuk Multiply


Gambar 1. Tampilan pertama TinyMCE


Gambar 2. Tampilan insert gambar. Pada TinyMCE biasa hanya memasukkan ImageURL

Gambar 3. Tombol Browse

Gambar 4. Muncul halaman upload

Gambar 5. Memilih File

Gambar 6. Seluruh gambar yang ada pada direktori Uplad Image akan tampil

Gambar 7. Akan ditampilkan file yang telah diupload

Gambar 8. Halaman Konfirmasi tentang informasi data Image


Gambar 9. Image berhasil disertakan dalam posting.

Untuk pengguna TinyMCE, hanya perlu melakukan beberapa hal.. yaitu

  1. Sebaiknya menyertakan tinyMCE pada direktori tertentu. Untuk kasus pada aplikasi saya, saya letakkan di bawah direktori libs.

    /index.php
    /images
    /files
    /scripts
    /libs/
          -tinyMCE_img_support/
                                           /tinymce
                                           /additional
                                           /tinyMCE.conf.inc.php
                                           /tinyMCE.func.inc.php

  2. Menyertakan modul tinyMCE_init sebelum membentuk textarea. Dalam aplikasi ini, developer hanya perlu men-include file tinyMCE.func.inc.php, yang di dalamnya terdapat tiniMCE init, yang diletakkan dalam module PHP tinyeditor().
    Contoh:
    <?php
    include “libs/tinyMCE_img_support/tinyMCE.func.inc.php”;

    tinyeditor();
    ?>
    <form name=”coba” action=”test.php” method=”post”>
    <textarea name=”berita” id=”elm1″></textarea>
    </form>

    Bagian yang ditebali ini akan menjadi WYSWYG

  3. Menggunakan id=”elm1″, atau “elm2” dan seterusnya untuk element textarea yang akan ditampilkan sebagai elemen WYSWYG
  4. Menentukan letak direktori image, dan base url. seperti berikut
    $filedir = “/var/www/tinyMCE_img_support/bmsimages”;
    $baseurl = “http://localhost/tinyMCE_img_support/”;
    $basetiny_image_url = “http://localhost/tinyMCE_img_support/bmsimages/”;


    $kb_size = 1000; //SIze of your image
    $oversize_error = “File anda tidak boleh lebih dari $kb_size;”;

  5. Memastikan bahwa direktori image, writeable terhadap Web Server.

Nah mudah kan? Hanya perlu meng-include function, dan menentukan kevalid-an direktori tempat upload…

Anda dapat mendowload DISINI

Naaaah daripada cari yang berbayar agar bisa upload gambar… silakan download… gratis, sudah dioprek berbagai macam tangan, mudah pakenya

PROGRAMMER JUGA MANUSIA…

From → Tak Berkategori

11 Komentar
  1. aryakidzz permalink

    gan ane ada yg eror nie….

    Warning: opendir(/var/www/tinyMCE_Img_Supported/bmsimages) [function.opendir]: failed to open dir: No error in C:\xampp\htdocs\TA\admin\additional\bmsupl.php on line 37

    Warning: readdir(): supplied argument is not a valid Directory resource in C:\xampp\htdocs\TA\admin\additional\bmsupl.php on line 38

    apanya tu salah gan???
    mohon bantuan gan

  2. BeeMa permalink

    dirubah aja direktorinya mas..
    sepertinya itu salah direktori,
    dicontoh diatas sepertinya pake linux (/var/www/tiny___dst)
    sedangkan mas arya pake windows (xampp)
    coba alamat dirnya diperbaiki aja..
    moga bisa membantu,,

    *CMIIW

  3. bang kok punya saya pas upload file ada tulisan

    Warning: opendir(/var/www/tinyMCE_Img_Supported/bmsimages,/var/www/tinyMCE_Img_Supported/bmsimages): The system cannot find the path specified. (code: 3) in C:\xampp\htdocs\tinyMCE_images\additional\bmsupl.php on line 37

    .
    itu kenapa ya ?
    balesan tolong di kirim lewat email ya thx banget bang
    christiawaeko@yahoo.com

  4. bang…. gimana caranya biar saat insert image ada tag “a”.
    misalnya kita mw insertkan “http://local/gambar.jpg” :
    hasil standardnya kan ,
    klo pengen hasilnya :

    gimana ya??

  5. bang…. gimana caranya biar saat insert image ada tag “a”.
    misalnya kita mw insertkan “http://local/gambar.jpg” :
    hasil standardnya kan ,
    klo pengen hasilnya :

    gimana ya??

    • kalau tidak salah, proses memberikan LINK itu bukannya di halaman editor ya mas🙂 , coba setelah gambar terupload, klik satu kali gambarnya, dan pilih icon hyperlink🙂

      selamat mencoba

  6. Gede permalink

    Wah terima kasih banyak mas Bro uploader nya jalan dgn baik, postingan nya sangat membantu saya.
    Thx.

  7. gan downloadnya mati, bisa dkirim ke email?

  8. Thanks gan, di book mark dulu deh, salam kenal gan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: