Integrate CKFinder 3 package with CKEditor 4 for Laravel 7

We will integrate CKFinder 3 package with CKEditor 4 for Laravel 7 in this article

Add a Composer dependency and install the package

composer require ckfinder/ckfinder-laravel-package

After installing the Laravel package you need to download CKFinder code. It is not shipped with the package due to different license terms. To install it, run the following artisan command:

php artisan ckfinder:download

It will download the required code and place it inside an appropriate directory of the package (vendor/ckfinder/ckfinder-laravel-package/).

Publish the CKFinder connector configuration and assets.

php artisan vendor:publish --tag=ckfinder-assets --tag=ckfinder-config

This will publish CKFinder assets to public/js/ckfinder, and the CKFinder connector configuration to config/ckfinder.php.

Create a directory for CKFinder files and allow for write access to it. By default CKFinder expects the files to be placed in public/userfiles (this can be altered in the configuration).

mkdir -m 777 public/userfiles

CKFinder by default uses a CSRF protection mechanism based on double submit cookies. On some configurations it may be required to configure Laravel not to encrypt the cookie set by CKFinder.

To do that, please add the cookie name ckCsrfToken to the $except property of EncryptCookies middleware:

<?php
// app/Http/Middleware/EncryptCookies.php
namespace App\Http\Middleware;
use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;
class EncryptCookies extends Middleware
{
    /**
     * The names of the cookies that should not be encrypted.
     *
     * @var array
     */
    protected $except = [
        'ckCsrfToken',
    ];
}

You should also disable Laravel’s CSRF protection mechanism for CKFinder’s path. This can be done by adding ckfinder/* pattern to the $except property of VerifyCsrfToken middleware:

<?php
// app/Http/Middleware/VerifyCsrfToken.php
namespace App\Http\Middleware;
use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;
class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array
     */
    protected $except = [
        'ckfinder/*',
    ];
}

At this point you should see the connector JSON response after navigating to the <APP BASE URL>/ckfinder/connector?command=Init address. Authentication for CKFinder is not configured yet, so you will see an error response saying that CKFinder is not enabled.

CKFinder connector authentication is handled by middleware class or alias. To create the custom middleware class, use the artisan command:

php artisan make:middleware CustomCKFinderAuth

The handle method in CustomCKFinderAuth class allows to authenticate CKFinder users.

<?php
// app/Http/Middleware/CustomCKFinderAuth.php
namespace App\Http\Middleware;
use Closure;
class CustomCKFinderAuth
{
    /**
     * Handle an incoming request.
     *
     * @param \Illuminate\Http\Request $request
     *
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        config(['ckfinder.authentication' => function () {
            return \Auth::guard('admin')->check();
        }]);
        return $next($request);
    }
}

Add routes of CKFinder:

<?php
// routes/web.php
use Illuminate\Support\Facades\Route;
// ...
Route::any('/ckfinder/connector', '\CKSource\CKFinderBridge\Controller\CKFinderController@requestAction')
    ->name('ckfinder_connector');
Route::any('/ckfinder/browser', '\CKSource\CKFinderBridge\Controller\CKFinderController@browserAction')
    ->name('ckfinder_browser');

Add ‘ckfinder’ array into $middlewareGroups

<?php
// app/Http/Kernel.php
namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
class Kernel extends HttpKernel
{
    // ...
    protected $middlewareGroups = [
        // ...
        'ckfinder' => [
            'web',
            \App\Http\Middleware\CKFinderMiddleware::class,
        ],
    ];
    // ...
}

Set the configuration of CKFinder

<?php
// config/ckfinder.php
$config['authentication'] = 'ckfinder';
$config['licenseName'] = 'YourDomain';
$config['licenseKey'] = 'YourLicense';
$config['backends']['default'] = [
    // ..
    'baseUrl' => config('app.url').'/storage/userfiles/',
    'root' => 'storage/userfiles/',
    // ..
];

Create the symbolic link, you may use artisan command:

php artisan storage:link

Add scripts in the blade file

<script src="https://ckeditor.com/assets/libs/ckeditor4/4.15.0/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'content', {
    filebrowserBrowseUrl: '{{ asset(route('ckfinder_browser')) }}',
    filebrowserImageBrowseUrl: '{{ asset(route('ckfinder_browser')) }}?type=Images',
    filebrowserFlashBrowseUrl: '{{ asset(route('ckfinder_browser')) }}?type=Flash',
    filebrowserUploadUrl: '{{ asset(route('ckfinder_connector')) }}?command=QuickUpload&type=Files',
    filebrowserImageUploadUrl: '{{ asset(route('ckfinder_connector')) }}?command=QuickUpload&type=Images',
    filebrowserFlashUploadUrl: '{{ asset(route('ckfinder_connector')) }}?command=QuickUpload&type=Flash'
});
</script>

Happy Coding:)