Integrate ckeditor and ckfinder into laravel website

Admin   Laravel   1016  2021-06-24 08:52:08

Normally you code php if you want to install ckfinder for the web you can download it directly from the ckfinder website this link and then configure $_SESSION for security and authorization.

End result: In laravel you use composer download and you will have a complete ckfinder like this:

 install ckfinder

Talk about normal integration.

With Ckfinder, the usual integration will be to download and put in the public folder of the project like this article:  integrating ckeditor and ckfinder into the php website . But that's not the right way of integrating ckfinder into laravel. because it is very dangerous for the system when the static file contains the php code of ckfinder. for example cfrs_token is also one of the security bugs.

Let's take a look at the official ckfinder page that talks about downloading ckfinder in laravel:

Install CKEditor

First you install ckeditor 4 as usual. I myself find it quite unfamiliar with ckeditor 5, so I usually choose ckeditor 4. you can download and unzip it and put it in the public folder of the project. download ckeditor 4 here

Install CKFinder

To install ckfinder for laravel I recommend you use composer. if not, you can download and install composer for macos by following this path: download and install composer for macosx

if you use windows then just download and install normally follow this link download and install composer .

After you have composer, you install the package CKFinder ?with the following 2 commands:

composer require ckfinder/ckfinder-laravel-package
php artisan ckfinder:download


After the installation and download process is complete run the following command to export the css, js and config files to public:

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


Finally create userfiles  folder  inside public of Laravel

mkdir -m 777 public/userfiles


More Ckfinder Security with Middleware

We create Middleware with the command:

php artisan make:middleware ckFinderAuthentication


Edit the contents of the App\Http\Middleware\ckFinderAuthentication as follows:

<?php

namespace App\Http\Middleware;

use Illuminate\Support\Facades\Auth;
use Closure;

class ckFinderAuthentication
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if (Auth::check()) {
            config(['ckfinder.authentication' => function() use ($request) {
                return true;
            }] );
        } else {
            config(['ckfinder.authentication' => function() use ($request) {
                return false;
            }] );
        }

        return $next($request);
    }
}


Or if you don't need security then use this:
 

<?php

namespace App\Http\Middleware;

use Illuminate\Support\Facades\Auth;
use Closure;

class ckFinderAuthentication
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        config(['ckfinder.authentication' => function() {
            return true;
        }]);
        return $next($request);
    }
}


CSRF protection mechanism in laravel with CKFinder

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

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

// 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 for CKFinder's path by going to app/Http/Middleware/VerifyCsrfToken.php and adding the line ' ckfinder/* '

// 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/*',
        // ...
    ];
}


Configure CKFinderFi
Next, open the file  /config/ckfinder.php  and find the following line

$config['authentication'] = '\CKSource\CKFinderBridge\CKFinderMiddleware';


change to the following line:

$config['authentication'] = '\App\Http\Middleware\ckFinderAuthentication';


Modify load router in laravel

This part is also important for me to proactively link to ckeditor.

# config/ckfinder.php
$config['loadRoutes'] = false;


Edit web.php router router
you go to ckfinder in the downloaded vendor folder there is a router like this path:

 [LARAVEL]/vendor/ckfinder/ckfinder-laravel-package/src/routes.php

then copy all the contents to the web.php router

## /routes/web.php
Route::any('/ckfinder/connector', '\CKSource\CKFinderBridge\Controller\[email protected]')
    ->name('ckfinder_connector');

Route::any('/ckfinder/browser', '\CKSource\CKFinderBridge\Controller\[email protected]')
    ->name('ckfinder_browser');

//Route::any('/ckfinder/examples/{example?}', '\CKSource\CKFinderBridge\Controller\[email protected]')
//    ->name('ckfinder_examples');


Run test results
Create a view file like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=UTF-8>
    <title>CKEditor</title>
</head>
<body>
    <textarea name="content" id="content" cols="30" rows="10"></textarea>
    <script src={{ url('path/ckeditor.js') }}></script>
    <script>
    CKEDITOR.replace( 'content', {
        
        filebrowserBrowseUrl     : "{{ route('ckfinder_browser') }}",
        filebrowserImageBrowseUrl: "{{ route('ckfinder_browser') }}?type=Images&token=123",
        filebrowserFlashBrowseUrl: "{{ route('ckfinder_browser') }}?type=Flash&token=123",
        filebrowserUploadUrl     : "{{ route('ckfinder_connector') }}?command=QuickUpload&type=Files",
        filebrowserImageUploadUrl: "{{ route('ckfinder_connector') }}?command=QuickUpload&type=Images",
        filebrowserFlashUploadUrl: "{{ route('ckfinder_connector') }}?command=QuickUpload&type=Flash",
    } );
    </script>
    @include('ckfinder::setup')
</body>
</html>



and the router adds a route like this:

Route::get('/test', function () {
    return view('test');
});

 

Finally CKFinder 3 License

If you don't want to use the demo you can get the key here:

CKFinder 3 License