Tutorial Integrasi TinyMce 5 Full Featured dan Laravel File Manager Dengan Laravel Versi 8 Terbaru

Ketika kita membutuhkan sebuah editor yang powerfull pada aplikasi web kita tentu pilihan kita akan menuju ke ataupun ke kali ini saya akan membahas secara spesifik ke Tinymce untuk versi terbaru saat ini sudah ada tinymce 5 yang mana sudah lebih powerfull dan banyak peningkatan dari versi sebelumnya yaitu tinymce 4.

TinyMce memiliki beberapa 2 versi yaitu versi berbayar dan versi gratisan untuk produk TinyMce yang berbayar adalah Tiny Cloud dengan menggunakan tinya cloud kita dapat menggunakan seluruh fasilitas dan plugins yang sudah di sediakan oleh Tiny Cloud.

Kurang seru rasanya jika kita tidak membahas versi gratisan yang tentunya banyak dari kita suka gratisan ya kan hehehe… Gimana anda suka gratisan atau berbayar nih ? tulis di kolom komentar ya…

TinyMce juga berbaik hati menyediakan versi gratisannya tentunya dengan limiit fitur yang tersedia salah satu fitur yang paling sering di gunakan adalah upload images namun di versi gratisan ini fitur upload images ini tidak tersedia.

Lalu Bagaimana kalau mau Upload Images ? Tenang gak usah khawatir kita bisa pakai package laravel file manager dari Unisharp

Laravel File Manager Dari Unisharp bisa anda cek

Untuk Cara Integrasi Ini akan kita bahas menggunakan TinyMce 5 versi gratisan kalau versi bayar sepertinya anda bisa sendiri tinggal plug and play aja maklum namanya juga bayar pasti lebih gampang ya dipakai hehehe…

Langkah Pertama anda download dan install TinyMce 5 Dengan cara sbb :

npm install tinymce

setelah itu anda tinggal includekan script tinymcenya ke project anda dikarenakan di laravel ada fitur laravel mix maka saya menggunakan laravel mix berikut step by stepnya :

buka file webpack.mix.js dan tambahkan baris dibawah ini

mix.copy('node_modules/tinymce', 'public/js/tinymce');

setelah itu compile kembali dengan cara

lalu di project laravel kita dapat memanggilnya dengan cara sbb

lalu kita tambahkan script lagi untuk config tinymce nya sbb

<script> var editor_config = { path_absolute : "/", selector: '#mytextarea', relative_urls: false, plugins: [ "advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime media nonbreaking save table directionality", "emoticons template paste textpattern" ], toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media", file_picker_callback : function(callback, value, meta) { var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth; var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight; var cmsURL = editor_config.path_absolute + 'laravel-filemanager?editor=' + meta.fieldname; if (meta.filetype == 'image') { cmsURL = cmsURL + "&type=Images"; } else { cmsURL = cmsURL + "&type=Files"; } tinyMCE.activeEditor.windowManager.openUrl({ url : cmsURL, title : 'Filemanager', width : x * 0.8, height : y * 0.8, resizable : "yes", close_previous : "no", onMessage: (api, message) => { callback(message.content); } }); } }; tinymce.init(editor_config); </script>

script diatas merupakan script dengan plugin full lengkap sehingga apa yang anda butuhkan sudah tersedia

perhatikan pada object selector di config diatas terdapat nama selector dengan tanda id ( # ) mytextarea bagian ini bisa anda ganti apakah anda mau menggunakan class atau id itu terserah anda untuk contoh diatas saya menggunakan id jadi di setiap textarea yang ingin menggunakan editor TinyMce saya cukup buat id nya dengan nama mytextarea berikut contohnya

maka dengan menggunakan id mytextarea maka textarea akan secara otomatis menggunakan editor dari tinymce keren ya..

Seperti yang sudah saya bahas diatas dikarenakan ini versi gratisan maka tidak tersedia fitur upload images maka kita bisa install package laravel file manager dari unisharp.

Berikut Langkah-Langkah Install Laravel File-Manager

Install Packagenya dengan cara sbb

composer require unisharp/laravel-filemanager

lalu publich config laravel file manager dengan cara sbb

php artisan vendor:publish --tag=lfm_config php artisan vendor:publish --tag=lfm_public

Lalu clear cache dengan cara sbb

php artisan route:clear php artisan config:clear

lalu pastikan direktory folder images yang anda setting di config/lfm.php permissionnya sudah writeable

lalu create symbolic link dengan cara sbb

php artisan storage:link

lalu pada file route web.php laravel anda tambahkan baris route baru sbb

Route::group(['prefix' => 'laravel-filemanager', 'middleware' => ['web', 'auth']], function () { \UniSharp\LaravelFilemanager\Lfm::routes(); });

setelah semua langkah diatas anda dapat mencoba menambahkan images melalui editor TinyMce 5 anda seharusya jika tidak ada kendala maka anda dapat sudah dapat melakukan insert images

Kesimpulan

Dengan menggunakan editor TinyMce 5 kita dapat dengan mudah membuat editor dengan fitur yang sangat kaya dengan cara yang sangat mudah tanpa harus membangunnya dari awal dan dengan bantuan laravel file manager maka kita juga bisa melakukan upload gambar pada project laravel anda saran saya jika anda store gambar disarankan anda menggunakan cloud storage sepert s3 file storage dari amazon web service sehingga load web anda akan jauh lebih cepat

Terima Kasih,
Adinata

Referensi Link Terkait

Laravel File Manager silahkan klik disini

TinyMce 5 Silahkan klik disini

Tiny Cloud Silahkan Klik Disini

Tutorial Laravel Symbolic Link silahkan klik Disini

Originally published at https://adinata.id on January 22, 2021.