Hi
Just watched the https://laravel-livewire.com/screencasts/s4-rich-text screencast, and must say i finally got it to work with Trix! But damn trix is ugly. I tried to keep as much as possible of the code to implement quilljs insted, but cannot get the data from the textarea to be emitted.
this is my qulljs-component.blade.php (yeah i misspelled it)
<div class="bg-white rounded p-10 mb-20">
<form wire:submit.prevent="save">
<!-- Create the toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- Create the editor container -->
<div id="editor"
x-data
wire:ignore
wire:model.lazy="body"
@text-change="$dispatch('change', $event.target.value)">
</div>
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Save
</button>
</form>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
</script>
</div>
And this is my QulljsComponent.php
<?php
namespace App\Http\Livewire;
use App\Models\Articel as Model;
use Livewire\Component;
class QulljsComponent extends Component
{
public $body;
protected $rules = [
'body' => 'max:140',
];
public function save(){
$this->validate();
$article = new Model();
$article->body = $this->body;
$article->save();
$this->body = '';
}
public function render()
{
return view('livewire.qulljs-component');
}
}
I think im doing something wrong in qulljs-component.blade.php, perticular this segment:
<div id="editor"
x-data
wire:ignore
wire:model.lazy="body"
@text-change="$dispatch('change', $event.target.value)">
</div>
What do you guys say?