DEV Community

Cover image for Menggunakan Tinymce Di Laravel
MedanInCode
MedanInCode

Posted on

Menggunakan Tinymce Di Laravel

Menggunakan TinyMCE Di Laravel.TinyMCE sendiri adalah salah satu plugin WYSIWYG yang paling sering digunakan saat ini.Cara paling mudah untuk memakai TinyMCE dengan link CDN seperti dibawah ini.

<textarea class="form-control" name="editor"></textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.9.2/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector:'textarea.editor',
        width:1000,
        height: 300
    });
</script>
Enter fullscreen mode Exit fullscreen mode

Tetapi kurang kita sarankan,karena kalau tiba-tiba halaman cdn berubah atau dihapus ,maka aplikasi yang memakai TinyMCE akan error.

Install dan Menggunakan TinyMCE di Laravel

Untuk memakai TinyMCE dengan laravel,kita akan menggunakan package npm untuk TinyMCE,bawaan laravel sendiri sudah mendukung penggunaan dengan npm.Kamu hanya perlu pastikan Node.js tersinstall di komputermu.Buka terminal/cmd di project laravel kita lalu tambahkan perintah seperti dibawah ini.

npm i tinymce
Enter fullscreen mode Exit fullscreen mode

Setelah selesai,jika kita buka folder node_modules/tinymce kita akan lihat file dan folder dari TinyMCE,kita akan copy beberapa file tersebut ke folder public dari laravel agar mudah diakses.Kemudian buka file webpack.min.js di root folder project laravel dan tambahkan baris dibawah.

mix.copyDirectory('node_modules/tinymce/skins', 'public/vendor/tinymce/skins');
mix.copyDirectory('node_modules/tinymce/themes', 'public/vendor/tinymce/themes');
mix.copyDirectory('node_modules/tinymce/plugins', 'public/vendor/tinymce/plugins');
mix.copyDirectory('node_modules/tinymce/icons', 'public/vendor/tinymce/icons');

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

Enter fullscreen mode Exit fullscreen mode

Di code diatas ,kita menggunakan Laravel Mix yang merupakan fitur dari laravel.Kemudian jalankan perintah dibawah ini.

npm run dev
Enter fullscreen mode Exit fullscreen mode

Maka perintah yang tadi akan copy file dan folder dari node_modules/tinymce ke public/vendor/tinymce,sekarang kita tinggal panggil seperti code dibawah ini untuk menggunakan TinyMCE.

<textarea class="form-control" name="editor"></textarea>
<script src="{{ asset('vendor/tinymce/tinymce.min.js') }}"></script>
<script>
    tinymce.init({
        selector:'textarea.editor',
        width:1000,
        height: 300
    });
</script>
Enter fullscreen mode Exit fullscreen mode

Sekian tutorial kali ini,jika ada yang kurang jelas bisa ditanyakan dibawah.Kalau diatas susah gak ada kolom komentar.

Discussion (0)