Adanya text editor WYSIWYG (what you see is what you get) khususnya pada halaman administrator website menjadi cukup penting guna mempermudah membuat dan mengupdate postingan yang kita buat layaknya menggunakan aplikasi pengolah kata office.
Tetapi berdasarkan pengalaman saya, untuk penginstalan text editor kedalam website yang sedang kita bangun seringkali cukup merepotkan. Apalagi sistem website yang kita bangun berbeda-beda, atau kita mencoba menginstal text editor pada framework yang berbeda, misalnya.
Kali ini kita akan mencoba menginstal text editor yang cukup populer yaitu TinyMCE pada framework laravel 5. Sekaligus kita akan memadukan file manager guna meng-upload foto, video, text, dan lain-lain ke dalam text editor tersebut, yang kali ini menggunakan Responsive File Manager.
Kita mencoba menginstal secara manual tanpa menggunakan composer. Dan hal ini telah saya terapkan di laravel 5 pada localhost. Dan tanpa panjang lebar langsung saja:
Unduh TinyMCE 4 di https://www.tinymce.com/, Untuk pembuatan produksi website dapat memilih Download TinyMCE Community yang ukurannya lebih kecil. Atau menguduh Download TinyMCE Dev Package untuk developer yang juga disertakan keterangan di dalamnya, tetapi ukurannya lebih besar daripada untuk produksi.
Kemudian extract file zip ke folder public pada projek laravel anda dalam localhost.
Agar dapat digunakan tambahkan skrip javascript ke dalam file html utama anda atau pada file yang anda ingin menampilkan text editor seperti menambah dan update postingan. Secara default laravel 5 menyediakan app.blade.php pada folder resources/views.
Tambahkan link javascript antara tag head ditujukan ke tinymce.min.js dalam folder tinymce. Mungkin bisa seperti berikut (tergantung tempat foldernya):
<script type="text/javascript" src="{{ asset('/js/tinymce/tinymce.min.js ') }}"></script>
Kemudian tambahkan lagi javascript:
<script type="text/javascript">
tinymce.init({
selector : "textarea",
plugins : ["advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste"],
toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
image_advtab: true ,
});
</script>
Penggunaan selector: "textarea", hal ini berarti kita akan menggunakan seluruh text editor Tiny pada semua tag textarea. Anda bisa mengganti dengan id sehingga menjadi selector: "#namatextarea", tetapi anda harus menambahkan id="namatextarea" pada textarea anda.
Plugin digunakan untuk memanggil plugin apa yang akan kita gunakan, sedangkan toolbar untuk menampilkan menu-menu yang akan kita gunakan dalam text editor. Sekarang text editor sudah dapat digunakan.
Instal Responsive File Manager
Tetapi biasanya suatu text editor juga menyediakan unggah atau upload image/gambar melalui text editornya tersebut, serperti manajemen file manager gambar. Tetapi sayangnya TinyMCE tidak menyediakan secara langsung dalam package-nya. Namun, kita dapat menambahkan plugin lain yang dapat digunakan sebagai file manager.
Anda dapat menggunakan KCFinder atau elfinder, maupun yang berbayar seperti moxiemanager, atau yang sederhana seperti justboil.
Saat ini kita akan menggunakan file manager yang tampilannya cukup menarik, gratis, dan selain itu juga responsive yaitu Responsive File Manager.
Langsung saja, unduh package di http://www.responsivefilemanager.com/. Setelah di extract, terdapat 4(empat) folder, yaitu filemanager, source, thumbs, dan tinymce.
Copy folder filemanager, source, dan thumbs pada folder public. Folder source akan digunakan sebagai tempat menyimpan file, dan thumbs sebagai thumbnail untuk di tampilkan pada text editor. Sementara, filemanager merupakan pengatur aplikasi.
Buka foder tinymce>plugin, copy folder responsivefilemanager pada folder tinymce yang telah kita taruh pada folder public. Tepatnya di dalam folder public>tinymce>plugin.
Kemudian tambahkan responsivefilemanager ke dalam skrip init tinycme, pada plugins. dan juga beberapa skrip untuk memadukan dengan tinycme. Jadinya seperti ini:
<script type="text/javascript">
tinymce.init({
selector : "textarea",
plugins : ["advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste responsivefilemanager"],
toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image responsivefilemanager",
image_advtab : true,
relative_urls: false,
external_filemanager_path:"{!! str_finish(asset('/filemanager'),'/') !!}",
filemanager_title :"Responsive File Manager" , // bisa diganti terserah anda
external_plugins : { "filemanager" : "{{ asset('/filemanager/plugin.min.js') }}"}
});
</script>Penjelasannya:
- relative_urls: false agar menghindari terjadinya muncul url path lain yang berbeda, url path akan kita ubah nanti pada config.php. Dan ini penting agar file atau gambar yang diupload tetap dapat ditampilkan dimana saja, termasuk halaman frontend.
- external_filemanager_path: tempat kita menaruh folder filemanager eksternal, saat ini kita menaruhnya pada public. str_finish() merupakan fungsi bawaan laravel 5 yang berguna menambahkan satu instance pada string. Kita menggunakan ini untuk menambah slash pada akhir url, lantaran untuk melalui asset akan menghapus slash yang kita tulis pada filemanager itu.
- filemanager_title, judul dari dari popup file manager. Bisa kita namakan apa saja.
- external_plugins, tempat file plugin filemanager eksternal kita.
Selanjutnya kita akan mengubah file config.php yang berada pada public>filemanager>config. Buka config.php tersebut pada text editor skrip kesayangan anda.
Pada
'upload_dir' => '/source/'
, ubah menjadi 'upload_dir' => '/namaprojekanda/public/source/', agar path penyimpanan diarahkan ke folder source, atau anda dapat mengganti nama lain seperti images dan sebagainya, tetapi anda juga harus menambahkan folder images itu ke dalam folder public.
Saat ini saya hanya dapat mengubah secara manual path folder penyimpanan file upload, maksudnya anda harus mengubahnya kembali ketika terjadi berbagai perubahan seperti domain dan lainnya. Mungkin termasuk ketika website telah berada pada hosting sebenarnya, karena saya belum mencobanya.
Apabila teman-teman ada saran yang lebih baik, saya harap dapat menambahkan pada komentar.
