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

Question

我正在开发我集成的 Yii2 项目 http://ckeditor.com/demo

现在我想在里面实现file/image上传的功能

这就是我在 Yii2 项目中集成 CKEditor 的方式。

第一步：AppAsset.php

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

正在从 config/AppAsset Class

调用 ckeditor.js javascript 文件

第二步：查看

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

第三步：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)

第四步：控制器

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. The easiest way to get around this is to disable CRSF for that particular action. You can take a look on how to do that here:

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。这也是代码片段的来源，进行了一些小的调整以涵盖页面上多个小部件的情况。

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

CKEditor file upload not working in Yii2

javascript

php

jquery

ckeditor

yii2