Repository: ckfinder/ckfinder-laravel-package
Branch: master
Commit: 266e31e17496
Files: 30
Total size: 62.2 KB
Directory structure:
gitextract_j_y8v1bc/
├── .gitignore
├── LICENSE.md
├── README.md
├── composer.json
├── src/
│ ├── CKFinderMiddleware.php
│ ├── CKFinderServiceProvider.php
│ ├── Command/
│ │ └── CKFinderDownloadCommand.php
│ ├── Controller/
│ │ └── CKFinderController.php
│ ├── config.php
│ └── routes.php
└── views/
├── browser.blade.php
├── samples/
│ ├── ckeditor.blade.php
│ ├── full-page-open.blade.php
│ ├── full-page.blade.php
│ ├── index.blade.php
│ ├── layout.blade.php
│ ├── localization.blade.php
│ ├── modals.blade.php
│ ├── other-custom-configuration.blade.php
│ ├── other-read-only.blade.php
│ ├── plugin-examples.blade.php
│ ├── popups.blade.php
│ ├── skins-jquery-mobile.blade.php
│ ├── skins-moono.blade.php
│ ├── user-interface-compact.blade.php
│ ├── user-interface-default.blade.php
│ ├── user-interface-listview.blade.php
│ ├── user-interface-mobile.blade.php
│ └── widget.blade.php
└── setup.blade.php
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
vendor/
_connector/
public/
composer.lock
================================================
FILE: LICENSE.md
================================================
Software License Agreement
==========================
Copyright (c) 2023, CKSource Holding sp. z o.o. All rights reserved.
CKFinder package for Laravel is licensed under the terms of the MIT license (see Appendix A).
Trademarks
----------
CKFinder is a trademark of CKSource Holding sp. z o.o. All other brand
and product names are trademarks, registered trademarks or service
marks of their respective holders.
Sources of Intellectual Property required by package
----------------------------------------------------
The installation instruction requires user to run the following command to download
CKFinder separately (the file manager itself):
```bash
artisan ckfinder:download
```
The downloaded CKFinder distribution is licensed under a separate CKFinder License.
---
Appendix A: The MIT License
---------------------------
The MIT License (MIT)
Copyright (c) 2023, CKSource Holding sp. z o.o. All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
<h3 align="center"><img src="https://user-images.githubusercontent.com/803299/42567830-6b6d3ad6-850b-11e8-9151-43021c92d8b7.png"></h3>
# CKFinder 3 Package for Laravel 9+ [](https://twitter.com/intent/tweet?text=Check%20out%20CKFinder%20package%20for%20Laravel%20&url=https://github.com/ckfinder/ckfinder-laravel-package)
[]()
[](https://opensource.org/licenses/MIT)
[](https://packagist.org/packages/ckfinder/ckfinder-laravel-package)
[](https://packagist.org/packages/ckfinder/ckfinder-laravel-package)
[](http://eepurl.com/c3zRPr)
[](https://twitter.com/ckeditor)
This repository contains the CKFinder 3 Package for Laravel 9+. If you are looking for a package for older version of Laravel, please use [version 3](https://github.com/ckfinder/ckfinder-laravel-package/tree/v3.x.x).
<h3 align="center"><a href="https://ckeditor.com/docs/ckfinder/demo/ckfinder3/samples/widget.html"><img src="https://user-images.githubusercontent.com/803299/42693315-18717aae-86af-11e8-863a-74070edb3912.png"></a></h3>
## Installation
1. Add a Composer dependency and install the package.
```bash
composer require ckfinder/ckfinder-laravel-package
```
2. Run the command to download the CKFinder code.
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:
```bash
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/`).
3. Publish the CKFinder connector configuration and assets.
```bash
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`.
You can also publish the views used by this package in case you need custom route names, different assets location, file browser customization etc.
```bash
php artisan vendor:publish --tag=ckfinder-views
```
Finally, you can publish package's configuration, assets and views using only one command.
```bash
php artisan vendor:publish --tag=ckfinder
```
4. 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).
```bash
mkdir -m 777 public/userfiles
```
**NOTE:** Since usually setting permissions to `0777` is insecure, it is advisable to change the group ownership of the directory to the same user as Apache and add group write permissions instead. Please contact your system administrator in case of any doubts.
5. CKFinder by default uses a CSRF protection mechanism based on [double submit cookies](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#double-submit-cookie). On some configurations it may be required to configure Laravel not to encrypt the cookie set by CKFinder. To do that:
**For Laravel <= 10:**
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 for CKFinder's path, as CKFinder uses its own CSRF protection mechanism. 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/*',
// ...
];
}
```
**For Laravel >= 11:**
Two calls must be added, which introduce exceptions in CSRF protection mechanism.
First one configure Laravel not to encrypt the cookie set by CKFinder:
```php
$middleware->encryptCookies(except: [
'ckCsrfToken',
]);
```
Second one disables Laravel's CSRF protection for CKFinder's path:
```php
$middleware->validateCsrfTokens(except: [
'ckfinder/*'
]);
```
File `bootstrap/app.php` should look like this:
```php
// bootstrap/app.php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
return Application::configure(basePath: dirname(__DIR__))
->withRouting(
web: __DIR__.'/../routes/web.php',
commands: __DIR__.'/../routes/console.php',
health: '/up',
)
->withMiddleware(function (Middleware $middleware): void {
$middleware->validateCsrfTokens(except: [
'ckfinder/*'
]);
$middleware->encryptCookies(except: [
'ckCsrfToken',
]);
})
->withExceptions(function (Exceptions $exceptions): void {
})->create();
```
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.
## Configuring Authentication
CKFinder connector authentication is handled by [middleware](https://laravel.com/docs/5.8/middleware) class or alias. To create the custom middleware class, use the artisan command:
```bash
php artisan make:middleware CustomCKFinderAuth
```
The new middleware class will appear in `app/Http/Middleware/CustomCKFinderAuth.php`. Change the `authentication` option in `config/ckfinder.php`:
```php
$config['authentication'] = '\App\Http\Middleware\CustomCKFinderAuth';
```
The `handle` method in `CustomCKFinderAuth` class allows to authenticate CKFinder users. A basic implementation that returns `true` from the `authentication` callable (which is obviously **not secure**) can look like below:
```php
public function handle($request, Closure $next)
{
config(['ckfinder.authentication' => function() {
return true;
}]);
return $next($request);
}
```
Please have a look at the [CKFinder for PHP connector documentation](https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_authentication) to find out
more about this option.
**Note**:
Alternatively, you can set the configuration option `$config['loadRoutes'] = false;` in `config/ckfinder.php`. Then you copy the routes from `vendor/ckfinder/ckfinder-laravel-package/src/routes.php` to your application routes such as ```routes/web.php``` to protect them with your Laravel auth middleware.
```php
Route::any('/ckfinder/connector', '\CKSource\CKFinderBridge\Controller\CKFinderController@requestAction')
->name('ckfinder_connector');
Route::any('/ckfinder/browser', '\CKSource\CKFinderBridge\Controller\CKFinderController@browserAction')
->name('ckfinder_browser');
```
## Configuration Options
The CKFinder connector configuration is taken from the `config/ckfinder.php` file.
To find out more about possible connector configuration options please refer to the [CKFinder for PHP connector documentation](https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html).
## Usage
The package code contains a couple of usage examples that you may find useful. To enable them, uncomment the `ckfinder_examples`
route in `vendor/ckfinder/ckfinder-laravel-package/src/routes.php`:
```php
// vendor/ckfinder/ckfinder-laravel-package/src/routes.php
Route::any('/ckfinder/examples/{example?}', 'CKSource\CKFinderBridge\Controller\CKFinderController@examplesAction')
->name('ckfinder_examples');
```
After that you can navigate to the `<APP BASE URL>/ckfinder/examples` path and have a look at the list of available examples.
To find out about the code behind them, check the `views/samples` directory in the package (`vendor/ckfinder/ckfinder-laravel-package/views/samples/`).
### Including the Main CKFinder JavaScript File in Templates
To be able to use CKFinder on a web page you have to include the main CKFinder JavaScript file.
The preferred way to do that is to include the CKFinder setup template, as shown below:
```blade
@include('ckfinder::setup')
```
The included template renders the required `script` tags and configures a valid connector path.
```html
<script type="text/javascript" src="/js/ckfinder/ckfinder.js"></script>
<script>CKFinder.config( { connectorPath: '/ckfinder/connector' } );</script>
```
---
## Useful Links
* [CKFinder 3 usage examples](https://ckeditor.com/docs/ckfinder/demo/ckfinder3/samples/widget.html)
* [CKFinder 3 for PHP connector documentation](https://ckeditor.com/docs/ckfinder/ckfinder3-php/)
* [CKFinder 3 Developer's Guide](https://ckeditor.com/docs/ckfinder/ckfinder3/)
* [CKFinder 3 issue tracker](https://github.com/ckfinder/ckfinder)
================================================
FILE: composer.json
================================================
{
"name": "ckfinder/ckfinder-laravel-package",
"description": "CKFinder 3 package for Laravel",
"type": "library",
"license": "MIT",
"require": {
"php": ">=8.1.0",
"laravel/framework": "^9.0|^10.0|^11.0|^12.0",
"pimple/pimple": "~3.0",
"league/flysystem": "^3.0",
"league/flysystem-aws-s3-v3": "^3.0",
"league/flysystem-azure-blob-storage": "^3.0",
"league/flysystem-ftp": "^3.0",
"spatie/flysystem-dropbox": "^2.0|^3.0",
"ext-json": "*",
"ext-gd": "*",
"ext-zip": "*"
},
"autoload": {
"psr-4": {
"CKSource\\CKFinderBridge\\": "src/",
"CKSource\\CKFinder\\": "_connector/"
}
},
"extra": {
"laravel": {
"providers": [
"CKSource\\CKFinderBridge\\CKFinderServiceProvider"
]
}
}
}
================================================
FILE: src/CKFinderMiddleware.php
================================================
<?php
namespace CKSource\CKFinderBridge;
use Closure;
class CKFinderMiddleware
{
public function handle($request, Closure $next)
{
config(['ckfinder.authentication' => function() use ($request) {
return false;
}] );
return $next($request);
}
}
================================================
FILE: src/CKFinderServiceProvider.php
================================================
<?php
namespace CKSource\CKFinderBridge;
use CKSource\CKFinderBridge\Command\CKFinderDownloadCommand;
use Illuminate\Support\ServiceProvider;
use Symfony\Component\HttpKernel\HttpKernel;
use Symfony\Component\HttpKernel\Kernel;
class CKFinderServiceProvider extends ServiceProvider
{
/**
* Bootstrap.
*/
public function boot()
{
if (config('ckfinder.loadRoutes')) {
$this->loadRoutesFrom(__DIR__.'/routes.php');
}
$this->loadViewsFrom(__DIR__.'/../views', 'ckfinder');
if ($this->app->runningInConsole()) {
$this->commands([CKFinderDownloadCommand::class]);
$this->publishes([
__DIR__.'/config.php' => config_path('ckfinder.php')
], ['ckfinder-config']);
$this->publishes([
__DIR__.'/../public' => public_path('js')
], ['ckfinder-assets']);
$this->publishes([
__DIR__.'/../views/setup.blade.php' => resource_path('views/vendor/ckfinder/setup.blade.php'),
__DIR__.'/../views/browser.blade.php' => resource_path('views/vendor/ckfinder/browser.blade.php')
], ['ckfinder-views']);
return;
}
$this->app->bind('ckfinder.connector', function() {
if (!class_exists('\CKSource\CKFinder\CKFinder')) {
throw new \Exception(
"Couldn't find CKFinder conector code. ".
"Please run `artisan ckfinder:download` command first."
);
}
$ckfinderConfig = config('ckfinder');
if (is_null($ckfinderConfig)) {
throw new \Exception(
"Couldn't load CKFinder configuration file. ".
"Please run `artisan vendor:publish --tag=ckfinder` command first."
);
}
$ckfinder = new \CKSource\CKFinder\CKFinder($ckfinderConfig);
return $ckfinder;
});
}
}
================================================
FILE: src/Command/CKFinderDownloadCommand.php
================================================
<?php
namespace CKSource\CKFinderBridge\Command;
use Illuminate\Console\Command;
use Illuminate\Filesystem\Filesystem;
use Symfony\Component\HttpKernel\Kernel;
class CKFinderDownloadCommand extends Command
{
const LATEST_VERSION = '3.7.1';
protected $name = 'ckfinder:download';
protected $description = 'Downloads the CKFinder distribution package and extracts assets.';
/**
* Creates URL to CKFinder distribution package.
*
* @return string
*/
protected function buildPackageUrl()
{
return "http://download.cksource.com/CKFinder/CKFinder%20for%20PHP/" . self::LATEST_VERSION . "/ckfinder_php_" . self::LATEST_VERSION . ".zip";
}
/**
* Handles command execution.
*/
public function handle()
{
$targetPublicPath = realpath(__DIR__ . '/../../public/');
if (!is_writable($targetPublicPath)) {
$this->error('The target public directory is not writable (used path: ' . $targetPublicPath . ').');
return;
}
$targetConnectorPath = realpath(__DIR__ . '/../../_connector');
if (!is_writable($targetConnectorPath)) {
$this->error('The the connector directory is not writable (used path: ' . $targetConnectorPath . ').');
return;
}
if (file_exists($targetPublicPath.'/ckfinder/ckfinder.js')) {
$questionText =
'It looks like the CKFinder distribution package has already been installed. ' .
"This command will overwrite the existing files.\nDo you want to proceed? [y/n]: ";
if (!$this->confirm($questionText)) {
return;
}
}
/** @var \Symfony\Component\Console\Helper\ProgressBar $progressBar */
$progressBar = null;
$maxBytes = 0;
$ctx = stream_context_create([], [
'notification' =>
function ($notificationCode, $severity, $message, $messageCode, $bytesTransferred, $bytesMax) use (&$maxBytes, &$progressBar) {
switch ($notificationCode) {
case STREAM_NOTIFY_FILE_SIZE_IS:
$maxBytes = $bytesMax;
$progressBar = $this->output->createProgressBar($bytesMax);
break;
case STREAM_NOTIFY_PROGRESS:
$progressBar->setProgress($bytesTransferred);
break;
}
}
]);
$this->info('Downloading the CKFinder 3 distribution package.');
$zipContents = @file_get_contents($this->buildPackageUrl(), false, $ctx);
if ($zipContents === false) {
$this->error('Could not download the distribution package of CKFinder.');
return;
}
if ($progressBar) {
$progressBar->finish();
}
$this->line("\n" . 'Extracting CKFinder to the ' . $targetPublicPath . ' directory.');
$tempZipFile = tempnam(sys_get_temp_dir(), 'tmp');
file_put_contents($tempZipFile, $zipContents);
$zip = new \ZipArchive();
$zip->open($tempZipFile);
$zipEntries = [];
// These files won't be overwritten if already exists
$filesToKeep = [
'ckfinder/config.js',
'ckfinder/ckfinder.html'
];
for ($i = 0; $i < $zip->numFiles; $i++) {
$entry = $zip->getNameIndex($i);
if (in_array($entry, $filesToKeep) && file_exists($targetPublicPath . '/' . $entry)) {
continue;
}
$zipEntries[] = $entry;
}
$zip->extractTo($targetPublicPath, $zipEntries);
$fs = new Filesystem();
$this->line('Moving the CKFinder connector to the ' . $targetConnectorPath . ' directory.');
$fs->moveDirectory(
$targetPublicPath . '/ckfinder/core/connector/php/vendor/cksource/ckfinder/src/CKSource/CKFinder',
$targetConnectorPath,
true
);
$this->line('Cleaning up.');
$fs->delete([
$tempZipFile,
$targetPublicPath . '/ckfinder/config.php',
$targetPublicPath . '/ckfinder/README.md',
$targetConnectorPath . '/README.md'
]);
$fs->deleteDirectory($targetPublicPath . '/ckfinder/core');
$fs->deleteDirectory($targetPublicPath . '/ckfinder/userfiles');
$this->info('Done. Happy coding!');
}
}
================================================
FILE: src/Controller/CKFinderController.php
================================================
<?php
namespace CKSource\CKFinderBridge\Controller;
use CKSource\CKFinder\CKFinder;
use \Illuminate\Routing\Controller;
use Psr\Container\ContainerInterface;
use Illuminate\Http\Request;
use Symfony\Component\HttpKernel\HttpKernelInterface;
/**
* Controller for handling requests to CKFinder connector.
*/
class CKFinderController extends Controller
{
/**
* Use custom middleware to handle custom authentication and redirects.
*/
public function __construct()
{
$authenticationMiddleware = config('ckfinder.authentication');
if(!is_callable($authenticationMiddleware)) {
if(isset($authenticationMiddleware) && is_string($authenticationMiddleware)) {
$this->middleware($authenticationMiddleware);
} else {
$this->middleware(\CKSource\CKFinderBridge\CKFinderMiddleware::class);
}
}
}
/**
* Action that handles all CKFinder requests.
*
* @param ContainerInterface $container
* @param Request $request
*
* @return \Symfony\Component\HttpFoundation\Response
*/
public function requestAction(ContainerInterface $container, Request $request)
{
/** @var CKFinder $connector */
$connector = $container->get('ckfinder.connector');
// If debug mode is enabled then do not catch exceptions and pass them directly to Laravel.
$enableDebugMode = config('ckfinder.debug');
return $connector->handle($request, HttpKernelInterface::MAIN_REQUEST, !$enableDebugMode);
}
/**
* Action that displays CKFinder browser.
*
* @return string
*/
public function browserAction(ContainerInterface $container, Request $request)
{
return view('ckfinder::browser');
}
/**
* Action for CKFinder usage examples.
*
* To browse examples, please uncomment ckfinder_examples route in
* vendor/ckfinder/ckfinder-laravel-package/src/routes.php
*
* @param string|null $example
*/
public function examplesAction($example = null)
{
$example = strtolower($example);
$knownExamples = [
'integration' => ['widget', 'popups', 'modals', 'full-page', 'full-page-open'],
'ckeditor' => ['ckeditor'],
'skins' => ['skins-moono', 'skins-jquery-mobile'],
'user-interface' => ['user-interface-default', 'user-interface-compact', 'user-interface-mobile', 'user-interface-listview'],
'localization' => ['localization'],
'other' => ['other-read-only', 'other-custom-configuration'],
'plugin-examples' => ['plugin-examples'],
];
$navInfo = ['section' => null, 'sample' => null];
foreach ($knownExamples as $section => $examples) {
if (in_array($example, $examples)) {
$navInfo['section'] = $section;
$navInfo['sample'] = $example;
return view('ckfinder::samples/'.$example, $navInfo);
}
}
return view('ckfinder::samples/index', $navInfo);
}
}
================================================
FILE: src/config.php
================================================
<?php
/*
* CKFinder Configuration File
*
* For the official documentation visit http://docs.cksource.com/ckfinder3-php/
*/
/*============================ PHP Error Reporting ====================================*/
// http://docs.cksource.com/ckfinder3-php/debugging.html
// Production
//error_reporting(E_ALL & ~E_DEPRECATED & ~E_STRICT);
//ini_set('display_errors', 0);
// Development
// error_reporting(E_ALL);
// ini_set('display_errors', 1);
/*============================ General Settings =======================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html
$config = array();
$config['loadRoutes'] = true;
$config['authentication'] = '\CKSource\CKFinderBridge\CKFinderMiddleware';
/*============================ License Key ============================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_licenseKey
$config['licenseName'] = '';
$config['licenseKey'] = '';
/*============================ CKFinder Internal Directory ============================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_privateDir
$config['privateDir'] = array(
'backend' => 'laravel_cache',
'tags' => 'ckfinder/tags',
'cache' => 'ckfinder/cache',
'thumbs' => 'ckfinder/cache/thumbs',
'logs' => array(
'backend' => 'laravel_logs',
'path' => 'ckfinder/logs'
)
);
/*============================ Images and Thumbnails ==================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_images
$config['images'] = array(
'maxWidth' => 1600,
'maxHeight' => 1200,
'quality' => 80,
'sizes' => array(
'small' => array('width' => 480, 'height' => 320, 'quality' => 80),
'medium' => array('width' => 600, 'height' => 480, 'quality' => 80),
'large' => array('width' => 800, 'height' => 600, 'quality' => 80)
)
);
/*=================================== Backends ========================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_backends
// The two backends defined below are internal CKFinder backends for cache and logs.
// Plase do not change these, unless you really want it.
$config['backends']['laravel_cache'] = array(
'name' => 'laravel_cache',
'adapter' => 'local',
'root' => storage_path('framework/cache')
);
$config['backends']['laravel_logs'] = array(
'name' => 'laravel_logs',
'adapter' => 'local',
'root' => storage_path('logs')
);
// Backends
$config['backends']['default'] = array(
'name' => 'default',
'adapter' => 'local',
'baseUrl' => config('app.url').'/userfiles/',
'root' => public_path('/userfiles/'),
'chmodFiles' => 0777,
'chmodFolders' => 0755,
'filesystemEncoding' => 'UTF-8'
);
/*================================ Resource Types =====================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_resourceTypes
$config['defaultResourceTypes'] = '';
$config['resourceTypes'][] = array(
'name' => 'Files', // Single quotes not allowed.
'directory' => 'files',
'maxSize' => 0,
'allowedExtensions' => '7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,webp,wma,wmv,xls,xlsx,zip',
'deniedExtensions' => '',
'backend' => 'default'
);
$config['resourceTypes'][] = array(
'name' => 'Images',
'directory' => 'images',
'maxSize' => 0,
'allowedExtensions' => 'bmp,gif,jpeg,jpg,png,webp',
'deniedExtensions' => '',
'backend' => 'default'
);
/*================================ Access Control =====================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_roleSessionVar
$config['roleSessionVar'] = 'CKFinder_UserRole';
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_accessControl
$config['accessControl'][] = array(
'role' => '*',
'resourceType' => '*',
'folder' => '/',
'FOLDER_VIEW' => true,
'FOLDER_CREATE' => true,
'FOLDER_RENAME' => true,
'FOLDER_DELETE' => true,
'FILE_VIEW' => true,
'FILE_UPLOAD' => true,
'FILE_RENAME' => true,
'FILE_DELETE' => true,
'IMAGE_RESIZE' => true,
'IMAGE_RESIZE_CUSTOM' => true
);
/*================================ Other Settings =====================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html
$config['overwriteOnUpload'] = false;
$config['checkDoubleExtension'] = true;
$config['disallowUnsafeCharacters'] = false;
$config['secureImageUploads'] = true;
$config['checkSizeAfterScaling'] = true;
$config['htmlExtensions'] = array('html', 'htm', 'xml', 'js');
$config['hideFolders'] = array('.*', 'CVS', '__thumbs');
$config['hideFiles'] = array('.*');
$config['forceAscii'] = false;
$config['xSendfile'] = false;
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_debug
$config['debug'] = false;
/*==================================== Plugins ========================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_plugins
$config['plugins'] = array();
/*================================ Cache settings =====================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_cache
$config['cache'] = array(
'imagePreview' => 24 * 3600,
'thumbnails' => 24 * 3600 * 365
);
/*============================ Temp Directory settings ================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_tempDirectory
$config['tempDirectory'] = sys_get_temp_dir();
/*============================ Session Cause Performance Issues =======================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_sessionWriteClose
$config['sessionWriteClose'] = true;
/*================================= CSRF protection ===================================*/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_csrfProtection
$config['csrfProtection'] = true;
/*============================== End of Configuration =================================*/
/**
* Config must be returned - do not change it.
*/
return $config;
================================================
FILE: src/routes.php
================================================
<?php
Route::any('/ckfinder/connector', '\CKSource\CKFinderBridge\Controller\CKFinderController@requestAction')
->name('ckfinder_connector');
Route::any('/ckfinder/browser', '\CKSource\CKFinderBridge\Controller\CKFinderController@browserAction')
->name('ckfinder_browser');
//Route::any('/ckfinder/examples/{example?}', '\CKSource\CKFinderBridge\Controller\CKFinderController@examplesAction')
// ->name('ckfinder_examples');
================================================
FILE: views/browser.blade.php
================================================
<!DOCTYPE html>
<!--
Copyright (c) 2007-2018, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>CKFinder 3 - File Browser</title>
</head>
<body>
@include('ckfinder::setup')
<script>
CKFinder.start();
</script>
</body>
</html>
================================================
FILE: views/samples/ckeditor.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>CKEditor Integration</h1>
<h2>CKEditor 5</h2>
<p>To integrate CKFinder with CKEditor 5
all you have to do is pass some additional configuration options to CKEditor:</p>
<pre class="prettyprint"><code>ClassicEditor
.create( document.querySelector( '#editor2' ), {
ckfinder: {
// Use named route for CKFinder connector entry point
uploadUrl: '@{{ route('ckfinder_connector') }}?command=QuickUpload&type=Files'
}
} )
.catch( error => {
console.error( error );
} );
</code></pre>
<p>The sample below presents the result of the integration. Try <strong>pasting images from clipboard</strong> directly into the editing area as well as <strong>dropping images</strong> — the files will be saved on the fly by CKFinder.</p>
<div id="editor2"></div>
<h2>CKEditor 4</h2>
<p>To <a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/guide/dev_ckeditor">integrate CKFinder with CKEditor</a>
all you have to do is pass some additional configuration options to CKEditor:</p>
<pre class="prettyprint"><code>CKEDITOR.replace( 'editor1', {
// Use named CKFinder browser route
filebrowserBrowseUrl: '@{{ route('ckfinder_browser') }}',
// Use named CKFinder connector route
filebrowserUploadUrl: '@{{ route('ckfinder_connector') }}?command=QuickUpload&type=Files'
} );</code></pre>
<p>It is also possible to use <code>CKFinder.setupCKEditor()</code> as shown below, to automatically setup integration between CKEditor and CKFinder:</p>
<pre class="prettyprint"><code>var editor = CKEDITOR.replace( 'ckfinder' );
CKFinder.setupCKEditor( editor );</code></pre>
<p>The sample below presents the result of the integration. You can manage and select files from your server when creating links or embedding images in CKEditor 4 content. In modern browsers you may also try <strong>pasting images from clipboard</strong> directly into the editing area as well as <strong>dropping images</strong> — the files will be saved on the fly by CKFinder.</p>
<div id="editor1"></div>
@stop
@section('scripts')
<style>
.ck-editor__editable {
min-height: 200px;
}
</style>
<script src="https://cdn.ckeditor.com/4.20.0/standard-all/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/35.3.0/classic/ckeditor.js"></script>
<script>
// Note: in this sample we use CKEditor with two extra plugins:
// - uploadimage to support pasting and dragging images,
// - image2 (instead of image) to provide images with captions.
// Additionally, the CSS style for the editing area has been slightly modified to provide responsive images during editing.
// All these modifications are not required by CKFinder, they just provide better user experience.
if ( typeof CKEDITOR !== 'undefined' ) {
CKEDITOR.disableAutoInline = true;
CKEDITOR.addCss( 'img {max-width:100%; height: auto;}' );
var editor = CKEDITOR.replace( 'editor1', {
extraPlugins: 'uploadimage,image2',
removePlugins: 'image',
height:250
} );
CKFinder.setupCKEditor( editor );
} else {
document.getElementById( 'editor1' ).innerHTML =
'<div class="tip-a tip-a-alert">This sample requires working Internet connection to load CKEditor 4 from CDN.</div>'
}
if ( typeof ClassicEditor !== 'undefined' ) {
ClassicEditor
.create( document.querySelector( '#editor2' ), {
ckfinder: {
// To avoid issues, set it to an absolute path that does not start with dots, e.g. '/ckfinder/core/php/(...)'
uploadUrl: '{{ route('ckfinder_connector') }}?command=QuickUpload&type=Files&responseType=json'
},
toolbar: [ 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo' ]
} )
.then( function( editor ) {
// console.log( editor );
} )
.catch( function( error ) {
console.error( error );
} );
} else {
document.getElementById( 'editor2' ).innerHTML =
'<div class="tip-a tip-a-alert">This sample requires working Internet connection to load CKEditor 5 from CDN.</div>'
}
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/full-page-open.blade.php
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>CKFinder 3 - Full Page Sample</title>
</head>
<body>
@include('ckfinder::setup')
<script>
var finder;
CKFinder.start( {
onInit: function( instance ) {
finder = instance;
}
} );
</script>
</body>
</html>
================================================
FILE: views/samples/full-page.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Full Page Mode</h1>
<p>The <strong>full page</strong> mode opens CKFinder using the entire page as the working area.</p>
<pre class="prettyprint"><code>CKFinder.start();</code></pre>
<p>Click the button below to open CKFinder in full page mode.</p>
<a href="{{ route('ckfinder_examples', ['example' => 'full-page-open']) }}" class="button-a button-a-background" target="_blank">Open CKFinder</a>
@stop
@section('scripts')
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/index.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>CKFinder Samples</h1>
<p>This page presents a few samples of CKFinder 3 features. Use the navigation menu on the left side to browse all samples.</p>
<p>For more detailed information about CKFinder and its features please refer to documentation pages:</p>
<ul>
<li><a href="https://docs.ckeditor.com/ckfinder/ckfinder3/">CKFinder 3 documentation</a></li>
<li><a href="https://docs.ckeditor.com/ckfinder/ckfinder3-php/">CKFinder 3 PHP connector documentation</a></li>
</ul>
<p>In case of any issues or suggestions please feel free to <a href="http://cksource.com/contact">contact us</a>.</p>
@stop
================================================
FILE: views/samples/layout.blade.php
================================================
<!DOCTYPE html>
<!--
Copyright (c) 2007-2018, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
-->
<html>
<head>
<meta charset="utf-8">
<title>CKFinder 3 Samples</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="{{ asset('js/ckfinder/samples/js/html5shiv.min.js') }}"></script>
<![endif]-->
<link href="{{ asset('js/ckfinder/samples/css/sample.css') }}" rel="stylesheet">
<body>
<header class="header-a">
<div class="grid-container">
<h1 class="header-a-logo grid-width-30">
<a href="{{ route('ckfinder_examples') }}"><img src="{{ asset('js/ckfinder/samples/img/logo.png') }}" alt="CKFinder Logo"></a>
</h1>
<nav class="navigation-b grid-width-70">
<ul>
<li><a href="https://docs.ckeditor.com/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
</ul>
</nav>
</div>
</header>
<main class="grid-container">
<nav class="tree-a tree-a-layout grid-width-30">
<h1>CKFinder Samples</h1>
<h2 @if($section === 'integration')class="tree-a-active"@endif>Website Integration</h2>
<ul>
<li @if($sample === 'widget')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'widget']) }}">Widget</a></li>
<li @if($sample === 'popups')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'popups']) }}">Popup</a></li>
<li @if($sample === 'modals')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'modals']) }}">Modal</a></li>
<li @if($sample === 'full-page')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'full-page']) }}">Full Page</a></li>
</ul>
<h2 class="tree-a-no-sub @if($section === 'ckeditor') tree-a-active @endif"><a href="{{ route('ckfinder_examples', ['example' => 'ckeditor']) }}">CKEditor Integration</a></h2>
<h2 @if($section === 'skins')class="tree-a-active"@endif>Skins</h2>
<ul>
<li @if($sample === 'skins-moono')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'skins-moono']) }}">Moono</a></li>
<li @if($sample === 'skins-jquery-mobile')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'skins-jquery-mobile']) }}">jQuery Mobile</a></li>
</ul>
<h2 @if($section === 'user-interface')class="tree-a-active"@endif>User Interface</h2>
<ul>
<li @if($sample === 'user-interface-default')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'user-interface-default']) }}">Default</a></li>
<li @if($sample === 'user-interface-compact')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'user-interface-compact']) }}">Compact</a></li>
<li @if($sample === 'user-interface-mobile')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'user-interface-mobile']) }}">Mobile</a></li>
<li @if($sample === 'user-interface-listview')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'user-interface-listview']) }}">List View</a></li>
</ul>
<h2 class="tree-a-no-sub @if($section === 'localization') tree-a-active @endif"><a href="{{ route('ckfinder_examples', ['example' => 'localization']) }}">Localization</a></h2>
<h2 @if($section === 'other')class="tree-a-active"@endif>Other</h2>
<ul>
<li @if($sample === 'other-read-only')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'other-read-only']) }}">Read-only Mode</a></li>
<li @if($sample === 'other-custom-configuration')class="tree-a-active"@endif><a href="{{ route('ckfinder_examples', ['example' => 'other-custom-configuration']) }}">Custom Configuration</a></li>
</ul>
<h2 class="tree-a-no-sub @if($section === 'plugin-examples') tree-a-active @endif"><a href="{{ route('ckfinder_examples', ['example' => 'plugin-examples']) }}">Plugin Examples</a></h2>
</nav>
<section class="content grid-width-70">
@yield('content')
</section>
</main>
<footer class="footer-a grid-container">
<div class="grid-container">
<p class="grid-width-100">
CKFinder 3 for PHP – <a href="https://ckeditor.com/ckeditor-4/ckfinder/">https://ckeditor.com/ckeditor-4/ckfinder/</a>
</p>
<p class="grid-width-100">
Copyright © 2003-2018, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
</p>
</div>
</footer>
<nav class="navigation-a">
<div class="grid-container">
<ul class="navigation-a-left grid-width-70">
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
</ul>
</div>
</nav>
<script src="{{ asset('js/ckfinder/samples/js/sf.js') }}"></script>
<script src="{{ asset('js/ckfinder/samples/js/tree-a.js') }}"></script>
@include('ckfinder::setup')
@yield('scripts')
</body>
</html>
================================================
FILE: views/samples/localization.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Localization</h1>
<p>CKFinder interface is automatically displayed in the user's language (as set in the browser or operating system settings).</p>
<p>The language of the CKFinder UI can also be set manually by using the <a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-language"><code>language</code></a> configuration option.</p>
<div class="tip-a" style="padding-top:0.5em;padding-bottom:0.5em">
<h4>Translations Needed!</h4>
<p>At the moment many localizations are incomplete. Please feel free to <a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/guide/dev_translations">provide translations for your native language</a>. Your help will be much appreciated!</p>
</div>
<p>In the example below CKFinder is started in Brazilian Portuguese.</p>
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
language: 'pt-br',
width: '100%',
height: 500
} );</code></pre>
<div id="ckfinder-widget"></div>
@stop
@section('scripts')
<script>
CKFinder.widget( 'ckfinder-widget', {
language: 'pt-br',
width: '100%',
height: 500
} );
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/modals.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Modal Mode</h1>
<p>The modal mode is similar to <a href="{{ route('ckfinder_examples', ['example' => 'popups']) }}">popup</a>. The difference is that popups are opened using a separate browser window while in modal mode CKFinder is opened inside a modal container that is appended to current page document.</p>
<div class="modal-example">
<button id="ckfinder-modal" class="button-a button-a-background" style="float: left">Open Modal</button>
<div id="output" style="float: left;font-size: 0.8em;line-height: 1.4em;margin: 3px 7px;">
<span id="file-name"></span>
<br>
<span id="file-url"></span>
</div>
</div>
<div style="clear: both"></div>
<h2>Multiple Modals</h2>
<p>In some cases you may need more than one modal to handle multiple places that require selecting a file.
Below you can find an example that fills each of the inputs with the URL of the selected file.</p>
<input id="ckfinder-input-1" type="text" style="width:60%">
<button id="ckfinder-modal-1" class="button-a button-a-background">Browse Server</button>
<div style="height: 5px"></div>
<input id="ckfinder-input-2" type="text" style="width:60%">
<button id="ckfinder-modal-2" class="button-a button-a-background">Browse Server</button>
<pre class="prettyprint"><code>var button1 = document.getElementById( 'ckfinder-popup-1' );
var button2 = document.getElementById( 'ckfinder-popup-2' );
button1.onclick = function() {
selectFileWithCKFinder( 'ckfinder-input-1' );
};
button2.onclick = function() {
selectFileWithCKFinder( 'ckfinder-input-2' );
};
function selectFileWithCKFinder( elementId ) {
CKFinder.modal( {
chooseFiles: true,
width: 800,
height: 600,
onInit: function( finder ) {
finder.on( 'files:choose', function( evt ) {
var file = evt.data.files.first();
var output = document.getElementById( elementId );
output.value = file.getUrl();
} );
finder.on( 'file:choose:resizedImage', function( evt ) {
var output = document.getElementById( elementId );
output.value = evt.data.resizedUrl;
} );
}
} );
}
</code></pre>
@stop
@section('scripts')
<script>
var button = document.getElementById( 'ckfinder-modal' );
button.onclick = function() {
CKFinder.modal( {
chooseFiles: true,
width: 800,
height: 600,
onInit: function( finder ) {
finder.on( 'files:choose', function( evt ) {
var file = evt.data.files.first();
var outputFileName = document.getElementById( 'file-name' );
var outputFileUrl = document.getElementById( 'file-url' );
outputFileName.innerText = 'Selected: ' + file.get( 'name' );
outputFileUrl.innerText = 'URL: ' + file.getUrl();
} );
finder.on( 'file:choose:resizedImage', function( evt ) {
var outputFileName = document.getElementById( 'file-name' );
var outputFileUrl = document.getElementById( 'file-url' );
outputFileName.innerText = 'Selected resized image: ' + evt.data.file.get( 'name' );
outputFileUrl.innerText = 'URL: ' + evt.data.resizedUrl;
} );
}
} );
};
var button1 = document.getElementById( 'ckfinder-modal-1' );
var button2 = document.getElementById( 'ckfinder-modal-2' );
button1.onclick = function() {
selectFileWithCKFinder( 'ckfinder-input-1' );
};
button2.onclick = function() {
selectFileWithCKFinder( 'ckfinder-input-2' );
};
function selectFileWithCKFinder( elementId ) {
CKFinder.modal( {
chooseFiles: true,
width: 800,
height: 600,
onInit: function( finder ) {
finder.on( 'files:choose', function( evt ) {
var file = evt.data.files.first();
var output = document.getElementById( elementId );
output.value = file.getUrl();
} );
finder.on( 'file:choose:resizedImage', function( evt ) {
var output = document.getElementById( elementId );
output.value = evt.data.resizedUrl;
} );
}
} );
}
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/other-custom-configuration.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Custom Configuration</h1>
<p>CKFinder provides many configuration options that can be changed to customize the application.
For details please check the <a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/api/CKFinder.Config">documentation</a>.</p>
<p>In the example below the following options are set:</p>
<ul>
<li><a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-id"><code>id</code></a> sets the instance ID to <code>custom-instance-id</code>,</li>
<li><a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-thumbnailDefaultSize"><code>thumbnailDefaultSize</code></a> sets the default thumbnail size to 400px after CKFinder is started,</li>
<li><a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-width"><code>width</code></a> sets the widget width to 100% to use all available space,</li>
<li><a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-height"><code>height</code></a> sets the widget height to 500 pixels.</li>
</ul>
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
id: 'custom-instance-id',
thumbnailDefaultSize: 400,
width: '100%',
height: 500
} );</code></pre>
<div id="ckfinder-widget"></div>
@stop
@section('scripts')
<script>
CKFinder.widget( 'ckfinder-widget', {
id: 'custom-instance-id',
thumbnailDefaultSize: 400,
width: '100%',
height: 500
} );
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/other-read-only.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Read-only Mode</h1>
<p>Read-only mode can be enabled in CKFinder with the <a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-readOnly"><code>readOnly</code></a>
configuration option. The user will be able to browse the files but will not be able to introduce any changes. Thanks to this setting you will be able to use
CKFinder as an online gallery.</p>
<p>Note: This will only disable certain UI elements. In order to successfully block file uploads and modifications, or to set read-only permissions for particular
folders, you will need to adjust <a href="https://docs.ckeditor.com/ckfinder/ckfinder3-php/configuration.html#configuration_options_accessControl">ACL settings</a>
accordingly in the server-side configuration file.</p>
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
readOnly: true,
width: '100%',
height: 500
} );</code></pre>
<div id="ckfinder-widget"></div>
<h2>Simple Gallery</h2>
<p>With a little bit of imagination it is possible to turn CKFinder into a very simple gallery. Here CKFinder is configured to
open a file on double click, run without a toolbar and without the folders panel.</p>
<div id="ckfinder-widget2"></div>
<p>The code behind this setup is quite simple:</p>
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget2', {
displayFoldersPanel: false,
height: 500,
id: 'gallery',
readOnly: true,
readOnlyExclude: 'Toolbars',
thumbnailDefaultSize: 143,
width: '100%'
} );
</code></pre>
@stop
@section('scripts')
<script>
CKFinder.widget( 'ckfinder-widget2', {
displayFoldersPanel: false,
height: 500,
// The main reason why ID is set here is "thumbnailDefaultSize" specified below.
// Without setting the ID, CKFinder would use remembered user setting from previously used instance.
id: 'gallery',
readOnly: true,
readOnlyExclude: 'Toolbars',
thumbnailDefaultSize: 143,
width: '100%'
} );
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/plugin-examples.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Plugin Examples</h1>
<p>The example below shows the <code>StatusBarInfo</code> plugin that displays basic information about the selected file in the application status bar.
You can find more plugin examples in the <a href="https://github.com/ckfinder/ckfinder-docs-samples">CKFinder sample plugins repository</a>.
Please have a look at <a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/guide/dev_plugins">plugin documentation</a>, too.</p>
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
width: '100%',
height: 500,
plugins: [
// The path must be relative to the location of the ckfinder.js file.
'../samples/plugins/StatusBarInfo/StatusBarInfo'
]
} );</code></pre>
<div id="ckfinder-widget"></div>
@stop
@section('scripts')
<script>
CKFinder.widget( 'ckfinder-widget', {
width: '100%',
height: 500,
plugins: [
// Path must be relative to the location of ckfinder.js file
'samples/plugins/StatusBarInfo/StatusBarInfo'
]
} );
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/popups.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Popup Mode</h1>
<p>The <a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/guide/dev_installation-section-using-ckfinder-in-a-popup-window">popup mode</a> is most suitable for selecting files that are stored on a server.<br />
Click the button below to open the popup and choose any file. After that you will see basic information
about the file that was selected, including the URL.</p>
<div class="popup-example">
<button id="ckfinder-popup" class="button-a button-a-background" style="float: left">Open Popup</button>
<div id="output" style="float: left;font-size: 0.8em;line-height: 1.4em;margin: 3px 7px;">
<span id="file-name"></span>
<br>
<span id="file-url"></span>
</div>
</div>
<div style="clear: both"></div>
<p>Additionally, CKFinder supports a special file selection mode for images called <strong>Choose Resized</strong>. This feature
allows you to resize the selected image to any size that is suitable for you. The CKFinder connector will automatically create
a resized version of the image and return its URL.</p>
<h2>Multiple Popups</h2>
<p>In some cases you may need more than one popup to handle multiple places that require selecting a file.
Below you can find an example that fills each of the inputs with the URL of the selected file.</p>
<input id="ckfinder-input-1" type="text" style="width:60%">
<button id="ckfinder-popup-1" class="button-a button-a-background">Browse Server</button>
<div style="height: 5px"></div>
<input id="ckfinder-input-2" type="text" style="width:60%">
<button id="ckfinder-popup-2" class="button-a button-a-background">Browse Server</button>
<pre class="prettyprint"><code>var button1 = document.getElementById( 'ckfinder-popup-1' );
var button2 = document.getElementById( 'ckfinder-popup-2' );
button1.onclick = function() {
selectFileWithCKFinder( 'ckfinder-input-1' );
};
button2.onclick = function() {
selectFileWithCKFinder( 'ckfinder-input-2' );
};
function selectFileWithCKFinder( elementId ) {
CKFinder.popup( {
chooseFiles: true,
width: 800,
height: 600,
onInit: function( finder ) {
finder.on( 'files:choose', function( evt ) {
var file = evt.data.files.first();
var output = document.getElementById( elementId );
output.value = file.getUrl();
} );
finder.on( 'file:choose:resizedImage', function( evt ) {
var output = document.getElementById( elementId );
output.value = evt.data.resizedUrl;
} );
}
} );
}
</code></pre>
@stop
@section('scripts')
<script>
var button = document.getElementById( 'ckfinder-popup' );
button.onclick = function() {
CKFinder.popup( {
chooseFiles: true,
width: 800,
height: 600,
onInit: function( finder ) {
finder.on( 'files:choose', function( evt ) {
var file = evt.data.files.first();
var outputFileName = document.getElementById( 'file-name' );
var outputFileUrl = document.getElementById( 'file-url' );
outputFileName.innerText = 'Selected: ' + file.get( 'name' );
outputFileUrl.innerText = 'URL: ' + file.getUrl();
} );
finder.on( 'file:choose:resizedImage', function( evt ) {
var outputFileName = document.getElementById( 'file-name' );
var outputFileUrl = document.getElementById( 'file-url' );
outputFileName.innerText = 'Selected resized image: ' + evt.data.file.get( 'name' );
outputFileUrl.innerText = 'URL: ' + evt.data.resizedUrl;
} );
}
} );
};
var button1 = document.getElementById( 'ckfinder-popup-1' );
var button2 = document.getElementById( 'ckfinder-popup-2' );
button1.onclick = function() {
selectFileWithCKFinder( 'ckfinder-input-1' );
};
button2.onclick = function() {
selectFileWithCKFinder( 'ckfinder-input-2' );
};
function selectFileWithCKFinder( elementId ) {
CKFinder.popup( {
chooseFiles: true,
width: 800,
height: 600,
onInit: function( finder ) {
finder.on( 'files:choose', function( evt ) {
var file = evt.data.files.first();
var output = document.getElementById( elementId );
output.value = file.getUrl();
} );
finder.on( 'file:choose:resizedImage', function( evt ) {
var output = document.getElementById( elementId );
output.value = evt.data.resizedUrl;
} );
}
} );
}
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/skins-jquery-mobile.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>jQuery Mobile Skin</h1>
<p>CKFinder UI is based on <a href="http://jquerymobile.com/">jQuery Mobile</a> so its look & feel can be changed using the <a href="http://themeroller.jquerymobile.com/">jQuery Mobile Theme Roller</a>.
For more information about custom skins and Theme Roller please refer to <a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/guide/dev_themeroller">CKFinder documentation</a>.</p>
<h3>jQuery Mobile Swatch "a" Skin </h3>
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
width: '100%',
height: 600,
skin: 'jquery-mobile',
swatch: 'a'
} );</code></pre>
<div id="ckfinder-widget-a"></div>
<h3>jQuery Mobile Swatch "b" Skin </h3>
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
width: '100%',
height: 600,
skin: 'jquery-mobile',
swatch: 'b'
} );</code></pre>
<div id="ckfinder-widget-b"></div>
@stop
@section('scripts')
<script>
CKFinder.widget( 'ckfinder-widget-a', {
width: '100%',
height: 600,
skin: 'jquery-mobile',
swatch: 'a'
} );
CKFinder.widget( 'ckfinder-widget-b', {
width: '100%',
height: 600,
skin: 'jquery-mobile',
swatch: 'b'
} );
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/skins-moono.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Moono Skin</h1>
<p>Moono is a default skin used in CKFinder that provides visual integration with CKEditor.</p>
<div id="ckfinder-widget"></div>
@stop
@section('scripts')
<script>
CKFinder.widget( 'ckfinder-widget', {
width: '100%',
height: 700
} );
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/user-interface-compact.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Compact User Interface</h1>
<p>It is possible to disable the folders panel and have folders displayed as icons in the main area of the application.
In the example below this mode is initialized inside a widget, but it also works in all standalone modes.</p>
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
displayFoldersPanel: false,
width: '100%',
height: 700
} );</code></pre>
<div id="ckfinder-widget"></div>
@stop
@section('scripts')
<script>
CKFinder.widget( 'ckfinder-widget', {
displayFoldersPanel: false,
width: '100%',
height: 700
} );
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/user-interface-default.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Default User Interface</h1>
<p>By default folders are displayed in CKFinder in a folder tree panel, like in the example below.</p>
<div id="ckfinder-widget"></div>
@stop
@section('scripts')
<script>
CKFinder.widget( 'ckfinder-widget', {
width: '100%',
height: 700
} );
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/user-interface-listview.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>List View</h1>
<p>By default files are displayed in CKFinder as thumbnails. With list view enabled all files will be displayed as a list, one bellow the other. No image previews are available in this mode.</p>
<p>The list view can be enabled regardless of the selected user interface (Default/Compact/Mobile).</p>
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
defaultViewType: 'list',
width: '100%',
height: 700
} );</code></pre>
<div id="ckfinder-widget"></div>
@stop
@section('scripts')
<script>
CKFinder.widget( 'ckfinder-widget', {
defaultViewType: 'list',
width: '100%',
height: 700,
// Specifying ID is not needed when setting defaultViewType.
// It is set here just to make sure this CKFinder instance will not share user settings with other instances.
id: 'custom-listview'
} );
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/user-interface-mobile.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Mobile User Interface</h1>
<p>Mobile user interface is enabled automatically when the width of the working area of the application gets below the value
defined in the <a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-uiModeThreshold"><code>uiModeThreshold</code></a>
configuration option.</p>
<p>Note: This mode works best on mobile devices, as touch and swipe events are not enabled for desktop browsers.</p>
<div id="ckfinder-widget" style="width: 500px; margin: 30px auto 0;"></div>
@stop
@section('scripts')
<script>
CKFinder.widget( 'ckfinder-widget', {
displayFoldersPanel: false,
width: 500,
height: 700
} );
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
@stop
================================================
FILE: views/samples/widget.blade.php
================================================
@extends('ckfinder::samples/layout')
@section('content')
<h1>Widget Mode</h1>
<p>Using the <a href="https://docs.ckeditor.com/ckfinder/ckfinder3/#!/guide/dev_installation-section-embedding-as-widget">widget mode</a> you can embed CKFinder directly on a page, as shown below.</p>
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
width: '100%',
height: 700
} );</code></pre>
<div id="ckfinder-widget"></div>
@stop
@section('scripts')
<script>
CKFinder.widget( 'ckfinder-widget', {
width: '100%',
height: 700
} );
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
@stop
================================================
FILE: views/setup.blade.php
================================================
<script type="text/javascript" src="{{ asset('js/ckfinder/ckfinder.js') }}"></script>
<script>CKFinder.config( { connectorPath: @json(route('ckfinder_connector')) } );</script>
gitextract_j_y8v1bc/
├── .gitignore
├── LICENSE.md
├── README.md
├── composer.json
├── src/
│ ├── CKFinderMiddleware.php
│ ├── CKFinderServiceProvider.php
│ ├── Command/
│ │ └── CKFinderDownloadCommand.php
│ ├── Controller/
│ │ └── CKFinderController.php
│ ├── config.php
│ └── routes.php
└── views/
├── browser.blade.php
├── samples/
│ ├── ckeditor.blade.php
│ ├── full-page-open.blade.php
│ ├── full-page.blade.php
│ ├── index.blade.php
│ ├── layout.blade.php
│ ├── localization.blade.php
│ ├── modals.blade.php
│ ├── other-custom-configuration.blade.php
│ ├── other-read-only.blade.php
│ ├── plugin-examples.blade.php
│ ├── popups.blade.php
│ ├── skins-jquery-mobile.blade.php
│ ├── skins-moono.blade.php
│ ├── user-interface-compact.blade.php
│ ├── user-interface-default.blade.php
│ ├── user-interface-listview.blade.php
│ ├── user-interface-mobile.blade.php
│ └── widget.blade.php
└── setup.blade.php
SYMBOL INDEX (12 symbols across 4 files)
FILE: src/CKFinderMiddleware.php
class CKFinderMiddleware (line 7) | class CKFinderMiddleware
method handle (line 9) | public function handle($request, Closure $next)
FILE: src/CKFinderServiceProvider.php
class CKFinderServiceProvider (line 10) | class CKFinderServiceProvider extends ServiceProvider
method boot (line 15) | public function boot()
FILE: src/Command/CKFinderDownloadCommand.php
class CKFinderDownloadCommand (line 9) | class CKFinderDownloadCommand extends Command
method buildPackageUrl (line 22) | protected function buildPackageUrl()
method handle (line 30) | public function handle()
FILE: src/Controller/CKFinderController.php
class CKFinderController (line 14) | class CKFinderController extends Controller
method __construct (line 19) | public function __construct()
method requestAction (line 40) | public function requestAction(ContainerInterface $container, Request $...
method browserAction (line 56) | public function browserAction(ContainerInterface $container, Request $...
method examplesAction (line 69) | public function examplesAction($example = null)
Condensed preview — 30 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (69K chars).
[
{
"path": ".gitignore",
"chars": 42,
"preview": "vendor/\n_connector/\npublic/\ncomposer.lock\n"
},
{
"path": "LICENSE.md",
"chars": 1958,
"preview": "Software License Agreement\n==========================\n\nCopyright (c) 2023, CKSource Holding sp. z o.o. All rights reserv"
},
{
"path": "README.md",
"chars": 10147,
"preview": "<h3 align=\"center\"><img src=\"https://user-images.githubusercontent.com/803299/42567830-6b6d3ad6-850b-11e8-9151-43021c92d"
},
{
"path": "composer.json",
"chars": 901,
"preview": "{\n \"name\": \"ckfinder/ckfinder-laravel-package\",\n \"description\": \"CKFinder 3 package for Laravel\",\n \"type\": \"lib"
},
{
"path": "src/CKFinderMiddleware.php",
"chars": 297,
"preview": "<?php\n\nnamespace CKSource\\CKFinderBridge;\n\nuse Closure;\n\nclass CKFinderMiddleware\n{\n public function handle($request,"
},
{
"path": "src/CKFinderServiceProvider.php",
"chars": 2011,
"preview": "<?php\n\nnamespace CKSource\\CKFinderBridge;\n\nuse CKSource\\CKFinderBridge\\Command\\CKFinderDownloadCommand;\nuse Illuminate\\S"
},
{
"path": "src/Command/CKFinderDownloadCommand.php",
"chars": 4542,
"preview": "<?php\n\nnamespace CKSource\\CKFinderBridge\\Command;\n\nuse Illuminate\\Console\\Command;\nuse Illuminate\\Filesystem\\Filesystem;"
},
{
"path": "src/Controller/CKFinderController.php",
"chars": 3149,
"preview": "<?php\n\nnamespace CKSource\\CKFinderBridge\\Controller;\n\nuse CKSource\\CKFinder\\CKFinder;\nuse \\Illuminate\\Routing\\Controller"
},
{
"path": "src/config.php",
"chars": 6820,
"preview": "<?php\n\n/*\n * CKFinder Configuration File\n *\n * For the official documentation visit http://docs.cksource.com/ckfinder3-p"
},
{
"path": "src/routes.php",
"chars": 439,
"preview": "<?php\n\nRoute::any('/ckfinder/connector', '\\CKSource\\CKFinderBridge\\Controller\\CKFinderController@requestAction')\n ->n"
},
{
"path": "views/browser.blade.php",
"chars": 456,
"preview": "<!DOCTYPE html>\n<!--\nCopyright (c) 2007-2018, CKSource - Frederico Knabben. All rights reserved.\nFor licensing, see LICE"
},
{
"path": "views/samples/ckeditor.blade.php",
"chars": 4302,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n <h1>CKEditor Integration</h1>\n\n <h2>CKEditor 5</h2>\n "
},
{
"path": "views/samples/full-page-open.blade.php",
"chars": 373,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width,initial-s"
},
{
"path": "views/samples/full-page.blade.php",
"chars": 617,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n\t<h1>Full Page Mode</h1>\n\n\t<p>The <strong>full page</strong> m"
},
{
"path": "views/samples/index.blade.php",
"chars": 699,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n <h1>CKFinder Samples</h1>\n <p>This page presents a few "
},
{
"path": "views/samples/layout.blade.php",
"chars": 5678,
"preview": "<!DOCTYPE html>\n<!--\nCopyright (c) 2007-2018, CKSource - Frederico Knabben. All rights reserved.\nFor licensing, see LICE"
},
{
"path": "views/samples/localization.blade.php",
"chars": 1305,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n\t<h1>Localization</h1>\n\n\t<p>CKFinder interface is automaticall"
},
{
"path": "views/samples/modals.blade.php",
"chars": 4165,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n <h1>Modal Mode</h1>\n\n <p>The modal mode is similar to <"
},
{
"path": "views/samples/other-custom-configuration.blade.php",
"chars": 1643,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n\t<h1>Custom Configuration</h1>\n\t<p>CKFinder provides many conf"
},
{
"path": "views/samples/other-read-only.blade.php",
"chars": 2147,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n\t<h1>Read-only Mode</h1>\n\t<p>Read-only mode can be enabled in "
},
{
"path": "views/samples/plugin-examples.blade.php",
"chars": 1191,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n\t<h1>Plugin Examples</h1>\n\t<p>The example below shows the <cod"
},
{
"path": "views/samples/popups.blade.php",
"chars": 4941,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n <h1>Popup Mode</h1>\n\n <p>The <a href=\"https://docs.cked"
},
{
"path": "views/samples/skins-jquery-mobile.blade.php",
"chars": 1368,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n\t<h1>jQuery Mobile Skin</h1>\n\n\t<p>CKFinder UI is based on <a h"
},
{
"path": "views/samples/skins-moono.blade.php",
"chars": 462,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n\t<h1>Moono Skin</h1>\n\n\t<p>Moono is a default skin used in CKFi"
},
{
"path": "views/samples/user-interface-compact.blade.php",
"chars": 787,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n\t<h1>Compact User Interface</h1>\n\t<p>It is possible to disable"
},
{
"path": "views/samples/user-interface-default.blade.php",
"chars": 480,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n\t<h1>Default User Interface</h1>\n\t<p>By default folders are di"
},
{
"path": "views/samples/user-interface-listview.blade.php",
"chars": 1039,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n\t<h1>List View</h1>\n\t<p>By default files are displayed in CKFi"
},
{
"path": "views/samples/user-interface-mobile.blade.php",
"chars": 866,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n\t<h1>Mobile User Interface</h1>\n\t<p>Mobile user interface is e"
},
{
"path": "views/samples/widget.blade.php",
"chars": 685,
"preview": "@extends('ckfinder::samples/layout')\n\n@section('content')\n <h1>Widget Mode</h1>\n\n <p>Using the <a href=\"https://do"
},
{
"path": "views/setup.blade.php",
"chars": 177,
"preview": "<script type=\"text/javascript\" src=\"{{ asset('js/ckfinder/ckfinder.js') }}\"></script>\n<script>CKFinder.config( { connect"
}
]
About this extraction
This page contains the full source code of the ckfinder/ckfinder-laravel-package GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 30 files (62.2 KB), approximately 16.8k tokens, and a symbol index with 12 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.