CKFinder to menadżer plików multimedialnych. Pozwala wgrywać i przeglądać pliki multimedialne na serwerze. W tym artykule pokażę jak zintegrować go z edytorem wysiwyg CKEditor.
Wpierw zainstaluj i skonfiguruj EasyAdmin + CKEditor.
INSTALACJA CKFINDER
1. Zainstaluj pakiet za pomocą composera:
|
1 |
$ composer require ckfinder/ckfinder-symfony-bundle |
2. Pobierz pakiet dystrybucyjny CKFinder. Ze względu na różne licencje nie jest dostarczany w standardzie.
|
1 |
$ php bin/console ckfinder:download |
3. Zainstaluj zasoby:
|
1 |
$ php bin/console assets:install |
W katalogu /public utwórz podkatalog /uploads, do którego będą wgrywane pliki z dysku komputera. Zmień prawa dostępu do tego katalogu na 0777. Możesz to zrobić manualnie lub z wiersza poleceń:
|
1 |
$ mkdir -m 777 public/uploads |
4. Dodaj trasę pakietu (config/routes/ckfinder.yaml):
|
1 2 3 |
ckfinder_connector: resource: "@CKSourceCKFinderBundle/Resources/config/routing.yml" prefix: / |
KONFIGURACJA UWIERZYTELNIENIA
Uwierzytelnianie konektora CKFinder jest zarządzane przez usługę ckfinder.connector.auth, która jest zdefiniowana w klasie: CKSourceCKFinderBundle\Authentication\Authentication. Klasa zawiera metodę authenticate(), która zwraca wartość logiczną (true lub false), w zależności, czy użytkownik powinien mieć dostęp do komponentu CKFinder, czy też nie. Domyślna wartość to false.
1. Utwórz klasę uwierzytelnienia CustomCKFinderAuth.php (src/CustomCKFinderAuth/CustomCKFinderAuth.php).
Poniższa implementacja rozszerza bazową klasę Authentication i zwraca wartość true (co nie jest bezpieczne). Kod klasy nie jest skończony i należy traktować jako wstępne rozwiązanie.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php // src/CustomCKFinderAuth/CustomCKFinderAuth.php namespace App\CustomCKFinderAuth; use CKSource\Bundle\CKFinderBundle\Authentication\Authentication as AuthenticationBase; class CustomCKFinderAuth extends AuthenticationBase { public function authenticate() { return true; } } |
2. Dodaj plik konfiguracyjny ckfinder.yaml (config/packages/ckfinder.yaml):
|
1 2 3 |
ckfinder: connector: authenticationClass: App\CustomCKFinderAuth\CustomCKFinderAuth |
Wszystkie niezdefiniowane opcje zostaną pobrane z domyślnego pliku konfiguracyjnego.
Przykład konfiguracji:
|
1 2 3 4 5 6 7 8 9 10 11 |
ckfinder: connector: licenseName: LICENSE-NAME licenseKey: LICENSE-KEY authenticationClass: App\CustomCKFinderAuth\CustomCKFinderAuth backends: default: baseUrl: /public/media/ root: '%kernel.project_dir%/public/media' images: quality: 100 |
Więcej opcji znajdziesz w dokumentacji.
AKTYWACJA CKFINDER W PANELU EASYADMIN
1. Utwórz plik ładujący setup-ckfinder.js (public/js/setup-ckfinder.js):
|
1 2 |
CKFinder.config({ connectorPath: '/ckfinder/connector' }); CKFinder.setupCKEditor(); |
2. Zaimportuj pliki: ckfinder.js i setup-ckfinder.js do konfiguracji easy_admin.yaml (config/packages/easy_admin.yaml):
|
1 2 3 4 5 6 7 8 9 10 11 12 |
easy_admin: site_name: 'Admin' design: # ... form_theme: # ... - '@FOSCKEditor/Form/ckeditor_widget.html.twig' assets: # ... js: - '/bundles/cksourceckfinder/ckfinder/ckfinder.js' - '/js/setup-ckfinder.js' |
I to wszystko. Przetestuj działanie integracji. Jeśli jest ok to po kliknięciu przycisku „Przeglądaj” powinien pojawić się popup z przeglądarką multimediów.
