如何在Livewire中使用CKEditor5？解决值传递为null的问题

我有一个Livewire组件create.blade.php，代码如下：

<form>
    <label class="block font-bold mt-4" for="body">Description</label>
    <div class="my-5" id="editor" name="body"></div>

    <input type="hidden" wire:model="body" id="bodyInput">

    <button wire:click.prevent="storePost()" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg">Create</button>
</form>

尝试在App.js中捕获CKEditor的值并传递，但没有效果，代码如下：

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

ClassicEditor
.create( document.querySelector( '#editor' ),
    {
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
            ]
        }
    }
)
.then( editor => {
    editor.model.document.on('change:data', () => {
        document.getElementById("bodyInput").value = editor.getData();
    });
})
.catch( error => {
    console.error( error );
} );

在CreatePost.php Livewire组件中打印$body的值时始终得到null，请问如何将CKEditor的值传递到Livewire模型中？

问题核心：你仅修改了隐藏输入框的value，但Livewire需要监听输入框的input或change事件才会更新对应属性，所以必须手动触发事件或直接调用Livewire的更新方法。

方法1：触发输入框的input事件（推荐） #

修改App.js中的回调逻辑，设置完值后手动触发input事件，让Livewire感知到值的变化：

.then( editor => {
    editor.model.document.on('change:data', () => {
        const bodyInput = document.getElementById("bodyInput");
        bodyInput.value = editor.getData();
        // 触发Livewire监听的input事件
        bodyInput.dispatchEvent(new Event('input'));
    });
})

方法2：直接调用Livewire的全局更新方法 #

不需要依赖隐藏输入框，直接通过Livewire的全局API更新组件属性：

1. 修改App.js：

.then( editor => {
    editor.model.document.on('change:data', () => {
        // 调用Livewire的set方法直接更新body属性
        window.Livewire.emit('updateBody', editor.getData());
    });
})

2. 在CreatePost.php中添加事件监听：

protected $listeners = ['updateBody'];

public function updateBody($content)
{
    $this->body = $content;
}

方法3：提交前同步值 #

如果不需要实时同步，仅在提交时传递值，可以修改按钮的点击事件：

1. 先把CKEditor实例暴露到全局：

.then( editor => {
    window.editor = editor; // 暴露实例到全局作用域
})

2. 修改blade中的按钮：

<button wire:click.prevent="storePost()" onclick="document.getElementById('bodyInput').value = window.editor.getData(); document.getElementById('bodyInput').dispatchEvent(new Event('input'));">Create</button>

额外注意事项 #

给CKEditor的容器加上wire:ignore，避免Livewire重新渲染时破坏编辑器DOM结构：

<div class="my-5" id="editor" name="body" wire:ignore></div>

内容的提问来源于stack exchange，提问作者color