PHPackages                             caiquebispo/quill-editor - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. caiquebispo/quill-editor

ActiveLibrary[Templating & Views](/categories/templating)

caiquebispo/quill-editor
========================

A Quill Editor component for Laravel Livewire.

v1.3.4(4mo ago)3871MITBladePHP ^8.1

Since Jun 27Pushed 3mo agoCompare

[ Source](https://github.com/caiquebispo/quill-editor)[ Packagist](https://packagist.org/packages/caiquebispo/quill-editor)[ RSS](/packages/caiquebispo-quill-editor/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (11)Used By (0)

Livewire Quill Editor - Notes
-----------------------------

[](#livewire-quill-editor---notes)

 [![Latest Stable Version](https://camo.githubusercontent.com/60f1d6d2faf51ae7839ce1de1a511b62c60dcf4f20570fa1088042833bf02b7c/687474703a2f2f706f7365722e707567782e6f72672f636169717565626973706f2f7175696c6c2d656469746f722f76)](https://packagist.org/packages/caiquebispo/quill-editor) [![Total Downloads](https://camo.githubusercontent.com/22af88af269a363d3c0149ce56293474b199d66355d21f56417cff3e43e6f6a6/687474703a2f2f706f7365722e707567782e6f72672f636169717565626973706f2f7175696c6c2d656469746f722f646f776e6c6f616473)](https://packagist.org/packages/caiquebispo/quill-editor) [![Latest Unstable Version](https://camo.githubusercontent.com/48bc292aae228a7dc0819612809e05c1304015a9cd487413aa4029646aefa701/687474703a2f2f706f7365722e707567782e6f72672f636169717565626973706f2f7175696c6c2d656469746f722f762f756e737461626c65)](https://packagist.org/packages/caiquebispo/quill-editor) [![License](https://camo.githubusercontent.com/3af187fb36d60b57c91441c2c4081b67de24a1de493f18ec677068d7913931ce/687474703a2f2f706f7365722e707567782e6f72672f636169717565626973706f2f7175696c6c2d656469746f722f6c6963656e7365)](https://packagist.org/packages/caiquebispo/quill-editor) [![PHP Version Require](https://camo.githubusercontent.com/7c2db447ceea4ca40aa824ebf8dcb85cb8fba6d9de7ea5d8b1f963674c5e2da5/687474703a2f2f706f7365722e707567782e6f72672f636169717565626973706f2f7175696c6c2d656469746f722f726571756972652f706870)](https://packagist.org/packages/caiquebispo/quill-editor)

Fixes included:

- Idempotent initialization to prevent duplicate toolbars when Livewire morphs/updates
- Uses `wire:ignore.self` to scope DOM changes
- Responsive/mobile config processing with optional simplified toolbar

Basic usage:

```

```

Quill Editor Livewire Component
===============================

[](#quill-editor-livewire-component)

Livewire component for rich text editing powered by [Quill.js](https://quilljs.com/).
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
------------

[](#requirements)

- PHP >=8.2
- Livewire >= ^3.5.0|^4.0.0

Installation
------------

[](#installation)

```
composer require caiquebispo/quill-editor
```

In your main layout file (for example, `resources/views/layouts/app.blade.php`), include:

```

    ...
    @stack('styles')

    ...
    @stack('scripts')

```

---

Publishing assets and configuration
-----------------------------------

[](#publishing-assets-and-configuration)

For publishing the configuration and assets, run the following commands:

```
php artisan vendor:publish --provider="CaiqueBispo\QuillEditor\Provider\QuillEditorServiceProvider" --tag=config

php artisan vendor:publish --provider="CaiqueBispo\QuillEditor\Provider\QuillEditorServiceProvider" --tag=assets
```

This will create the `config/quill.php` file and copy the necessary assets to your public directory.

### Configuration Options

[](#configuration-options)

The published configuration file (`config/quill.php`) includes the following options:

```
return [
    // Theme: 'snow' or 'bubble'
    'theme' => 'snow',

    // Placeholder text
    'placeholder' => 'Digite seu texto aqui...',

    // Editor dimensions
    'height' => '300px',
    'width' => '100%',

    // Read-only mode
    'readOnly' => false,

    // Mobile-specific configurations
    'mobile' => [
        'simplifyToolbar' => true,
        'height' => '200px',
    ],

    // Quill.js modules configuration
    'modules' => [...],

    // Allowed formats
    'formats' => [...],
];
```

---

New Features Configuration
--------------------------

[](#new-features-configuration)

### 📊 Character Counter

[](#-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)

[](#-auto-save-draft)

Automatically save content to localStorage at regular intervals:

```

```

**Programmatic Draft Control:**

```
// In your Livewire component
public function restoreDraft(): void
{
    $this->dispatch('restoreDraft');
}

public function clearDraft(): void
{
    $this->dispatch('clearDraft');
}
```

---

### ⛶ Full-screen Mode

[](#-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

[](#️-image-upload)

Enable direct image uploads with Livewire file handling:

```

```

**Requirements:**

1. Run `php artisan storage:link` to create the public storage symlink
2. Ensure your storage disk is properly configured

**How it works:**

1. Click the image button 🖼️ in the toolbar
2. Select an image from your computer
3. The image is uploaded via Livewire and inserted into the editor

---

### 📐 Image Resize

[](#-image-resize)

When Image Upload is enabled, images can be resized interactively:

**How to use:**

1. Click on any image in the editor to select it
2. Use the **corner handles** to drag and resize (maintains aspect ratio)
3. Use the **preset buttons** (25%, 50%, 75%, 100%) for quick sizing
4. Click outside the image to deselect

---

### Complete Example (All Features)

[](#complete-example-all-features)

```

```

---

Usage
-----

[](#usage)

### Basic Usage

[](#basic-usage)

Create a Livewire component to use the Quill editor:

```
php artisan make:livewire EditorComponent
```

### Advanced Usage

[](#advanced-usage)

#### Dynamic Configuration

[](#dynamic-configuration)

You can pass configuration options directly to the component:

```

```

#### Individual Configuration Parameters

[](#individual-configuration-parameters)

You can also pass individual configuration parameters:

```

```

#### Mobile-Specific Configuration

[](#mobile-specific-configuration)

The component supports mobile-specific configurations:

```

```

#### 📁 `app/Livewire/EditorComponent.php`

[](#-applivewireeditorcomponentphp)

```