CKEditor 5结合Laravel Livewire使用时，编辑器有内容却返回null求助

问题根源在于：CKEditor 5会隐藏原生<textarea>元素，直接通过wire:model绑定无法自动同步编辑器的内容——编辑器的内容不会主动回写到原生textarea，导致Livewire无法获取到值。

以下是具体解决步骤：

1. 保存CKEditor实例引用 #

修改JS代码，将编辑器实例保存到变量中，方便后续调用同步方法：

let editor;
ClassicEditor
    .create(document.querySelector('#ckeditor'))
    .then(newEditor => {
        editor = newEditor;
    })
    .catch(error => {
        console.error(error);
    });

2. 提交前手动同步编辑器内容到textarea #

由于Livewire的AJAX提交不会触发CKEditor的原生内容同步，必须在提交前手动执行同步操作，有两种实现方式：

方式一：通过按钮点击事件同步 #

将按钮的type="submit"改为type="button"，点击时先同步内容再触发Livewire的提交方法：

<form>
    <div>
        <textarea wire:model="message" class="form-control" id="ckeditor"></textarea>
    </div>
    <div class="mb-4">
        <button type="button" class="btn btn-alt-primary" onclick="submitEmail()">
            Send Bulk Email
        </button>
    </div>
</form>

<script>
function submitEmail() {
    // 把编辑器内容同步到原生textarea
    editor.updateElement();
    // 触发Livewire的提交方法
    Livewire.dispatch('sendBulkEmail');
}
</script>

方式二：利用表单提交钩子同步 #

给表单添加提交前的同步逻辑，无需修改按钮类型：

<form wire:submit.prevent="sendBulkEmail" onsubmit="editor.updateElement()">
    <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>

3. 验证控制器接收逻辑 #

确保你的Livewire组件方法正确处理提交：

public $message;

public function sendBulkEmail()
{
    // 此时$this->message已能获取到编辑器的HTML内容
    dd($this->message);
}

核心原理：调用editor.updateElement()会强制将CKEditor的内容写入绑定的<textarea>，让wire:model能同步到最新值。

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