Mar 30, 2025
•
Cecep Miftah Solahudin
•
3 min read
Menggunakan Trix Editor di Laravel: Panduan Lengkap untuk Pemula
Pendahuluan
Jika Anda sedang mencari editor teks kaya (rich text editor) yang ringan dan mudah diintegrasikan dengan Laravel, Trix bisa menjadi pilihan terbaik. Dikembangkan oleh tim di belakang Basecamp, Trix memungkinkan pengguna untuk menulis dan mengedit teks dengan fitur seperti bold, italic, hyperlink, dan lain-lain tanpa bergantung pada banyak resource eksternal.
Dalam artikel ini, kita akan membahas bagaimana cara mengintegrasikan Trix Editor ke dalam aplikasi Laravel Anda dengan mudah.
Sebelum kita masuk ke instalasi, berikut beberapa alasan mengapa Trix adalah pilihan yang tepat:
- Ringan dan cepat – Tidak seperti CKEditor atau TinyMCE, Trix hanya berukuran kecil dan tidak membutuhkan banyak resource.
- Dukungan native terhadap HTML – Data yang dihasilkan berbasis HTML, sehingga mudah untuk diolah dalam database.
- Mudah diintegrasikan – Bisa digunakan di berbagai framework frontend seperti React, Vue, atau langsung dalam Blade template Laravel.
- Open-source & Gratis – Dikembangkan oleh Basecamp dan tersedia untuk digunakan tanpa biaya.
2. Instalasi Trix Editor di Laravel
Berikut adalah langkah-langkah sederhana untuk mengintegrasikan Trix Editor di proyek Laravel Anda:
a) Tambahkan Trix ke dalam Proyek
Cara termudah untuk menambahkan Trix adalah dengan menggunakan CDN. Anda hanya perlu menambahkan kode berikut ke dalam template Blade Anda:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trix Editor di Laravel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.js"></script>
</head>
<body>
<form method="POST" action="{{ route('posts.store') }}">
@csrf
<input id="content" type="hidden" name="content">
<trix-editor input="content"></trix-editor>
<button type="submit">Simpan</button>
</form>
</body>
</html>b) Menyimpan Data ke Database
Pastikan Anda memiliki tabel posts dengan kolom content bertipe TEXT atau LONGTEXT. Jika belum, buat migrasi dengan perintah berikut:
php artisan make:migration create_posts_table
Kemudian, dalam file migrasi (database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php), tambahkan struktur tabel:
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->text('content');
$table->timestamps();
});
Lalu jalankan migrasi:
php artisan migrate
c) Membuat Model dan Controller
Buat model Post dengan command berikut:
php artisan make:model Post -m
Kemudian, buat controller untuk menangani request:
php artisan make:controller PostController --resource
Di dalam app/Http/Controllers/PostController.php, tambahkan metode untuk menyimpan data:
public function store(Request $request)
{
$request->validate([
'content' => 'required',
]);
Post::create(['content' => $request->content]);
return redirect()->back()->with('success', 'Post berhasil disimpan!');
}
Jangan lupa untuk menambahkan fillable pada model Post.php:
protected $fillable = ['content'];
d) Menampilkan Data di Halaman
Untuk menampilkan data yang telah disimpan, modifikasi index.blade.php:
@foreach ($posts as $post)
<div>{!! $post->content !!}</div>
@endforeach
Karena output yang dihasilkan oleh Trix adalah HTML, kita menggunakan {!! !!} agar HTML bisa dirender dengan baik.
3. Kesimpulan
Menggunakan Trix Editor di Laravel sangatlah mudah dan praktis. Dengan langkah-langkah di atas, Anda sudah bisa membuat form input dengan fitur rich text dan menyimpannya ke dalam database. Semoga tutorial ini membantu dalam pengembangan proyek Anda!
Jika Anda punya pertanyaan atau ingin berbagi pengalaman menggunakan Trix Editor di Laravel, jangan ragu untuk berkomentar di bawah! 😊
