├── .gitignore ├── LICENSE.md ├── README.md ├── _connector └── README.md ├── composer.json ├── public └── ckfinder │ └── README.md ├── 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 /.gitignore: -------------------------------------------------------------------------------- 1 | vendor/ 2 | _connector/ 3 | public/ 4 | composer.lock 5 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Software License Agreement 2 | ========================== 3 | 4 | Copyright (c) 2023, CKSource Holding sp. z o.o. All rights reserved. 5 | 6 | CKFinder package for Laravel is licensed under the terms of the MIT license (see Appendix A). 7 | 8 | Trademarks 9 | ---------- 10 | 11 | CKFinder is a trademark of CKSource Holding sp. z o.o. All other brand 12 | and product names are trademarks, registered trademarks or service 13 | marks of their respective holders. 14 | 15 | Sources of Intellectual Property required by package 16 | ---------------------------------------------------- 17 | 18 | The installation instruction requires user to run the following command to download 19 | CKFinder separately (the file manager itself): 20 | 21 | ```bash 22 | artisan ckfinder:download 23 | ``` 24 | 25 | The downloaded CKFinder distribution is licensed under a separate CKFinder License. 26 | 27 | --- 28 | 29 | Appendix A: The MIT License 30 | --------------------------- 31 | 32 | The MIT License (MIT) 33 | 34 | Copyright (c) 2023, CKSource Holding sp. z o.o. All rights reserved. 35 | 36 | Permission is hereby granted, free of charge, to any person obtaining a copy 37 | of this software and associated documentation files (the "Software"), to deal 38 | in the Software without restriction, including without limitation the rights 39 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 40 | copies of the Software, and to permit persons to whom the Software is 41 | furnished to do so, subject to the following conditions: 42 | 43 | The above copyright notice and this permission notice shall be included in 44 | all copies or substantial portions of the Software. 45 | 46 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 47 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 48 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 49 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 50 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 51 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 52 | THE SOFTWARE. 53 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
To integrate CKFinder with CKEditor 5 8 | all you have to do is pass some additional configuration options to CKEditor:
9 |ClassicEditor
10 | .create( document.querySelector( '#editor2' ), {
11 | ckfinder: {
12 | // Use named route for CKFinder connector entry point
13 | uploadUrl: '@{{ route('ckfinder_connector') }}?command=QuickUpload&type=Files'
14 | }
15 | } )
16 | .catch( error => {
17 | console.error( error );
18 | } );
19 |
20 | The sample below presents the result of the integration. Try pasting images from clipboard directly into the editing area as well as dropping images — the files will be saved on the fly by CKFinder.
21 | 22 | 23 |To integrate CKFinder with CKEditor 25 | all you have to do is pass some additional configuration options to CKEditor:
26 |CKEDITOR.replace( 'editor1', {
27 | // Use named CKFinder browser route
28 | filebrowserBrowseUrl: '@{{ route('ckfinder_browser') }}',
29 | // Use named CKFinder connector route
30 | filebrowserUploadUrl: '@{{ route('ckfinder_connector') }}?command=QuickUpload&type=Files'
31 | } );
32 | It is also possible to use CKFinder.setupCKEditor()
as shown below, to automatically setup integration between CKEditor and CKFinder:
var editor = CKEDITOR.replace( 'ckfinder' );
34 | CKFinder.setupCKEditor( editor );
35 | 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 pasting images from clipboard directly into the editing area as well as dropping images — the files will be saved on the fly by CKFinder.
36 | 37 | @stop 38 | 39 | @section('scripts') 40 | 45 | 46 | 47 | 88 | 89 | @stop 90 | -------------------------------------------------------------------------------- /views/samples/full-page-open.blade.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |The full page mode opens CKFinder using the entire page as the working area.
7 |CKFinder.start();
8 | Click the button below to open CKFinder in full page mode.
9 | 10 | Open CKFinder 11 | @stop 12 | 13 | @section('scripts') 14 | 15 | @stop 16 | -------------------------------------------------------------------------------- /views/samples/index.blade.php: -------------------------------------------------------------------------------- 1 | @extends('ckfinder::samples/layout') 2 | 3 | @section('content') 4 |This page presents a few samples of CKFinder 3 features. Use the navigation menu on the left side to browse all samples.
6 |For more detailed information about CKFinder and its features please refer to documentation pages:
7 | 11 |In case of any issues or suggestions please feel free to contact us.
12 | @stop 13 | -------------------------------------------------------------------------------- /views/samples/layout.blade.php: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 |CKFinder interface is automatically displayed in the user's language (as set in the browser or operating system settings).
7 |The language of the CKFinder UI can also be set manually by using the language
configuration option.
At the moment many localizations are incomplete. Please feel free to provide translations for your native language. Your help will be much appreciated!
12 |In the example below CKFinder is started in Brazilian Portuguese.
15 | 16 |CKFinder.widget( 'ckfinder-widget', {
17 | language: 'pt-br',
18 | width: '100%',
19 | height: 500
20 | } );
21 |
22 |
23 | @stop
24 |
25 | @section('scripts')
26 |
33 |
34 | @stop
35 |
--------------------------------------------------------------------------------
/views/samples/modals.blade.php:
--------------------------------------------------------------------------------
1 | @extends('ckfinder::samples/layout')
2 |
3 | @section('content')
4 | The modal mode is similar to popup. 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.
7 | 8 |In some cases you may need more than one modal to handle multiple places that require selecting a file. 21 | Below you can find an example that fills each of the inputs with the URL of the selected file.
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |var button1 = document.getElementById( 'ckfinder-popup-1' );
32 | var button2 = document.getElementById( 'ckfinder-popup-2' );
33 |
34 | button1.onclick = function() {
35 | selectFileWithCKFinder( 'ckfinder-input-1' );
36 | };
37 | button2.onclick = function() {
38 | selectFileWithCKFinder( 'ckfinder-input-2' );
39 | };
40 |
41 | function selectFileWithCKFinder( elementId ) {
42 | CKFinder.modal( {
43 | chooseFiles: true,
44 | width: 800,
45 | height: 600,
46 | onInit: function( finder ) {
47 | finder.on( 'files:choose', function( evt ) {
48 | var file = evt.data.files.first();
49 | var output = document.getElementById( elementId );
50 | output.value = file.getUrl();
51 | } );
52 |
53 | finder.on( 'file:choose:resizedImage', function( evt ) {
54 | var output = document.getElementById( elementId );
55 | output.value = evt.data.resizedUrl;
56 | } );
57 | }
58 | } );
59 | }
60 |
61 | @stop
62 |
63 | @section('scripts')
64 |
121 |
122 | @stop
123 |
--------------------------------------------------------------------------------
/views/samples/other-custom-configuration.blade.php:
--------------------------------------------------------------------------------
1 | @extends('ckfinder::samples/layout')
2 |
3 | @section('content')
4 | CKFinder provides many configuration options that can be changed to customize the application. 6 | For details please check the documentation.
7 |In the example below the following options are set:
8 |id
sets the instance ID to custom-instance-id
,thumbnailDefaultSize
sets the default thumbnail size to 400px after CKFinder is started,width
sets the widget width to 100% to use all available space,height
sets the widget height to 500 pixels.CKFinder.widget( 'ckfinder-widget', {
15 | id: 'custom-instance-id',
16 | thumbnailDefaultSize: 400,
17 | width: '100%',
18 | height: 500
19 | } );
20 |
21 | @stop
22 |
23 | @section('scripts')
24 |
32 |
33 | @stop
34 |
--------------------------------------------------------------------------------
/views/samples/other-read-only.blade.php:
--------------------------------------------------------------------------------
1 | @extends('ckfinder::samples/layout')
2 |
3 | @section('content')
4 | Read-only mode can be enabled in CKFinder with the readOnly
6 | 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
7 | CKFinder as an online gallery.
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 9 | folders, you will need to adjust ACL settings 10 | accordingly in the server-side configuration file.
11 | 12 |CKFinder.widget( 'ckfinder-widget', {
13 | readOnly: true,
14 | width: '100%',
15 | height: 500
16 | } );
17 |
18 |
19 | With a little bit of imagination it is possible to turn CKFinder into a very simple gallery. Here CKFinder is configured to 21 | open a file on double click, run without a toolbar and without the folders panel.
22 | 23 |The code behind this setup is quite simple:
24 |CKFinder.widget( 'ckfinder-widget2', {
25 | displayFoldersPanel: false,
26 | height: 500,
27 | id: 'gallery',
28 | readOnly: true,
29 | readOnlyExclude: 'Toolbars',
30 | thumbnailDefaultSize: 143,
31 | width: '100%'
32 | } );
33 |
34 | @stop
35 |
36 | @section('scripts')
37 |
50 |
51 | @stop
52 |
--------------------------------------------------------------------------------
/views/samples/plugin-examples.blade.php:
--------------------------------------------------------------------------------
1 | @extends('ckfinder::samples/layout')
2 |
3 | @section('content')
4 | The example below shows the StatusBarInfo
plugin that displays basic information about the selected file in the application status bar.
6 | You can find more plugin examples in the CKFinder sample plugins repository.
7 | Please have a look at plugin documentation, too.
CKFinder.widget( 'ckfinder-widget', {
9 | width: '100%',
10 | height: 500,
11 | plugins: [
12 | // The path must be relative to the location of the ckfinder.js file.
13 | '../samples/plugins/StatusBarInfo/StatusBarInfo'
14 | ]
15 | } );
16 |
17 | @stop
18 |
19 | @section('scripts')
20 |
30 |
31 | @stop
32 |
--------------------------------------------------------------------------------
/views/samples/popups.blade.php:
--------------------------------------------------------------------------------
1 | @extends('ckfinder::samples/layout')
2 |
3 | @section('content')
4 | The popup mode is most suitable for selecting files that are stored on a server.
7 | Click the button below to open the popup and choose any file. After that you will see basic information
8 | about the file that was selected, including the URL.
Additionally, CKFinder supports a special file selection mode for images called Choose Resized. This feature 21 | allows you to resize the selected image to any size that is suitable for you. The CKFinder connector will automatically create 22 | a resized version of the image and return its URL.
23 | 24 |In some cases you may need more than one popup to handle multiple places that require selecting a file. 26 | Below you can find an example that fills each of the inputs with the URL of the selected file.
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |var button1 = document.getElementById( 'ckfinder-popup-1' );
37 | var button2 = document.getElementById( 'ckfinder-popup-2' );
38 |
39 | button1.onclick = function() {
40 | selectFileWithCKFinder( 'ckfinder-input-1' );
41 | };
42 | button2.onclick = function() {
43 | selectFileWithCKFinder( 'ckfinder-input-2' );
44 | };
45 |
46 | function selectFileWithCKFinder( elementId ) {
47 | CKFinder.popup( {
48 | chooseFiles: true,
49 | width: 800,
50 | height: 600,
51 | onInit: function( finder ) {
52 | finder.on( 'files:choose', function( evt ) {
53 | var file = evt.data.files.first();
54 | var output = document.getElementById( elementId );
55 | output.value = file.getUrl();
56 | } );
57 |
58 | finder.on( 'file:choose:resizedImage', function( evt ) {
59 | var output = document.getElementById( elementId );
60 | output.value = evt.data.resizedUrl;
61 | } );
62 | }
63 | } );
64 | }
65 |
66 | @stop
67 |
68 | @section('scripts')
69 |
126 |
127 | @stop
128 |
--------------------------------------------------------------------------------
/views/samples/skins-jquery-mobile.blade.php:
--------------------------------------------------------------------------------
1 | @extends('ckfinder::samples/layout')
2 |
3 | @section('content')
4 | CKFinder UI is based on jQuery Mobile so its look & feel can be changed using the jQuery Mobile Theme Roller. 7 | For more information about custom skins and Theme Roller please refer to CKFinder documentation.
8 | 9 |CKFinder.widget( 'ckfinder-widget', {
11 | width: '100%',
12 | height: 600,
13 | skin: 'jquery-mobile',
14 | swatch: 'a'
15 | } );
16 |
17 |
18 | CKFinder.widget( 'ckfinder-widget', {
20 | width: '100%',
21 | height: 600,
22 | skin: 'jquery-mobile',
23 | swatch: 'b'
24 | } );
25 |
26 | @stop
27 |
28 | @section('scripts')
29 |
44 |
45 | @stop
46 |
--------------------------------------------------------------------------------
/views/samples/skins-moono.blade.php:
--------------------------------------------------------------------------------
1 | @extends('ckfinder::samples/layout')
2 |
3 | @section('content')
4 | Moono is a default skin used in CKFinder that provides visual integration with CKEditor.
7 | 8 | 9 | @stop 10 | 11 | @section('scripts') 12 | 18 | 19 | @stop 20 | -------------------------------------------------------------------------------- /views/samples/user-interface-compact.blade.php: -------------------------------------------------------------------------------- 1 | @extends('ckfinder::samples/layout') 2 | 3 | @section('content') 4 |It is possible to disable the folders panel and have folders displayed as icons in the main area of the application. 6 | In the example below this mode is initialized inside a widget, but it also works in all standalone modes.
7 | 8 |CKFinder.widget( 'ckfinder-widget', {
9 | displayFoldersPanel: false,
10 | width: '100%',
11 | height: 700
12 | } );
13 |
14 |
15 | @stop
16 |
17 | @section('scripts')
18 |
25 |
26 | @stop
27 |
--------------------------------------------------------------------------------
/views/samples/user-interface-default.blade.php:
--------------------------------------------------------------------------------
1 | @extends('ckfinder::samples/layout')
2 |
3 | @section('content')
4 | By default folders are displayed in CKFinder in a folder tree panel, like in the example below.
6 | 7 | 8 | @stop 9 | 10 | @section('scripts') 11 | 17 | 18 | @stop 19 | -------------------------------------------------------------------------------- /views/samples/user-interface-listview.blade.php: -------------------------------------------------------------------------------- 1 | @extends('ckfinder::samples/layout') 2 | 3 | @section('content') 4 |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.
6 |The list view can be enabled regardless of the selected user interface (Default/Compact/Mobile).
7 | 8 |CKFinder.widget( 'ckfinder-widget', {
9 | defaultViewType: 'list',
10 | width: '100%',
11 | height: 700
12 | } );
13 |
14 |
15 | @stop
16 |
17 | @section('scripts')
18 |
28 |
29 | @stop
30 |
--------------------------------------------------------------------------------
/views/samples/user-interface-mobile.blade.php:
--------------------------------------------------------------------------------
1 | @extends('ckfinder::samples/layout')
2 |
3 | @section('content')
4 | Mobile user interface is enabled automatically when the width of the working area of the application gets below the value
6 | defined in the uiModeThreshold
7 | configuration option.
Note: This mode works best on mobile devices, as touch and swipe events are not enabled for desktop browsers.
9 | 10 | 11 | @stop 12 | 13 | @section('scripts') 14 | 21 | 22 | @stop 23 | -------------------------------------------------------------------------------- /views/samples/widget.blade.php: -------------------------------------------------------------------------------- 1 | @extends('ckfinder::samples/layout') 2 | 3 | @section('content') 4 |Using the widget mode you can embed CKFinder directly on a page, as shown below.
7 |CKFinder.widget( 'ckfinder-widget', {
8 | width: '100%',
9 | height: 700
10 | } );
11 |
12 |
13 | @stop
14 |
15 | @section('scripts')
16 |
22 |
23 | @stop
24 |
--------------------------------------------------------------------------------
/views/setup.blade.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------