Laravel livewire and ckeditor - ckeditor

Question

I'm trying to integrate ckeditro with laravel livewire but everytime I enter content into the editor, livewire removes the editor from my textarea.
My code is as follows
<div class="form-group" wire:ignore>
<label class="required" for="description">Page Description</label>
<textarea class="form-control ckeditor" id="description" name="description" cols="30" rows="10"
wire:model="description"
></textarea>
</div>
The following is the javascript
$(document).ready(function () {
CKEDITOR.instances['description'].on('change', function(e){
#this.set('description', e.editor.getData());
});
});
Any help would be appreciated
Thanks
Update
I am slowly getting there. The only issue I have is that when I save the form, the ckeditor is removed from the textarea.
<div class="form-group" wire:ignore>
<label class="required" for="description">Page Description</label>
<textarea class="form-control ckeditor" id="description" name="description" cols="30" rows="10"
wire:model.debounce.9999999ms="description"
x-data
x-init="
CKEDITOR.instances['description'].on('change', function(e){
$dispatch('input', e.editor.getData())
});
"></textarea>
</div>

Answer 1

How I did solved CKEDITOR problem in Laravel-Livewire.
Textarea
<div wire:ignore class="form-group row">
<x-label class="col-md-3 col-form-label" for="message" :value="__('Compose message')" />
<div class="col-md-9">
<textarea wire:model="message" class="form-control required" name="message" id="message"></textarea>
<x-error-message :value="__('message')" />
</div>
</div>
CKEDITOR-4
<script src="https://cdn.ckeditor.com/4.16.1/full/ckeditor.js"></script>
<script>
const editor = CKEDITOR.replace('message');
editor.on('change', function(event){
console.log(event.editor.getData())
#this.set('message', event.editor.getData());
})
</script>
CKEDITOR-5
<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>

Answer 2

Livewire has a .defer modifier that batches data updates with the next network request. More on Livewire Official Documentation
Tested on Laravel 8.4
Livewire v2.0
<form wire:submit.prevent="submit">
<div wire:ignore>
<textarea wire:model.defer="description" class="form-control" id="description" name="description">{!! $description !!}</textarea>
</div>
</form
Your CK editor instance
<script>
ClassicEditor
.create(document.querySelector('#description'))
.then(editor => {
editor.model.document.on('change:data', () => {
#this.set('description', editor.getData());
})
})
.catch(error => {
console.error(error);
});
</script>

Answer 3

I had the same problem.
You can re-initialize ckeditor with 'dehydrate'.
public function dehydrate() {
$this->emit('initializeCkEditor');
}
And in the parent view you can initialize the CKEditor again
Livewire.on('initializeCkEditor', function () {
ClassicEditor.create(document.getElementById('idOfTextarea')).then(editor => { thisEditor = editor });
});

Answer 4

When you save the form, Livewire reloads the Livewire component. Currently, you are loading ckeditor when the doc is ready.
On your save event, emit an event like:
$this->emitUp('postAdded');
And then in your javascript, add a listener for the event like:
<script>
window.livewire.on('postAdded' => {
CKEDITOR.instances['description'].on('change', function(e){
#this.set('description', e.editor.getData());
});
});
</script>
This should load ckeditor on the newly updated component code.
(https://laravel-livewire.com/docs/events)
Also, I would recommend changing this:
wire:model.debounce.9999999ms="description"
to this:
wire:model.lazy="description"
as this will wait until the textarea loses focus for Livewire to update.
(https://laravel-livewire.com/docs/properties#lazy-updating)

Answer 5

use wire:ignore in your container. This will prevent livewire to re-rendered the component. The explanation is here, just search in the code.
https://laravel-livewire.com/docs/2.x/alpine-js#creating-a-datepicker
<div id="where-the-livewire-id-attached">
<div id="container-wrapper" wire:ignore>
<textarea id="your-editor" cols="30" rows="10"></textarea>
<div id="word-count"></div>
</div>
</div>

Answer 6

I did this using alpinejs x-init initialize the editor wire:model binds data value from the editor wire:ignore is for letting know livewire to skip the editor from re-rendering when the state changes
<div class="row">
<div class="col mb-3">
<label for="productDescription" class="form-label">Product
Description</label>
<div wire:ignore>
<textarea x-data x-init="ClassicEditor
.create(document.querySelector('#description'), {
})
.then(editor => {
editor.model.document.on('change:data', () => {
#this.set('description', editor.getData());
})
})
.catch(err => {
console.error(err.stack);
});" id="description" wire:model.lazy="description" name="description" required>
{!! $description !!}
</textarea>
</div>
#error('description')
<span
class="text-warning"><small><strong>{{ $message }}</strong></small></span>
#enderror
<div class="form-text"><small class="text-muted">Enter a detailed
description of the product</small></div>
</div>
</div>

Answer 7

To make it work with ckeditor here is how we can do it
ClassicEditor
.create( document.querySelector( '#yourCkId' ) )
.then( editor => {
console.log( editor );
editor.model.document.on( 'change:data', () => {
// Below #this.set breaks down my ckeditor so I am avoiding it to set ckeditor value
// #this.set("description", editor.getData());
//instead use this
$('#yourTextAreaId').val(editor.getData());
} );
} )
.catch( error => {
console.error( error );
} );
and the HTML
<form wire:submit.prevent="store(document.querySelector('#yourTextAreaId').value)">
<div wire:ignore>
<div id="yourCkId">{!! $description !!}</div>
</div>
<textarea id="yourTextAreaId" wire:key="uniqueKey" wire:model="description" style="display: none">
{!! $description !!}
</textarea>
</form>
And Your Livewire Controller
public function store($note){
$this->note = $note;
}

Answer 8

<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
<div>
<div wire:ignore>
<textarea class="form-control" wire:model="description" x-data x-init="
ClassicEditor
.create( $refs.editorDescription)
.then(function(editor){
editor.model.document.on('change:data', () => {
#this.set('description', editor.getData())
})
})
.catch( error => {
console.error( error );
} );" x-ref="editordescription">
</textarea>
</div>