Update TinyMCE 4.0.1 untuk Lokomedia

Sebelumnya kami minta maaf — sekaligus permohonan maaf menjelang ramadhan — karena selama lebih kurang 6 (enam) bulan vakum tidak menulis tutorial. Kali ini kita akan membahas bagaimana cara mengupdate editor text pada admin lokomedia. Bagi pengguna lokomedia tentunya sudah familiar dengan editor tinyMCE yang digunakan pada halaman admin lokomedia. Namun update lokomedia terakhir belum menggunakan tinyMCE 4.0.1 yang barusan rilis bulan juni kemarin.

Untuk keunggulan tentunya tinyMCE 4.0.1 ini lebih unggul disbanding versi sebelumnya, ditambah banyaknya perbaikan bug pada versi sebelumnya. Dari segi tampilan editor ini terlihat lebih elegant dan mencakup fungsi yang beragam. Memang untuk plugin tambahan belum terlalu banyak ditemukan, karena kemunculannya yang masih baru. Seiring dengan waktu maka plugin yang kita inginkan pun akan diupdate oleh para developer web.

Tidak perlu panjang lebar langsung saja menuju TKP untuk mendownload source code tinyMCEdisini. Untuk menghindari terjadinya kesalahan backup dulu file tinymce versi sebelumnya supaya bisa direset kesetingan awal jika diperlukan. Extract file downloadnya kemudian upload di website kita (direktori default lokomedia terletak pada domain/tinymcpuk/jscripts/tiny_mce/. Replace dengan file baru yang terdiri dari 4 folder (langs, plugins, skins, themes) dan 1 file tinymce.min.js.Setelah itu buat file javascript baru dengan nama tiny_lokomedia.js dengan source code sebagai berikut :

tinymce.init({
    selector: "textarea#loko",
    theme: "modern",
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   content_css: "css/content.css",
   image_advtab: true,
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ],
	file_browser_callback: function openKCFinder(field_name, url, type, win) {
    tinyMCE.activeEditor.windowManager.open({
        file: '../kcfinder/browse.php?opener=tinymce4&type=' + type,
        title: 'KCFinder',
        width: 700,
        height: 500,
        resizable: "yes",
        inline: true,
        close_previous: "no",
        popup_css: false
    }, {
        window: win,
        input: field_name
    });
    return false;
}
 });

Pada source code di atas kita masih menggunakan id=loko untuk textarea yang menggunakan editor ini. Demikian juga dengan file browsenya kita masih menggunakan KCFInder sebagai filemanager. Ini bertujuan agar kita tidak banyak merombak coding yang sudah ada. Namun demikian kita harus menyesuaikan dalam pemanggilan file javascript editor ini pada file media.php dalam folder adminweb menjadi :

<script src="../tinymcpuk/jscripts/tiny_mce/tinymce.min.js" type="text/javascript"></script>
<script src="../tinymcpuk/jscripts/tiny_mce/tiny_lokomedia.js" type="text/javascript"></script>

Jika tidak ingin mengedit lagi file media.php, kita cukup merename file tinymce.min.js menjadi tiny_mce.js seperti versi sebelumnya. Demikian semoga bermanfaat