Laravel控制器中获取CKEditor值失败问题排查与解决

错误原因分析 #

• 直接通过$("#editor").html()获取内容是错误的：DecoupledEditor的编辑内容并不存储在<div id="editor">的HTML结构里，而是维护在编辑器内部实例中。
• 未保留编辑器实例引用：初始化时没有保存编辑器实例，无法调用官方API获取正确的编辑内容。
• 表单提交事件绑定时机不准确：绑定到.submit按钮的点击事件，可能出现表单默认提交流程先于内容赋值执行的情况。

解决步骤 #

1. 保存编辑器实例并使用官方API获取内容 #

修改CKEditor初始化代码，将编辑器实例保存到全局变量，提交时通过editor.getData()获取真实编辑内容：

// 全局变量保存编辑器实例
let editorInstance;

DecoupledEditor
.create( document.querySelector( '#editor' ), {
    language:{
        ui:'fa',content:'fa'
    }
} )
.then( editor => {
    editorInstance = editor; // 保存实例
    const toolbarContainer = document.querySelector( '#toolbar-container' );
    toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
    console.error( error );
} );

2. 修正表单提交事件绑定 #

绑定到表单的submit事件，确保在表单提交前完成内容赋值：

// 绑定到表单的submit事件（替换原按钮点击事件）
$(document).on('submit', 'form', function() {
    if (editorInstance) {
        // 用编辑器官方API获取内容
        const editorContent = editorInstance.getData();
        $("#taskDsc").val(editorContent);
    }
});

3. 优化隐藏textarea的方式（可选但推荐） #

避免display:none可能导致的表单数据忽略问题，改用以下样式隐藏：

<textarea style="visibility:hidden; position:absolute; left:-9999px;" name='taskDsc' id='taskDsc'></textarea>

4. 验证后端规则 #

• 确保taskRequestStore验证类中，taskDsc字段的规则允许提交（比如设置为required或nullable）。
• 如果对应模型使用了$fillable属性，确认taskDsc已添加到白名单中。

5. 调试确认 #

在控制器中直接打印指定字段，确认数据是否传递：

public function store(taskRequestStore $request)
{
    dd($request->input('taskDsc'));
}

内容的提问来源于stack exchange，提问作者mahdi.gh