Create livewire component
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Quill extends Component
{
public $value;
public $event = 'quill_value_updated';
public $quillId;
public $content;
public function updatedValue($value){
$this->emit($this->event, $this->value);
}
public function mount(){
$this->quillId = 'quill-'.uniqid();
}
public function render()
{
return view('livewire.quill');
}
}
Blade view file
<div>
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Create the editor container -->
<div id="{{ $quillId }}" wire:ignore></div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
const quill = new Quill('#{{ $quillId }}', {
theme: 'snow'
});
quill.on('text-change', function () {
let value = document.getElementsByClassName('ql-editor')[0].innerHTML;
@this.set('value', value)
});
@if($content)
const delta = quill.clipboard.convert('{!! $content !!}')
quill.setContents(delta, 'silent')
@endif
</script>
</div>