In Laravel 8 / livewire 2 app I added ckeditor and it works, with livewire data updating with jkavascript, but problem is that when I enter 1 char in ckeditor area, it lose focus next next entered symbolsa are lost. I do :
<div wire:ignore class="p-2 w-full">
<textarea
wire:model.lazy="form.content"
class="form-control"
id="content_textarea"></textarea>
<x-jet-input-error for="form.content" class="mt-2"/>
</div>
...
ClassicEditor
.create( document.querySelector( '#content_textarea' ), {
extraPlugins: [ SimpleUploadAdapterPlugin ],
// ...
} )
.then(editor => {
editor.model.document.on('change:data', () => {
console.log('change:data editor.getData()::')
console.log(editor.getData())
@this.set('form.content', editor.getData() )
})
})
.catch( error => {
console.error( error );
} );
I use lazy for all inputs on this form and they work ok - in browsers console I see fetching messages only when user leaves the input. In change:data event above I see that event is triggered and I supposed this break lazy mode, but I do not know how that can be fixed?
Thanks!
I found decision with using change:isFocused event :
CKEditorInit: function () {
ClassicEditor
.create( document.querySelector( '#content_textarea' ), {
extraPlugins: [ SimpleUploadAdapterPlugin ],
} )
.then(editor => {
editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
if ( !isFocused ) {
const doc = document.getElementById('news_admin_page_container');
var wireIds = window.livewire.find(doc.getAttribute("wire:id"))
wireIds.set('form.content', editor.getData())
}
} ); // 'change:isFocused'