Integrasi text editor seperti Quill ke dalam form post pada aplikasi Laravel sangat bermanfaat untuk menyediakan editor yang interaktif bagi pengguna saat membuat atau mengedit konten. Berikut adalah tutorial lengkap untuk mengintegrasikan Quill pada area teks di form create.blade.php dan edit.blade.php.
Langkah 1: Instalasi Quill
Kita akan menambahkan pustaka Quill pada halaman dengan menautkan CDN.
Tambahkan link CSS dan script JavaScript Quill di file layout utama (resources/views/layouts/admin.blade.php), agar editor ini bisa digunakan di semua halaman.
<!-- Tambahkan ini di head atau di bagian bawah file layout Anda -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
Full Layout file layouts/admin.blade.php sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<!-- Tambahkan ini di head atau di bagian bawah file layout Anda -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- Tambahkan ini di head atau di bagian bawah file layout Anda -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
/* Sidebar styling */
#sidebar {
width: 250px;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: #1e3d59;
color: #fff;
padding-top: 20px;
z-index: 1000;
transition: all 0.3s;
}
#sidebar .nav-link {
color: #cdd3d8;
font-size: 16px;
padding: 15px 20px;
display: flex;
align-items: center;
}
#sidebar .nav-link .fa {
margin-right: 10px;
font-size: 18px;
}
#sidebar .nav-link.active, #sidebar .nav-link:hover {
background-color: #0b2638;
color: #fff;
}
/* Content area */
#contents {
margin-left: 250px;
padding: 20px;
background-color: #f8f9fa;
min-height: 100vh;
transition: margin-left 0.3s;
}
/* Sidebar toggle button for mobile */
#sidebarToggle {
display: none;
}
@media (max-width: 768px) {
#sidebar {
left: -250px;
}
#sidebar.active {
left: 0;
}
#contents {
margin-left: 0;
}
#contents.active {
margin-left: 250px;
}
#sidebarToggle {
display: block;
position: fixed;
top: 10px;
left: 10px;
z-index: 1100;
font-size: 24px;
color: #1e3d59;
background-color: #fff;
border: none;
}
}
</style>
</head>
<body>
<!-- Sidebar Toggle Button (visible on mobile) -->
<button id="sidebarToggle" class="btn">
<i class="fa fa-bars"></i>
</button>
<!-- Sidebar -->
<div id="sidebar">
<h4 class="text-center mt-3">Admin Panel</h4>
<nav class="nav flex-column mt-4">
<a class="nav-link {{ request()->is('dashboard') ? 'active' : '' }}" href="{{ route('admin.dashboard') }}">
<i class="fa fa-tachometer-alt"></i> Dashboard
</a>
<a class="nav-link {{ request()->is('categories*') ? 'active' : '' }}" href="{{ route('categories.index') }}">
<i class="fa fa-tags"></i> Categories
</a>
<a class="nav-link {{ request()->is('tags*') ? 'active' : '' }}" href="{{ route('tags.index') }}">
<i class="fa fa-tag"></i> Tags
</a>
<a class="nav-link {{ request()->is('posts*') ? 'active' : '' }}" href="{{ route('posts.index') }}">
<i class="fa fa-pencil"></i> Posts
</a>
<a class="nav-link" href="{{ route('logout') }}">
<i class="fa fa-sign-out-alt"></i> Logout
</a>
</nav>
</div>
<!-- Main Content -->
<div id="contents">
<div class="container-fluid">
@yield('content')
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
// Toggle sidebar visibility on mobile
document.getElementById('sidebarToggle').addEventListener('click', function() {
document.getElementById('sidebar').classList.toggle('active');
document.getElementById('contents').classList.toggle('active');
});
</script>
@yield('script')
</body>
</html>
Langkah 2: Ubah Form create.blade.php dan edit.blade.php
Pada kedua file ini, kita akan menambahkan elemen div untuk Quill editor dan menyembunyikan textarea aslinya. Isi dari Quill editor akan disalin ke textarea sebelum formulir dikirim ke server.
Form Create (resources/views/posts/create.blade.php):
<div class="mb-3">
<label for="content" class="form-label">Content</label>
<!-- Textarea disembunyikan -->
<textarea name="content" id="content" style="display: none;"></textarea>
<!-- Div Quill Editor -->
<div id="quill-editor" style="height: 200px;"></div>
</div>
Form Edit (resources/views/posts/edit.blade.php):
Pastikan form edit juga diatur serupa dengan form create, namun di sini kita perlu mengisi Quill editor dengan konten dari database.
<div class="mb-3">
<label for="content" class="form-label">Content</label>
<!-- Textarea disembunyikan -->
<textarea name="content" id="content" style="display: none;">{{ $post->content }}</textarea>
<!-- Div Quill Editor -->
<div id="quill-editor" style="height: 200px;"></div>
</div>
Langkah 3: Inisialisasi Quill Editor dengan JavaScript
Tambahkan script untuk inisialisasi Quill editor dan sinkronisasikan isi Quill dengan textarea. Script ini bisa dimasukkan di bagian bawah file create.blade.php dan edit.blade.php atau di layout jika ingin di-sharing ke beberapa halaman.
create.blade.php
@section('script')
<script>
// Inisialisasi Quill editor
var quill = new Quill('#quill-editor', {
theme: 'snow'
});
// Isi Quill dengan konten awal dari textarea saat edit post
quill.root.innerHTML = document.getElementById('content').value;
// Update textarea dengan konten Quill sebelum submit
document.querySelector('form').onsubmit = function () {
document.getElementById('content').value = quill.root.innerHTML;
};
</script>
@endsection('script')
edit.blade.php
@section('script')
<script>
// Inisialisasi Quill editor
var quill = new Quill('#quill-editor', {
theme: 'snow'
});
// Isi Quill dengan konten awal dari textarea saat edit post
quill.root.innerHTML = document.getElementById('content').value;
// Update textarea dengan konten Quill sebelum submit
document.querySelector('form').onsubmit = function () {
document.getElementById('content').value = quill.root.innerHTML;
};
</script>
@endsection('script')
Langkah 4: Testing CRUD Article via Quill Editor
Jika langkah-langkah dilakukan dengan benar, text editor sudah bisa digunakan sebagai berikut:
Lakukan juga untuk edit article. Jika berhasil, akan tampil berikut:
Selamat Mencoba!!!