CKEditor提交数据时失效求助（Laravel 8+Livewire环境）

核心原因 #

CKEditor会替换原生<textarea>元素，编辑器输入的内容默认不会自动同步到原textarea，而Livewire读取的是原生textarea的值，因此会判定为空触发必填验证。

具体解决步骤 #

1. 实时同步编辑器内容到原生textarea #

在组件视图初始化CKEditor时，添加内容同步逻辑，确保Livewire能获取到编辑器内容：

<textarea wire:model="content" id="editor"></textarea>

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.2/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            // 编辑器内容变化时同步到textarea并通知Livewire
            editor.model.document.on('change:data', () => {
                const content = editor.getData();
                document.querySelector('#editor').value = content;
                @this.set('content', content);
            });
        })
        .catch(error => {
            console.error(error);
        });
</script>

2. 提交前强制同步（备选方案） #

如果实时同步仍有问题，可在提交按钮点击时先同步内容再触发验证：

<button wire:click="save">保存</button>

<script>
    let editorInstance;
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            editorInstance = editor;
        });

    // 绑定按钮点击事件，先同步再提交
    document.querySelector('button[wire:click="save"]').addEventListener('click', () => {
        const content = editorInstance.getData();
        document.querySelector('#editor').value = content;
        @this.set('content', content);
    });
</script>

3. 检查组件验证规则 #

确保Livewire组件内的验证规则正确绑定到对应属性：

// 你的Livewire组件类
public $content;

protected $rules = [
    'content' => 'required',
];

public function save()
{
    $this->validate();
    // 后续保存逻辑
}

4. 移除wire:model的延迟修饰符 #

如果给wire:model添加了.defer修饰符，需直接移除，避免内容更新延迟：

<!-- 错误写法：<textarea wire:model.defer="content" id="editor"></textarea> -->
<textarea wire:model="content" id="editor"></textarea>

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