I've created a Livewire form using CKEditor5, and it worked just fine. But when I tried to make an Edit form, the text didn't show up in the CKEditor.
Here is the Livewire component.
public function showArticle($article)
{
$this->id = $article['id'];
$this->title = $article['title'];
$this->description = $article['description'];
$this->writer= $article['writer'];
$this->openModal();
}
Here is the CKEditor textarea in the blade.
<ul class="list-unstyled">
<li>Article Description</li>
<div class="input-group input-group-outline mb-4 mt-2">
<textarea id="description-update" required>{{ $description }}</textarea>
<div class="invalid-feedback">
Required!
</div>
</div>
</ul>
Here is my JS.
<script>
ClassicEditor
.create(document.querySelector('#description-update'))
.then(editor => {
editor.model.document.on('change:data', () => {
@this.set('description', editor.getData());
})
})
.catch(error => {
console.error(error);
});
</script>
Weirdly, the text showed up if it's a basic textarea, but doesn't if it's CKEditor.
I've tried:
- {{ $description }}
- {!! $description !!}
- php echo htmlspecialchars)
- and setting the data via JS but no luck.