Laravel使用CKEditor5提交FAQ数据时字段为空的问题求助

我有一个名为FAQ的数据库表，包含question、answer、folder_id字段。为question和answer字段使用CKEditor5后，编辑器能正常显示且字体等功能可用，但提交数据到控制器时，返回了必填字段为空的验证错误（尽管已填写这些字段），截图显示验证提示question和answer为必填项。

相关代码 #

Create.blade文件 #

<form method="post" action="{{ route('admin.faq.store') }}" enctype="multipart/form-data">
    @csrf
    <div name="question">
        <label for="question">{{('question')}}</label>
        <div class="form-group" id="editorClassic" >
            <input type="text" class="form-control" >
        </div>
    </div>
    <br />
    <div>
        <label for="answer">{{('answer')}}</label>
        <div class="form-group" id="editor">
            <input type="text" class="form-control" name="answer" />
        </div>
    </div>
    <br />
    <div class="form-group">
        <label for="folder_id">{{('folder')}}</label>
        <select name="faqsfolder_id">
            @foreach($faqsfolder as $faqsfolder)
            <option value="{{$faqsfolder->id}}">{{$faqsfolder->name}}</option>
            @endforeach
        </select>

    </div>
    <button type="submit" class="btn btn-primary">Add FAQ</button>
</form>

控制器store方法 #

public function store(Request $request)
{
    $request->validate([
        'question' => 'required',
        'answer' => 'required',
        'faqsfolder_id' => [
            'required', 'exists:folder,id'
        ],
    ]);
}

解决方案 #

问题根源在于表单字段配置错误，导致CKEditor的内容无法正确提交到后端：

1. question字段缺失name属性
   原代码中question对应的<input>没有设置name="question"，表单提交时不会携带该字段的值，后端验证自然提示必填为空。同时，CKEditor5针对富文本设计，更适合搭配<textarea>而非单行<input>。

2. answer字段用<input>适配性差
   单行<input>无法承载CKEditor的富文本内容，编辑器替换后可能无法正确同步内容到表单字段。

修改步骤：

1. 调整表单字段为textarea并添加正确name属性 #

更新Create.blade文件中的表单部分：

<form method="post" action="{{ route('admin.faq.store') }}" enctype="multipart/form-data">
    @csrf
    <div>
        <label for="question">{{ __('question') }}</label>
        <div class="form-group">
            <textarea class="form-control" name="question" id="editorClassic"></textarea>
        </div>
    </div>
    <br />
    <div>
        <label for="answer">{{ __('answer') }}</label>
        <div class="form-group">
            <textarea class="form-control" name="answer" id="editor"></textarea>
        </div>
    </div>
    <br />
    <div class="form-group">
        <label for="folder_id">{{ __('folder') }}</label>
        <select name="faqsfolder_id">
            @foreach($faqsfolder as $faqsfolder)
            <option value="{{$faqsfolder->id}}">{{$faqsfolder->name}}</option>
            @endforeach
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Add FAQ</button>
</form>

2. 确保CKEditor5正确初始化 #

在页面中添加CKEditor初始化代码（未添加则补充）：

// 初始化question编辑器
ClassicEditor
    .create(document.querySelector('#editorClassic'))
    .catch(error => {
        console.error(error);
    });

// 初始化answer编辑器
ClassicEditor
    .create(document.querySelector('#editor'))
    .catch(error => {
        console.error(error);
    });

3. （可选）检查字段名映射 #

如果数据库表字段是folder_id，而表单用的是faqsfolder_id，后续保存数据时需注意字段映射，不过这不是当前必填错误的直接原因。

修改后，CKEditor的内容会正确同步到textarea，表单提交时会携带question和answer字段的值，后端验证即可通过。

内容的提问来源于stack exchange，提问作者Delano van londen