CoretanKode.com – Cara Membuat CMS Blogging (Part 6) – Menggunakan TRIX Text Editor Livewire, Pada part 6 dari sesi learning cara membuat cms blog menggunakan Laravel 8 ini kita akan mengintegrasikan text editor trix livewire kedalam projek laravel 8 kita sebelumnya.

Sebelumnya kita sudah berhasil membuat CRUD pada projek laravel yang kita ciptakan, selanjutnya kita akan mencoba menggunakan Trix Text Editor WYSIWYG (What You See is What You Get).

SERI MEMBUAT CMS SENDIRI DENGAN LARAVEL 8:

Nah caranya sebenarnya cukup sederhana, pada seri ini kita sudah menggunakan livewire dari jetstream sebagai pengatur CRUD dari projek yang kita buat. nah jadinya kita bisa menggunakan trik masking saja, dimana kita akan menyembunyikan kolom inputan dan menyamarkannya menggunakan Trix Text Editor ini.

Instalasi TRIX Text-Editor Livewire Laravel 8

Untuk melakukan instalasi trix text-editor pada projek kalian, pertama silahkan anda download terlebih dahulu file CSS dan juga JS dari github trix text editor tersebut. Silahkan langsung download disini.

Nah setelah kalian selesai mendownload filee CSS dan juga Script JS dari TRIX-nya silahkan kalian extract dan taro css dan juga js tersebut pada folder public yang dapat dipanggil menggunakan assets.

Selanjutnya kalian langsung saja embed script js dan css kedalam file blade kalian, dengan cara tambahkan sintak dibawah ini :

<link rel="stylesheet" href="{{asset('editor/trix.css')}}">
<script src="{{asset('js/trix.js')}}"></script>

sesuaikanlah lokasi file kalian juga yah, pada contoh admin menyimpan script trix.css itu pada folder editor sementara script javascript ditaruh pada folder js, jadi sintaknya seperti diatas.

Mengubah atau Menambah Text Editor

Selanjutnya pada saat instalasi selesai maka kalian hanya perlu menambahkan text editor pada form projek laravel kalian. Pada contoh ini kalian silahkan buka create.blade.php dan selanjutnya kalian bisa mengubah form kalian bagian isikonten.

Nah selanjutnya tambahkan kode seperti dibawah ini:

<div class="mb-4" wire:model.debounce.365ms="isikonten" wire:ignore>
<label for="formCatname" class="block text-gray-700 text-sm font-bold mb-2">Description:</label>
<input id="desc" value="{{ $this->isikonten}}" type="hidden" name="isikonten">
<trix-editor input="desc"></trix-editor>
@error('isikonten') <span class="text-red-500">{{ $message }}</span>@enderror
</div>

Nah kode sintak yang berwarna merah diatas adalah kode yang paling penting pada bagian ini, dikarenakan agar livewire tidak langsung memunculkan error akibat masking tersebut makan kita harus menggunakan wire:ignore.

Silahkan anda save dan coba jalankan lagi, cek apakah sudah berhasil atau tidak ? jika sudah berhasil kalian masih bisa melakukan kustomisasi lagi pada text editor kalian seperti menambahkan inputan gambar dan juga iframe dan lain sebagainya.

Untuk mendapatkan penjelasan lengkap terkait fungsionalitas lain yang tersedia pada library TRIX Text-Editor, maka kalian bisa mengunjungi halaman github-nya yah.

Sekian dulu untuk tutorial cara memasang text editor dengan trix livewire pada laravel 8. Terima kasih telah berkunjung dan Assalamualaikum Warahmatullahi Wabarakatu.