yii2 ckeditor Image source URL is missing

Question

I'm using this ckeditor extension for yii2 https://packagist.org/packages/wadeshuler/yii2-ckeditor-cdn

I created directories backend/web/uploads/images and gave them rights 777

I configured backend/config/main.php like this

'modules' => [
        'ckeditor' => [
            'class' => 'wadeshuler\ckeditor\Module',    // required and dont change!!!

            'uploadDir' => '@app/web/uploads',    // must be file path (required when using filebrowser*BrowseUrl below)
            'uploadUrl' => '@web/uploads',        // must be valid URL (required when using filebrowser*BrowseUrl below)

            // These are basically passed to the `CKEDITOR.replace()`
            'widgetClientOptions' => [

                'filebrowserImageBrowseUrl' => '/ckeditor/default/image-browse',
                'filebrowserImageUploadUrl' => '/ckeditor/default/image-upload',
            ]
        ],

    ],

Put in the form

use wadeshuler\ckeditor\widgets\CKEditor;
<?= $form->field($model, 'body')->widget(CKEditor::className()) ?>

And when I upload an image and click "Send it to the server" it doesn't upload and when I click "ok" it says Image source URL is missing.

Maybe someone has faced this problem before? By the way, if I remove these lines

//'uploadDir' => '@app/web/uploads',    // must be file path (required when using filebrowser*BrowseUrl below)
        //'uploadUrl' => '@web/uploads',        // must be valid URL (required when using filebrowser*BrowseUrl below)

Nothing is changed. The same mistake.

Guntur Santoso Guntur Santoso · Accepted Answer · 2018-01-18T08:24:41

it's maybe a bit outdated, but who knows someone might stumble upon this same issue, although mine is a bit different in framework. i use codeigniter and trying to integrate it with ckeditor upload image plugin, but you should get the idea because the return value is the same for ckeditor.

here is a solution i found, refer to the link and see Example 3 section

which looks like this :

// Required: anonymous function reference number as explained above.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load a specific configuration file or anything else).
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages.
$langCode = $_GET['langCode'] ;

// Check the $_FILES array and save the file. Assign the correct path to a variable ($url).
$url = '/path/to/uploaded/file.ext';
// Usually you will only assign something here if the file could not be uploaded.
$message = '';

echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";

you should note that filebrowserUploadUrl options must be pointed to your yii function which handle the uploaded image, which in this case looks like sample code above. and don't forget to add uploadimage and filebrowser on extraPlugins options.

hope that helps.

yii2 ckeditor Image source URL is missing

1 Answers