如何在CKEditor文件上传中发送API Token及配置自定义请求头？

嘿，我来帮你搞定这个问题！首先看一下你代码里的一个小错误——你在选择CSRF Token的meta标签时，name="csrf- token"多了个空格，应该是csrf-token，这会导致获取不到正确的Token值，这可能是配置没生效的原因之一。

另外，针对CKEditor 4.x的文件上传（包括文件浏览器的上传），正确的配置方式需要确保fileTools_requestHeaders能被正确应用，同时保证必要的插件加载。下面是修正后的完整代码：

<script>
CKEDITOR.replace( 'editor', {
    // 你的文件上传API地址
    filebrowserUploadUrl: "你的上传URL",
    // 指定上传方法为POST
    filebrowserUploadMethod: 'post',
    // 配置全局请求头，所有fileTools发起的请求都会带上这些头
    fileTools_requestHeaders: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        'Authorization': 'Bearer ' + $('meta[name="api_token"]').attr('content')
    },
    // 如果你是自定义构建的CKEditor，确保加载必要的上传插件
    extraPlugins: 'filetools,uploadimage'
});
</script>

额外的排查要点： #

• 打开浏览器开发者工具的网络面板，查看上传请求的请求头，确认X-CSRF-TOKEN和Authorization是否已正确发送
• 检查页面中的meta标签是否存在：<meta name="csrf-token" content="xxx">和<meta name="api_token" content="xxx">，确保它们的name属性值没有拼写错误
• 如果你使用的是CKEditor 5，配置方式会完全不同（需要用ClassicEditor.create并配置ckfinder相关选项），但从你的代码来看应该是CKEditor 4.x版本

内容的提问来源于stack exchange，提问作者Haniye Shadman