CK-Editor Integration with Livewire
Tailwind CSS New Livewire
Demo
CK-Editor Integration Example
This is a pro component. Get Livewiredemos pro access to view / download the component code.
Component Class
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class CkeditorIntegrationComponent extends Component
{
public $message;
public function render()
{
return view('livewire.ckeditor-integration-component');
}
}
Component View File
<div class="py-5">
<div class="container">
<div class="row justify-content-center mb-4">
<div class="col-12 col-md-10 col-lg-8 text-center">
<!-- Heading -->
<h2 class="fw-bold blue-heading">
CK-Editor Integration Example
</h2>
</div>
</div> <!-- / .row -->
</div>
<div wire:ignore>
<textarea wire:model="message" class="min-h-fit h-48 " name="message" id="message"></textarea>
</div>
</div>
@push('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#message'))
.then(editor => {
editor.model.document.on('change:data', () => {
@this.set('message', editor.getData());
})
})
.catch(error => {
console.error(error);
});
</script>
@push
Usage
@livewire('pro.ckeditor-integration-component')