为什么 ckeditor 失去对 Laravel 8 / livewire 2 应用程序中输入的任何字符的关注？

Question

在 Laravel 8 / livewire 2 应用程序中，我添加了 ckeditor 并且它可以工作，使用 jkavascript 更新 livewire 数据，但问题是，当我在 ckeditor 区域输入 1 个字符时，它会失去焦点，接下来输入的符号会丢失。我愿意 :

            <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 );
                    } );

我对这个表单上的所有输入都使用 lazy，它们工作正常 - 在浏览器控制台中，我看到仅当用户离开输入时才获取消息。在上面的 change:data 事件中，我看到该事件被触发，我想这会打破惰性模式，但我不知道如何解决？

谢谢！

Answer 1

我找到了使用 change:isFocused 事件的决定：

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'

为什么 ckeditor 失去对 Laravel 8 / livewire 2 应用程序中输入的任何字符的关注？

Why ckeditor lose focus on any char entered in Laravel 8 / livewire 2 app?

javascript

fckeditor

laravel-livewire