如何在CKeditor上传中向POST值添加字段 [英] How to add a field to POST values in CKeditor upload

问题描述

我使用 django 和 ckeditor 向TextEdits提供wysiwyg口味。我想使用CKEditor文件上传功能（在filebrowser / image对话框中），但CKEditor做的POST上传图片只包含文件数据。

这是CSRF检查的问题。我在CKEditor文档中找不到并提供了更改POST数据进行文件上传的地方，以在POST数据中添加django的csrf_token。

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

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

解决方案

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

  CKEDITOR.on（'dialogDefinition'，function（ev）{
 var dialogName = ev.data.name; 
 var dialogDefinition = ev.data。定义; 
 if（dialogName =='image'）{
 dialogDefinition.removeContents（'Upload'）; 
 dialogDefinition.addContents（{
 title：Upload，
 id：upload，
 label：Upload，
 elements：[{
 type：html，
 html：'< form>< input id =imageuploadtype =filename =files []/> {％csrf_token％}< / form>'
}] 
} b $ b}）; 
  

这是一个未经测试的简化我的现实版本，但希望它显示了这个想法。 p>

这不会在图像对话框中设置URL字段，因此，单击对话框上的确定将给您一个错误消息。您将需要设置成功上传，因此：

  CKEDITOR.dialog.getCurrent（）。getContentElement（'info' ，'txtUrl'）。setValue（theURL）; 
  

I use django and ckeditor to provide wysiwyg taste to TextEdits. I would like to use CKEditor file upload function (in filebrowser / image dialog), but the POST made by CKEditor to upload the image just contains the file data.

This is a problem for CSRF checking. I couldn't find in CKEditor documentation and source a place to change the POST data for file upload, to add django's csrf_token in POST data.

As a workaround, I can change the filebrowserUploadUrl parameters to include csrf data in upload URL, use the @csrf_exempt for the upload view, and check request.GET parameters to check csrf. But is this solution safe ?

Anyway, if somebody knows how to include csrf token directly within CKEditor file upload POST data, i'm strongly interested...

解决方案

You can register for the dialogDefinition event, and completely rewrite the upload tab, thus:

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>'
      }]
    });
   }
});

This is an untested simplification of my real-world version, but hopefully it shows the idea.

This does not set the URL field in the image dialog, so clicking OK on the dialog will give you an error message. You will need to set that on a successful upload, thus:

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

这篇关于如何在CKeditor上传中向POST值添加字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！