Demonstrates how to use a WYSIWYG editor with Livewire.

LivewireWYSIWYG.md

resources/js/app.js

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
ClassicEditor.create(document.querySelector('#body')).then( (editor) => {
  editor.model.document.on('change:data', (e) => {
    let componentId = Livewire.components.getComponentsByName('contact-form')[0].id
    Livewire.find(componentId).set('body', editor.getData())
  })
}).catch( (error) => {

}).finally( () => {

})

resources/views/livewire/contact-form.blade.php

<div>
  <form wire:submit.prevent="submit">
    <input type="text" wire:model.lazy="name" id="name"
    <div wire:ignore>
      <textarea class="wysiwyg" wire:model.lazy="body" class="min-h-fit h-48" name="body" id="body" wire:key="wysiwyg-body">{!! $body !!}</textarea>
    </div>
    <input type="submit">
  </form>
</div>