Download the PHP package caiquebispo/quill-editor without Composer
On this page you can find all versions of the php package caiquebispo/quill-editor. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download caiquebispo/quill-editor
More information about caiquebispo/quill-editor
Files in caiquebispo/quill-editor
Package quill-editor
Short Description A Quill Editor component for Laravel Livewire.
License MIT
Informations about the package quill-editor
Livewire Quill Editor - Notes
Fixes included:
- Idempotent initialization to prevent duplicate toolbars when Livewire morphs/updates
- Uses
wire:ignore.selfto scope DOM changes - Responsive/mobile config processing with optional simplified toolbar
Basic usage:
Quill Editor Livewire Component
Livewire component for rich text editing powered by Quill.js.
Supports editing with headings, bold, italic, lists, links, images, videos, alignment, colors, and more, fully integrated with Laravel and Livewire for seamless form and CMS workflows.
Core Features:
- ✅ Multiple instances support on the same page
- ✅ Pre-loaded content from database for editing
- ✅ Improved event handling for better reliability
- ✅ Enhanced cleanup and memory management
- ✅ Fully responsive design with mobile-specific configurations
- ✅ Dynamic configuration via array with support for all Quill.js options
- ✅ Mobile-optimized toolbar and interface
- ✅ Customizable publishing of configuration
New Features (v1.2+):
- 📊 Character Counter - Real-time character counting with optional limit
- 💾 Auto-save - Automatic draft saving to localStorage
- ⛶ Full-screen Mode - Expand editor to full screen (ESC to exit)
- 🖼️ Image Upload - Upload images directly from editor with Livewire
- 📐 Image Resize - Resize images with drag handles and preset buttons
Requirements
- PHP >=8.2
- Livewire >= ^3.5.0|^4.0.0
Installation
In your main layout file (for example, resources/views/layouts/app.blade.php), include:
Publishing assets and configuration
For publishing the configuration and assets, run the following commands:
This will create the config/quill.php file and copy the necessary assets to your public directory.
Configuration Options
The published configuration file (config/quill.php) includes the following options:
New Features Configuration
📊 Character Counter
Display a real-time character count with optional limit:
When the limit is exceeded, the counter turns red to alert the user.
💾 Auto-save (Draft)
Automatically save content to localStorage at regular intervals:
Programmatic Draft Control:
⛶ Full-screen Mode
Enable a full-screen button to expand the editor:
- Click the ⛶ button (top-right) to enter full-screen
- Press ESC to exit full-screen mode
🖼️ Image Upload
Enable direct image uploads with Livewire file handling:
Requirements:
- Run
php artisan storage:linkto create the public storage symlink - Ensure your storage disk is properly configured
How it works:
- Click the image button 🖼️ in the toolbar
- Select an image from your computer
- The image is uploaded via Livewire and inserted into the editor
📐 Image Resize
When Image Upload is enabled, images can be resized interactively:
How to use:
- Click on any image in the editor to select it
- Use the corner handles to drag and resize (maintains aspect ratio)
- Use the preset buttons (25%, 50%, 75%, 100%) for quick sizing
- Click outside the image to deselect
Complete Example (All Features)
Usage
Basic Usage
Create a Livewire component to use the Quill editor:
Advanced Usage
Dynamic Configuration
You can pass configuration options directly to the component:
Individual Configuration Parameters
You can also pass individual configuration parameters:
Mobile-Specific Configuration
The component supports mobile-specific configurations:
📁 app/Livewire/EditorComponent.php
resources/views/livewire/editor-component.blade.php
Loading Existing Content
To load existing content from your database:
Multiple Instances
You can now use multiple Quill editors on the same page:
Configuration
You can customize the editor by passing a configuration array to the component:
Available Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
theme |
string | 'snow' |
Quill theme ('snow' or 'bubble') |
placeholder |
string | 'Digite aqui...' |
Placeholder text |
height |
string | '200px' |
Editor height |
readOnly |
boolean | false |
Read-only mode |
modules |
array | [] |
Quill modules configuration |
formats |
array | [] |
Allowed formats |
Component Methods
The Quill Editor component provides several useful methods:
Programmatic Control
Content Methods
Events
The component dispatches the following events:
quillUpdated
Fired when the editor content changes:
Advanced Usage
Custom Toolbar Configuration
Image Upload Integration
Troubleshooting
Common Issues
- Multiple instances not working: Ensure each instance has a unique ID
- Content not loading: Check that the content is properly passed to the
:contentattribute - Styles not loading: Make sure
@stack('styles')is in your layout's<head> - Scripts not working: Ensure
@stack('scripts')is before the closing</body>tag
Debug Mode
Enable debug mode to see console logs:
License
MIT © Caique Bispo