¨@livewire('quill', ['value' => $description])
¨use App\Http\Livewire\Quill;
public $description;
public $listeners = [ Quill::EVENT_VALUE_UPDATED, ];
public function quill_value_updated($value) { $this->description = $value; }¨
¨@livewire('quill', ['value' => $description])
¨use App\Http\Livewire\Quill;
public $description;
public $listeners = [ Quill::EVENT_VALUE_UPDATED, ];
public function quill_value_updated($value) { $this->description = $value; }¨
<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 |
<?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'); | |
} | |
} |