Catatan Seorang Prajurit Kecil

Ikon

biarlah semua itu berjalan sesuai "skenario" NYA – jika kau telusuri, semua logika itu akan kau temukan

Ajax File Manager on TinyMCE Plugins


Akhirnya setelah ber pusing-pusing ria mencari resource plugins buat TinyMCE (http://tinymce.moxiecode.com) dan/atau FCKEditor (http://www.fckeditor.net), ujung-ujungnya ketemu juga, tapi walaupun sudah ketemu, masih mengalami permasalahan pada saat installasi dan penggunaan, tapi Alhamdulillah setelah sedikit bongkar-bongkar source nya, akhirnya ketemu juga error nya, oke langsung aja, singkat cerita saya pengen share sedikit mengenai Web based Client Editor menggunakan TinyMCE + Plugins Ajax File Manager.

TinyMCE merupakan salah satu web based client editor yang cukup populer dan sudah terbukti handal sehingga banyak digunakan oleh CMS ataupun Blog Provider kelas atas seperti Joomla dan WordPress, namun sayangnya terdapat sebuah kelemahan besar (saya rasa kelemahan ini memang disengaja oleh vendor TinyMCE untuk alasan bisnis…) yaitu secara default, TinyMCE tidak menyertakan file manager untuk meng-upload ataupun meng-include kan gambar kedalam text editor nya, oleh karena itu kita harus membuat plugin sendiri untuk fasilitas tersebut (sebenarnya untuk fasilitas ini vendor TinyMCE sudah membuat plugin File Manager yang terpisah dari paket TinyMCE tetapi tidak free alias kita harus beli).

Tentu sebagian besar programmer, khususnya di Negara kita, “tidak mau” membuat plugins ini, salah satu alasan yang paling menonjol adalah masalah waktu, lebih baik membuat program lain yang “lebih berguna” daripada harus menghabiskan waktu berhari-hari atau bahkan ber minggu-minggu sampai berbulan-bulan hanya untuk membuat plugins ini, karena orang-orang Barat sono, pasti sudah ada yang bikin, dan biasanya mereka berbaik hati mem-free kan alias memberikan source nya secara gratis.

Termasuk saya adalah salah satu tipe programmer seperti ini. Akhirnya setelah kurang lebih 2 (dua) jam browsing, ketemu dengan salah satu vendor plugin yang memberikan plugin file manager untuk TinyMCE secara gratis, yaitu PHPLetter (http://www.phpletter.com), nama pluginnya adalah Ajax File Manager. Walaupun diberikan secara gratis, plugins ini bukan berarti plugins murahan, setelah saya coba, fitur dan tampilannya sangat bagus sekali, dan dilihat dari fasilitas serta prosesnya juga cukup baik. Plugins ini bisa dijalankan di TinyMCE dan/atau FCKEditor.

Singkat cerita, setelah download paket nya, langsung coba di rumah. Satu per satu fitur saya coba, hingga akhirnya mencoba fitur upload yang mengalami gangguan (file gambar tidak bisa ter-upload), lumayan panik sih, soalnya paket plugins ini tidak menyertakan Readme ataupun dokumentasi lainnya, kalaupun ada, hanya sedikit dan itupun tata cara installasinya. Ya udah…akhirnya saya putuskan untuk membongkar source nya dan melakukan tracing. Setelah kurang lebih 2 (dua) jam-an bongkar-bongkar source, akhirnya ketemu juga permasalahnnya, seperti biasa, dugaan saya sebelumnya juga memang sudah mengarah ke path destination upload file nya, dan ternyata memang benar, masalahnya disana. Untuk itu, bagi teman-teman yang ingin menggunakan plugins ini, harus melakukan sedikit modifikasi pada source nya, tepatnya pada file ajax_file_upload.php yang terdapat pada direktori jscripts\tiny_mce\plugins\ajaxfilemanager. Perhatikan baris ke -31, yaitu script berikut:

elseif(!$upload->moveUploadedFile($_GET[‘folder’]))

Jika kita alert $_GET[‘folder’] maka akan menghasilkan path ‘../../../../uploaded’, nah untuk itu kita cukup mengganti parameter $_GET[‘folder’] dengan path yang sesuai dengan server kita. Teknik untuk menggantinya bisa bermacam-macam, bisa menggunakan file config ataupun langsung pada parameter tersebut, tergantung kebutuhan dan kreativitas teman-teman.

Oke, segitu aja semoga bisa bermanfaat bagi teman-teman, oh ya, berikut ini gambaran screen shoot dari plugin ini.

Ini adalah screen shoot dari tampilan TinyMCE nya

Jika kita klik tombol icon add image, akan ditampilkan dialog berikut:

Pada dialog ini akan terlihat bahwa Ajax File Manager sudah terinstall pada TinyMCE kita, yaitu terbukti dengan adanya tombol browse (sebelah kanan kotak Image URL), coba kita klik, kita akan melihat tampilan dari plugins ini

Diatas adalah tampilan dari Plugins Ajax File Manager, sekarang coba lakukan Upload dengan mengklik Link Upload dikanan atas, akan tampil dialog untuk mengupload gambar

Yang menarik dari sistem upload pada plugins ini adalah, kita bisa mengupload beberapa gambar secara asynchronous.

Selamat mencoba…

Filed under: Algorithm and Programming, , ,

15 Responses

  1. dedekusn mengatakan:

    Plugin menarik walau keliatan ribet…🙂
    But, thanks infonya

    ‘http://dedekusn.com’

  2. prazetyo mengatakan:

    apa bisa misalnya langsung diganti dengan :

    elseif(!$upload->moveUploadedFile(/images))

    atau bisa dipanggilkan dari variabel yang sudah didefinisikan?

  3. Artha mengatakan:

    wah rupanya bisa di ubah-ubah ya

  4. Joet mengatakan:

    Wah boleh juga neh Om.. mampir ye om!

  5. orang bebas mengatakan:

    trims sebelumnya atas infonya. saya masih baru nich, boleh minta bantuan cara mendeklarasikan di halaman web. soalnya tampilan saya icon tidak sebanyak itu dan kalo dikli add/edit image masih error (@GEt[folder] bisa kasih contoh script gantinya). terima kasih
    untuk informasi, ini deklarasi saya di halaman web:

    tinyMCE.init({
    mode : “textareas”,
    });
    tinyMCE.init({
    mode : “exact”,
    elements : “ajaxfilemanager”,
    theme : “advanced”,
    plugins : “table,advhr,advimage,advlink,flash,paste,fullscreen,noneditable,contextmenu”,
    theme_advanced_buttons1_add_before : “newdocument,separator”,
    theme_advanced_buttons1_add : “fontselect,fontsizeselect”,
    theme_advanced_buttons2_add : “separator,forecolor,backcolor,liststyle”,
    theme_advanced_buttons2_add_before: “cut,copy,paste,pastetext,pasteword,separator,”,
    theme_advanced_buttons3_add_before : “tablecontrols,separator”,
    theme_advanced_buttons3_add : “flash,advhr,separator,fullscreen”,
    theme_advanced_toolbar_location : “top”,
    theme_advanced_toolbar_align : “left”,
    extended_valid_elements : “hr[class|width|size|noshade]”,
    file_browser_callback : “ajaxfilemanager”,
    paste_use_dialog : false,
    theme_advanced_resizing : true,
    theme_advanced_resize_horizontal : true,
    apply_source_formatting : true,
    force_br_newlines : true,
    force_p_newlines : false,
    relative_urls : true
    });

    function ajaxfilemanager(field_name, url, type, win) {
    var ajaxfilemanagerurl = “http:////ajaxfilemanager/ajaxfilemanager.php?editor=tinymce”;
    switch (type) {
    case “image”:
    break;
    case “media”:
    break;
    case “flash”:
    break;
    case “file”:
    break;
    default:
    return false;
    }
    var fileBrowserWindow = new Array();
    fileBrowserWindow[“file”] = ajaxfilemanagerurl;
    fileBrowserWindow[“title”] = “Ajax File Manager”;
    fileBrowserWindow[“width”] = “782”;
    fileBrowserWindow[“height”] = “440”;
    fileBrowserWindow[“close_previous”] = “no”;
    tinyMCE.openWindow(fileBrowserWindow, {
    window : win,
    input : field_name,
    resizable : “yes”,
    inline : “yes”,
    editor_id : tinyMCE.getWindowArg(“editor_id”)
    });

    return false;
    }

  6. Info Perumahan mengatakan:

    Trims Om atas tutorial nya untuk upload gambar melalui TinyMCE

  7. Santo mengatakan:

    Halo Bro,
    Mau Tanya, saya juga menggunakan AjaxFileManager, tapi ada kendala. Dilocalhost maupun hosting disalah satu hosting, component AjaxFileManager berjalan dengan baik, akan tetapi pada saat saya mengupload kesebuah hosting lain, tetapi malah tidak jalan.
    Yang tidak jalan adalah pada saat akan mengexplore folder dan upload image. Seakan2 terkena blokir oleh settingan server. Mohon petunjuk atau informasi mengenai masalah ini.

    Terima kasih,
    Santo

  8. Ananta Kirani Zulvani mengatakan:

    @santo: biasanya untuk hosting sering terjadi permasalahan pada akses folder nya (file permission)…

  9. Santo mengatakan:

    Hmm, kalau untuk file permission sudah diset dengan benar, hanya terdapat fitur server yang memblok penggunaan itu, seperti mod_security dan file recursive function. Ada yang bisa membantu, masalah ini masih open sampai saat ini. Thanks semua bantuan sangat diharapkan.

    Terima kasih,
    Santo

  10. hansem mengatakan:

    maaf nanya kalau destinision foldernya di ubah bisa nggak?
    gimana caranya…

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: