CKEditor文件上传在Yii2中不起作用

Question

我正在开发Yii2项目，我已经整合了http://ckeditor.com/demo

现在我想在其中实现文件/图片上传的功能。

这就是我在Yii2 Project中集成CKEditor的方法。

第1步：AppAsset.php

public $js = [
    'ckeditor/ckeditor.js',
];

从config/AppAsset类

调用ckeditor.js javascript文件

第2步：查看

<?= $form->field($model, 'standard_output_information')->textarea(['rows' => 2, 'class'=>'ckeditor']) ?>

第3步：config.js

CKEDITOR.editorConfig = function (config) {   
    var base_url = window.location.origin;
    var pathArray = window.location.pathname.split('/');
    var projectUrl = base_url + "/" + pathArray[1] + "/" + pathArray[2] + "/" + pathArray[3] + "/uploads";

    config.filebrowserImageBrowseUrl = base_url + "/pcwf" + "/backend" + "/web" + "/businessprocessprofile" + "/upload";
    config.filebrowserImageUploadUrl = base_url + "/pcwf" + "/backend" + "/web" + "/businessprocessprofile" + "/upload";    
};

这里我配置了这里提到的ImageBrowserUrl和ImageUploadUrl http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)

第4步：控制器

public function actionUpload() {
    echo \yii\helpers\Html::csrfMetaTags();

    echo "<pre>";
    print_r($_FILES);
    print_r($_REQUEST);
    exit;
}

这里我期待上传的图片数据。但是，每当我在选择图像后单击Send it to Server按钮时，它会给我以下错误。

不确定在config.js中是否存在错误的url配置问题，或者是Yii2表单提交问题。

任何帮助都将不胜感激。

Answer 1

我相信你的CRSF令牌有问题。在此处详细了解安全性：http://www.yiiframework.com/doc-2.0/guide-security-best-practices.html。解决此问题的最简单方法是为该特定操作禁用CRSF。您可以在此处查看如何执行此操作：https://stackoverflow.com/a/28526946/1880627

Answer 2

不是禁用CSRF验证，而是使用表单提交令牌传递服务器端验证更好，更安全。通过使用javascript：

将隐藏的输入字段注入上传表单，可以非常轻松地完成此操作

$(document).off('click', '.cke_dialog_tabs a[id^="cke_Upload_"]').on('click', '.cke_dialog_tabs a[id^="cke_Upload_"]', function () {
    var $forms = $('.cke_dialog_ui_input_file iframe').contents().find('form');
    var csrfName = yii.getCsrfParam();
    $forms.each(function () {
        if (!$(this).find('input[name=' + csrfName + ']').length) {
            var csrfTokenInput = $('<input/>').attr({
                'type': 'hidden',
                'name': csrfName
            }).val(yii.getCsrfToken());
            $(this).append(csrfTokenInput);
        }
    });
});

有关该问题的更详细讨论，请参阅2amigos/yii2-ckeditor-widget, issue #2。这也是取自代码片段的地方，只需进行一些小的调整即可覆盖页面上多个小部件的情况。