Laravel Livewire中textarea使用CKEditor 5 classic导致表单无法提交如何解决

问题原因 #

• CKEditor 5初始化后会隐藏原生的textarea控件，编辑的内容默认不会自动回写到原生textarea中
• 你给textarea外层加了wire:ignore，Livewire默认不会同步该区域的输入值到服务端属性
• 你的textarea绑定语法存在笔误：wire.model.defer应为wire:model.defer

解决步骤 #

1. 修正textarea绑定语法 #

先把textarea的绑定语法修正，避免属性绑定失效：

<div class="form-group" wire:ignore>
    <label for="note">Note</label>
    <!-- 把wire.model.defer修改为wire:model.defer -->
    <textarea wire:model.defer="state.note" id="note" class="form-control" cols="30" rows="4"></textarea>
</div>

2. 修改CKEditor初始化代码，增加内容同步逻辑 #

监听CKEditor的内容变化事件，把编辑器内的内容主动同步给Livewire对应的属性：

<script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/classic/ckeditor.js"></script>
<script>
let noteEditor;
ClassicEditor
    .create( document.querySelector( '#note' ) )
    .then( editor => {
        noteEditor = editor;
        // 监听编辑器内容变化，实时同步到Livewire属性
        editor.model.document.on('change:data', () => {
            @this.set('state.note', editor.getData());
        });
        // 可选：监听表单提交完成事件，重置编辑器内容，适配新增场景
        Livewire.on('appointmentSaved', () => {
            editor.setData('');
        });
    } )
    .catch( error => {
        console.error( error );
    } );
</script>

提示：如果是编辑场景需要模态框打开时回填已有内容，只需要在打开编辑模态框的事件监听逻辑中增加noteEditor.setData('需要回填的富文本内容')即可。

3. 可选优化：提交前同步内容减少请求次数 #

如果不想实时同步内容减少服务端请求，也可以在表单提交前主动同步一次编辑器内容，修改提交按钮：

<button type="submit" id="submit" class="btn btn-primary" wire:click="syncNote(noteEditor?.getData())">
    <i class="mr-1 fa fa-save"></i>
    {{ $showEditModal == true ? "Update" : "Save" }}
</button>

然后在对应的Livewire组件中新增syncNote方法接收内容，赋值给$this->state['note']即可。

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