CKEditor 5 / Laravel Livewire 即使有内容也会返回“null”

Question

我使用 CKEditor 5 作为我的所见即所得编辑器。它加载良好，看起来很完美 - 但是当我提交表单并尝试获取编辑器的内容时，它返回 null。

我的 HTML 代码：

<form wire:submit.prevent="sendBulkEmail">
                            <div>
                                <textarea wire:model="message" class="form-control" id="ckeditor"></textarea>
                            </div>
                            <div class="mb-4">
                                <button type="submit" class="btn btn-alt-primary">
                                    Send Bulk Email
                                </button>
                            </div>
                        </form>

                        <script>
                            ClassicEditor
                                .create( document.querySelector( '#ckeditor' ) )
                                .catch( error => {
                                    console.error( error );
                                } );
                        </script>

控制器：

    public $message;

    dd($this->message);

有什么想法可以让 Livewire 发挥价值吗？

查看了google、CKEditor Docs 和其他步骤。

Answer 1

CKEditor 将创建一个单独的 DOM 元素作为您所选元素的同级元素，在本例中为#ckeditor（在浏览器检查器中检查）。您的 Livewire 模型绑定适用于原始 textarea 元素，它实际上从未改变。

您需要做的是挂钩编辑器数据更改事件，然后使用（例如）事件将该数据发送到 Livewire。

editor.model.document.on( 'change:data', () => {
    console.log( 'The data has changed!' );

    Livewire.emit('ckeditorChanged', editor.getData())
});