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

Question

I'm working on Yii2 Project where I've integrated http://ckeditor.com/demo

Now I want to implement functionality of file/image upload in it.

This is how I integrated CKEditor in Yii2 Project.

Step1: AppAsset.php

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

Calling ckeditor.js javascript file from config/AppAsset Class

Step2: View

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

Step3: 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";    
};

Here I've configured ImageBrowserUrl and ImageUploadUrl mentioned here http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)

Step4: Controller

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

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

Here I'm expecting uploaded image data. But whenever I click on Send it to Server button after selection of an image its giving me following error.

Not sure whether its issue of wrong url configuration in config.js or is it Yii2 form submission issue.

Any help would be appreciated.

Answer 1

I believe you have a problem with the CRSF tokens. Read more about the security here: 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: https://stackoverflow.com/a/28526946/1880627

Answer 2

Rather than disabling CSRF validation it is far better and more secure to submit the token with the form to pass server-side validation. This can be quite easily done by injecting a hidden input field into the upload form with 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);
        }
    });
});

For a more detailed discussion on the issue refer to 2amigos/yii2-ckeditor-widget, issue #2 . This is also where the code snippet is taken from, with a few minor tweaks to cover the case of multiple widgets on the page.