如何在CKeditor上传中向POST值添加字段

Question

我使用django和ckeditor为TextEdits提供了所见即所得.我想使用CKEditor文件上传功能(在文件浏览器/图像对话框中),但是CKEditor发布的上传图像的POST只包含文件数据.

这是CSRF检查的问题.我在CKEditor文档中找不到并找到一个地方来更改文件上传的POST数据,在POST数据中添加django的csrf_token.

作为解决方法,我可以更改filebrowserUploadUrl参数以在上传URL中包含csrf数据,使用@csrf_exempt作为上载视图,并检查request.GET参数以检查csrf.但这个解决方案安全吗？

无论如何,如果有人知道如何在CKEditor文件上传POST数据中直接包含csrf令牌,我非常感兴趣...

Answer 1

您可以注册dialogDefinition事件,并完全重写上传选项卡,因此:

CKEDITOR.on('dialogDefinition', function (ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
  if (dialogName == 'image') {
    dialogDefinition.removeContents('Upload');
    dialogDefinition.addContents({
      title: "Upload",
      id: "upload",
      label: "Upload",
      elements: [{
        type: "html",
        html: '<form><input id="imageupload" type="file" name="files[]" />{%csrf_token%}</form>'
      }]
    });
   }
});

这是我对现实世界版本的一种未经测试的简化,但希望它能够显示出这个想法.

这不会在图像对话框中设置URL字段,因此单击对话框上的"确定"将显示错误消息.您需要在成功上传时设置,因此:

CKEDITOR.dialog.getCurrent().getContentElement('info', 'txtUrl').setValue(theURL);