Update Visual Editor di CMS Lokomedia Dengan TinyMCE 4.3.8 & KCFinder 3.12 Versi Terbaru

TinyMCE dan KCFinder adalah dua aplikasi yang disematkan di CMS (Content Management System) Lokomedia untuk memudahkan proses tambah, edit dan upload suatu artikel. CMS Lokomedia ini tergolong mudah untuk diimplementasikan karena memang sudah didesain tinggal pakai atau jika ingin berkreasi, kita bisa memodifikasi CMS dan mengintegrasikan dengan website yang akan kita buat.

Sejak mengimplementasikan CMS ini di website saya beberapa tahun lalu, hingga saat ini belum ada update terbaru dari pihak lokomedia untuk TinyMCE dan KCFindernya. Akhirnya saya menemukan artikel milik cauza dan belajar-yugo yang membahas tentang update dari dua aplikasi ini, meskipun belum terbaru.

Berdasarkan dua link diatas, akhirnya saya mencoba untuk melakukan update TinyMCE dan KCFinder dengan versi paling baru (saat ini) yaitu TinyMCE 4.3.8 dan KCFinder 3.12 di website saya. Ternyata, ada beberapa proses yang tidak sama dan dimulailah proses utak-atik skrip agar dua aplikasi tersebut bisa berjalan bergandengan tangan dengan lancar.

Screenshot TinyMCE – Demo

TinyMCE & KCFinder

Kita bisa download versi terbaru dari TinyMCE di sini dan KCFinder di sini. Setelah berhasil download, ekstrak kedua file tersebut dan rename kedua folder dengan nama tinymce dan kcfinder. Sebelum melakukan upload ke hosting, lakukan rename pada folder kcfinder yang berada di hosting kita dengan nama misalnya kcfinder-old.

Lalu lakukan login ke cpanel atau ftp ke lokasi hosting dan letakkan folder tinymce  dibawah  folder tinymcpuk/jscripts/. Sedangkan untuk folder kcfinder, karena folder kcfinder yang berada di hosting sudah di-rename menjadi kcfinder-old, letakkan saja pada lokasi yang sama dengan folder kcfinder-old.

Pada folder adminweb/tinymcpuk/jscripts/tinymce, buat satu file dengan nama tiny_lokomedia.js dan masukkan skrip berikut :

tinymce.init({
  selector: 'textarea#loko',
  height: 500,
  theme: 'modern',
  plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools'
  ],
  toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons',
  image_advtab: true,
  templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
  ],
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ],
  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;
}
 });

Langkah selanjutnya, buka file config.php yang berada di dalam folder kcfinder/conf. Lakukan perubahan untuk dua baris ini :

'uploadURL' => "../tinymcpuk/gambar",
'_tinyMCEPath' => "../tinymcpuk/jscripts/tinymce",

Proses terakhir, buka file media.php yang berada pada folder adminweb dan lakukan perubahan pada lokasi tinymce :

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

Sampai sini, semua proses sudah selesai. Jika ada pertanyaan atau mungkin saran, silahkan komen dibawah.

Semoga bermanfaat.