joelwmale/livewire-quill

Easily add QuillJS with image support to any Laravel Livewire component.

3.0.2 2024-11-21 00:42 UTC

Requires

• php: ^8.1|^8.2|^8.3|^8.4
• illuminate/contracts: ^9.0|^10.0|^11.0
• illuminate/support: ^9.0|^10.0|^11.0
• livewire/livewire: ^3.3|^3.4|^3.5

Requires (Dev)

• laravel/pint: ^1.17
• orchestra/testbench: ^5.0|^6.0|^7.0|^8.0|^9.0
• pestphp/pest: ^2.6
• pestphp/pest-plugin-livewire: ^2.0

MIT

• Joel Male

• laravel
• joelwmale
• livewire-quill

README

This package adds an easy to use Livewire component to your application, which will create and largely manage a Quill editor for you.

It supports image uploads out of the box with zero work from you.

v2.0 of this package only supports Livewire v3.x. If you're still using Livewire 2.x, please use v1.0 of this package.

Installation

You can install the package via composer:

composer require joelwmale/livewire-quill

Config (optional)

After you've installed the package, you can optionally publish the config to change any defaults:

php artisan vendor:publish --tag=livewire-quill:config

This is the contents of the published config file:

return [
    /*
     * The base folder to store the images in
     */
    'storage_folder' => env('LIVEWIRE_QUILL_STORAGE_FOLDER', 'images'),

    /*
     * Should the images be stored publically or not
     */
    'store_publically' => env('LIVEWIRE_QUILL_STORE_PUBLICALLY', true),

    /*
     * Should the images be deleted from the server once deleted in the editor
     * or retained for future use (note: the package will never re-use the same image)
     */
    'clean_up_deleted_images' => env('LIVEWIRE_QUILL_CLEAN_UP_DELETED_IMAGES', true),
];

Usage

Use it in any Livewire component like so:

@livewire('livewire-quill', [
    'quillId' => 'customQuillId',
    'data' => $content,
    'classes' => 'bg-white',
    'toolbar' => [
        [
            [
                'header' => [1, 2, 3, 4, 5, 6, false],
            ],
        ],
        ['bold', 'italic', 'underline'],
        [
            [
                'list' => 'ordered',
            ],
            [
                'list' => 'bullet',
            ],
        ],
        ['link'],
        ['image'],
    ],
])

On your Livewire component, add the following:

use Joelwmale\LivewireQuill\Traits\HasQuillEditor;

class SomeLivewireComponent extends Component
{
    use HasQuillEditor;

    public function contentChanged($editorId, $content)
    {
        // $editorId is the id use when you initiated the livewire component
        // $content is the raw text editor content

        // save to the local variable...
        $this->content = $content;
    }
}

Parameters

QuillId

A div is created with this id, this allows for easy use of multiple quill instances on the same page.

Data

This is the initial value of the text editor (i.e: a previous saved version of the text editor)

Classes

Any custom classes you wish to add to the base editor class.

Note: for any customisation, we recommend using CSS to make changes. You can always edit a specific Quill instance by referring to the #quillId variable.

Toolbar

An array of arrays to manage and create a toolbar for Quill to use

Testing

composer test

Credits

• joelwmale
• All Contributors

Licence

Copyright © Joel Male

Livewire Quill is open-sourced software licensed under the MIT license.