Berikut adalah tutorial tentang bagaimana cara mengintegrasikan Quill text editor ke dalam aplikasi Laravel.
Langkah 1: Instal Laravel
Jika Anda belum memiliki proyek Laravel, instal terlebih dahulu Laravel dengan menggunakan composer:
composer create-project laravel/laravel quill-example
Langkah 2: Install Quill Editor
Kita akan menggunakan tutorial sebelumnya tentang Belajar CRUD lengkap dengan fitur upload gambar di Laravel 10. Silahkan ikuti tutorial tersebut karena database dan Controller kita menggunakan file tersebut.
Anda perlu menambahkan Quill editor ke dalam project. Salah satu cara mudahnya adalah menggunakan CDN.
Edit file layout.blade.php di resources/views/layout.blade.php
Buka file tersebut, kemudian tambahkan link ke Quill CSS dan script Quill dari CDN di bagian <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'CRUD Posts')</title>
<!-- Tambahkan Bootstrap CSS atau styling lainnya -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{{ route('posts.index') }}">My Blog</a>
</nav>
<!-- Main Content -->
<div class="container mt-5">
@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@yield('content')
</div>
<!-- Tambahkan Bootstrap JS atau script lainnya -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
@stack('scripts')
</body>
</html>
Langkah 3: Buat Form untuk Menampilkan Quill Editor
Pastikan route post tersedia untuk menampilkan form di routes/web.php:
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
Route::resource('posts', PostController::class);
Modifikasi Controller PostController untuk menampilkan form di app/Http/Controllers/PostController.php:
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
/**
* Display a listing of the posts.
*/
public function index()
{
$posts = Post::all();
return view('posts.index', compact('posts'));
}
/**
* Show the form for creating a new post.
*/
public function create()
{
return view('posts.create');
}
/**
* Store a newly created post in storage.
*/
public function store(Request $request)
{
$request->validate([
'title' => 'required|string|max:255',
'body' => 'required',
'image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
]);
$imageName = null;
if ($request->file('image')) {
$imageName = time() . '.' . $request->image->extension();
$request->image->move(public_path('images'), $imageName);
}
Post::create([
'title' => $request->title,
'body' => $request->body,
'image' => $imageName,
]);
return redirect()->route('posts.index')->with('success', 'Post created successfully.');
}
/**
* Display the specified post.
*/
public function show($id)
{
$post = Post::findOrFail($id);
return view('posts.show', compact('post'));
}
/**
* Show the form for editing the specified post.
*/
public function edit($id)
{
$post = Post::findOrFail($id);
return view('posts.edit', compact('post'));
}
/**
* Update the specified post in storage.
*/
public function update(Request $request, $id)
{
$post = Post::findOrFail($id);
$request->validate([
'title' => 'required|string|max:255',
'body' => 'required',
'image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
]);
$imageName = $post->image;
if ($request->file('image')) {
if ($imageName) {
unlink(public_path('images/') . $imageName); // Hapus gambar lama jika ada
}
$imageName = time() . '.' . $request->image->extension();
$request->image->move(public_path('images'), $imageName);
}
$post->update([
'title' => $request->title,
'body' => $request->body,
'image' => $imageName,
]);
return redirect()->route('posts.index')->with('success', 'Post updated successfully.');
}
/**
* Remove the specified post from storage.
*/
public function destroy($id)
{
$post = Post::findOrFail($id);
if ($post->image) {
unlink(public_path('images/') . $post->image); // Hapus gambar jika ada
}
$post->delete();
return redirect()->route('posts.index')->with('success', 'Post deleted successfully.');
}
}
Edit file create.blade.php untuk menampilkan Quill editor di resources/views/posts/create.blade.php:
@extends('layout')
@section('title', 'Create New Post')
@section('content')
<div class="container mt-5">
<h2 class="mb-4">Create New Post</h2>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('posts.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label for="title" class="form-label">Post Title</label>
<input type="text" class="form-control" id="title" name="title" value="{{ old('title') }}" placeholder="Enter post title">
</div>
<div class="mb-3">
<label for="content" class="form-label">Content</label>
<div id="editor" style="height: 200px;"></div>
<input type="hidden" name="body" id="content">
</div>
<div class="mb-3">
<label for="image" class="form-label">Post Image</label>
<input type="file" class="form-control" id="image" name="image">
</div>
<button type="submit" class="btn btn-primary">Create Post</button>
</form>
</div>
@endsection
@push('scripts')
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
// Simpan konten editor ke dalam input hidden sebelum submit form
var form = document.querySelector('form');
form.onsubmit = function() {
var content = document.querySelector('input[name=body]');
content.value = quill.root.innerHTML;
};
</script>
@endpush
Dalam hal ini kita buat content hasil dari quill editor dan kita simpan di input hidden dengan nama body untuk dikirim ke controller.
Langkah 4: Testing
Sekarang, Anda bisa membuka browser dan mencoba mengakses halaman http://localhost:8000/posts/create. Anda akan melihat Quill text editor di form. Setelah men-submit form, konten akan disimpan ke database seperti berikut:
Jika kita insert data ke database menggunakan Quill Editor, jika berhasil akan seperti berikut:
