How to render text in ckeditor in edit form Livewire

66 Views Asked by At

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.
0

There are 0 best solutions below