Text Editor with Quill & Livewire

readme.md

Text Editor with QuillJs & Livewire

Blade Usage

¨@livewire('quill', ['value' => $description])

Livewire Controller usage

¨use App\Http\Livewire\Quill;

public $description;

public $listeners = [ Quill::EVENT_VALUE_UPDATED, ];

public function quill_value_updated($value) { $this->description = $value; }¨

quill.blade.php

<div>
    <!-- Create the editor container -->
    <div id="{{ $quillId }}" wire:ignore></div>
</div>

@pushOnce('styles')
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
@endPushOnce

@pushOnce('scripts')
    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
@endPushOnce

@push('scripts')
     <!-- Initialize Quill editor -->
     <script>
        var quill = new Quill('#{{ $quillId }}', {
            theme: 'snow',
            modules: {
                toolbar: {
                    container: [
                        ['bold', 'italic', 'underline', 'strike'],
                        [{
                            'header': 1
                        }, {
                            'header': 2
                        }],
                        ['link', 'blockquote', 'code-block', 'image', 'video'],
                        [{
                            'list': 'ordered'
                        }, {
                            'list': 'bullet'
                        }],
                        [{
                            'direction': 'rtl'
                        }],

                        [{
                            'size': ['small', false, 'large', 'huge']
                        }],
                        [{
                            'header': [1, 2, 3, 4, 5, 6, false]
                        }],

                        [{
                            'color': []
                        }, {
                            'background': []
                        }],
                        [{
                            'font': []
                        }],
                        [{
                            'align': []
                        }],
                        ['clean']
                    ]
                }
            },
        });
        quill.root.innerHTML = @json($value);

        quill.on('text-change', function() {
            let value = document.getElementsByClassName('ql-editor')[0].innerHTML;
            Livewire.emit('quill_value_updated', value);
        })
    </script>
@endpush

Quill.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Quill extends Component
{
    public const EVENT_VALUE_UPDATED = 'quill_value_updated';

    public $value;
    public $quillId;

    public function mount($value)
    {
        $this->value = $value;
        $this->quillId = 'quill-' . uniqid();
    }

     public function updatedValue($value)
     {
         $this->emit(self::EVENT_VALUE_UPDATED, $this->value);
     }

    public function render()
    {
        return view('livewire.quill');
    }
}