Laravel package for Quill WYSIWYG editor with full support for Quill 2.x
mortogo321/laravel-quill is a Laravel package for laravel package for quill wysiwyg editor with full support for quill 2.x.
It currently has 0 GitHub stars and 0 downloads on Packagist (latest version v1.0.0).
Install it with composer require mortogo321/laravel-quill.
Discover more Laravel packages by mortogo321
or browse all Laravel packages to compare alternatives.
Last updated
A Laravel package for seamless integration with Quill 2.x WYSIWYG editor.
Install the package via Composer:
composer require mortogo321/laravel-quill
Publish the assets and configuration:
# Publish everything
php artisan vendor:publish --tag=quill
# Or publish individually
php artisan vendor:publish --tag=quill-config
php artisan vendor:publish --tag=quill-assets
php artisan vendor:publish --tag=quill-views
Add the styles and scripts to your layout:
<!DOCTYPE html>
<html>
<head>
<!-- Include Quill styles -->
@quillStyles
</head>
<body>
<!-- Your content -->
<!-- Include Quill scripts (before closing body tag) -->
@quillScripts
</body>
</html>
<form method="POST" action="/posts">
@csrf
<x-quill-editor
name="content"
:value="old('content', $post->content ?? '')"
placeholder="Write your post content..."
/>
<button type="submit">Save</button>
</form>
<x-quill-viewer :content="$post->content" />
The configuration file is located at config/quill.php. Key options include:
'theme' => 'snow', // or 'bubble'
'cdn' => [
'enabled' => true,
'version' => '2.0.2',
],
Three built-in presets: minimal, basic, full
<x-quill-editor name="content" toolbar="minimal" />
<x-quill-editor name="content" toolbar="basic" />
<x-quill-editor name="content" toolbar="full" />
<x-quill-editor
name="content"
:toolbar="['bold', 'italic', 'link']"
/>
Configure upload settings in config/quill.php:
'uploads' => [
'enabled' => true,
'disk' => 'public',
'path' => 'quill-uploads',
'max_size' => 2048, // KB
'allowed_types' => ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
],
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| name | string | required | Form input name |
| id | string | auto | Editor element ID |
| value | string | null | Initial content (Delta JSON or HTML) |
| placeholder | string | config | Placeholder text |
| theme | string | 'snow' | Quill theme ('snow' or 'bubble') |
| toolbar | string/array | config | Toolbar preset or custom config |
| read-only | bool | false | Read-only mode |
| height | string | '300px' | Editor height |
| required | bool | false | HTML5 required attribute |
| upload-url | string | auto | Custom upload endpoint |
| formats | array | [] | Allowed formats |
| modules | array | [] | Additional Quill modules |
| debug | bool | false | Enable debug mode |
Basic Editor:
<x-quill-editor name="content" />
With Initial Content:
<x-quill-editor name="content" :value="$post->content" />
Read-Only:
<x-quill-editor name="content" :value="$content" read-only />
Custom Height:
<x-quill-editor name="content" height="500px" />
Bubble Theme:
<x-quill-editor name="content" theme="bubble" />
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| content | string | null | Content (Delta JSON or HTML) |
| delta | array | null | Delta object directly |
| sanitize | bool | true | Sanitize HTML output |
| class | string | null | Additional CSS classes |
Display Delta Content:
<x-quill-viewer :content="$post->content" />
Display with Custom Class:
<x-quill-viewer :content="$post->content" class="prose lg:prose-xl" />
Without Sanitization:
<x-quill-viewer :content="$post->content" :sanitize="false" />
Validate Quill content with length constraints:
use Mortogo321\LaravelQuill\Rules\QuillContent;
$request->validate([
'content' => ['required', new QuillContent(minLength: 10, maxLength: 5000)],
]);
// Using static methods
$request->validate([
'content' => [QuillContent::required()],
'summary' => [QuillContent::max(500)],
'bio' => [QuillContent::between(50, 1000)],
]);
Validate Delta structure and allowed formats:
use Mortogo321\LaravelQuill\Rules\QuillDelta;
$request->validate([
'content' => [new QuillDelta()],
]);
// Restrict formats
$request->validate([
'content' => [QuillDelta::onlyFormats(['bold', 'italic', 'link'])],
]);
// Disallow media
$request->validate([
'content' => [QuillDelta::withoutImages()],
'comment' => [QuillDelta::plainTextOnly()],
]);
The Quill facade provides utility methods:
use Mortogo321\LaravelQuill\Facades\Quill;
// Convert Delta to HTML
$html = Quill::deltaToHtml($deltaJson);
// Convert HTML to Delta
$delta = Quill::htmlToDelta($html);
// Sanitize HTML
$clean = Quill::sanitize($html);
// Get configuration
$config = Quill::getConfig('theme');
The LaravelQuill object is available globally:
// Initialize all editors
LaravelQuill.init();
// Get an editor instance
const quill = LaravelQuill.getEditor('quill-content');
// Get content
const delta = LaravelQuill.getContents('quill-content');
const html = LaravelQuill.getHTML('quill-content');
// Set content
LaravelQuill.setContents('quill-content', delta);
LaravelQuill.setContents('quill-content', '<p>HTML content</p>');
// Enable/disable
LaravelQuill.setEnabled('quill-content', false);
// Focus/blur
LaravelQuill.focus('quill-content');
LaravelQuill.blur('quill-content');
document.getElementById('quill-content').addEventListener('quill-init', (e) => {
console.log('Editor initialized', e.detail.quill);
});
document.getElementById('quill-content').addEventListener('quill-change', (e) => {
console.log('Content changed', e.detail.delta, e.detail.html);
});
Override the upload endpoint:
<x-quill-editor
name="content"
upload-url="{{ route('custom.upload') }}"
/>
Publish the CSS and modify public/vendor/quill/css/laravel-quill.css, or use CSS variables:
.quill-editor-wrapper {
--quill-editor-height: 400px;
--quill-border-color: #e2e8f0;
--quill-border-radius: 8px;
--quill-focus-color: #3b82f6;
--quill-toolbar-bg: #f8fafc;
}
QUILL_THEME=snow
QUILL_CDN_ENABLED=true
QUILL_VERSION=2.0.2
QUILL_UPLOAD_DISK=public
QUILL_UPLOAD_PATH=quill-uploads
QUILL_MAX_UPLOAD_SIZE=2048
The package includes built-in content sanitization. Configure allowed tags and attributes in config/quill.php:
'sanitize' => [
'enabled' => true,
'allowed_tags' => ['p', 'br', 'strong', 'em', ...],
'allowed_attributes' => [
'a' => ['href', 'target', 'rel'],
'img' => ['src', 'alt', 'width', 'height', 'class'],
// ...
],
],
MIT License. See LICENSE for more information.
